flexbox 주축, 시작선과 끝선

flex box중 이해하기 어려운 축과 시작선, 끝선을 정리한다.

Flex Box의 정렬에 관하여

flex에는 두개의 축이 존재한다. 하나는 주축이고 다른 하나는 추죽과 직각을 이루는 교차축이다.

• 주축은 flex-direction을 통해 정의할 수 있다.

  • row: 기본값, 좌에서 우로 가로로 존재한다.
    

  • row-reverse: 우에서 좌로 존재한다.
    

  • column: 상에서 하로 존재한다.
    

  • column-reverse: 하에서 상으로 존재한다.
    

• 시작선과 끝선은 flex-direction의 정의에 따라 바뀐다.

  • 축이 row일 경우 시작선은 왼쪽에 존재한다.

  • 축이 row-reverse일 경우 시작선은 오른쪽에 존재한다.

  • 축이 column일 경우 시작선은 위에 존재한다.

  • 축이 column-reverse일 경우 시작선은 아래에 존재한다.

• justify, align의 기준 (justify-content를 예로 든다.)
  +이후 설명에 display: flex를 사용해 자식를 정렬하는 요소를 flex-container라 칭하고 그 자식요소를 flex-item이라 칭한다.

  • start는 flex-container의 시작선을 기준으로 한다.

  • end는 flex-container의 끝선을 기준으로 한다.

  • flex-start는 flex-item의 시작선을 기준으로 한다.

  • flex-end는 flex-item의 끝선을 기준으로 한다.
    ex) row-reverse일때 start와 flex-start

  1. start
     

  2. flex-start
     

---

참고 사이트

• https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox