reference: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Flexbox의 기본 개념
- 아이템 간 공간 배분과 강력한 정렬 기능을 제공하는 1차원 rayout model
- flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다
- 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조.
flexbox의 두 개의 축
- flexbox를 다루려면 주축과 교차축
- 주축은 flex-direction 속성을 사용하여 지정, 교차축은 이에 수직인 축
- flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원
주축
- flex-direction에 의해 정의되며 4개의 값
row
- row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따릅니다.
row-reverse
column
column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.
column-reverse
교차축
- 교차축은 주축에 수직하므로, 만약 flex-direction(주축)이 row 나 row-reverse 라면 교차축은 열 방향을 따릅니다.
- flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.
시작선과 끝선
- flexbox가 쓰기 방법(writing mode)을 가정하지 않는다.
- 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다.
flex-container
- flex 컨테이너를 생성하려면 display 값을 flex 혹은 inline-flex로 지정합니다.
- 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됩니다.
- display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.
> default
- flex-direction: row
- 항목은 주축의 시작 선에서 시작
- 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
- 항목은 교차축의 크기를 채우기 위해 늘어납니다.
- flex-basis 속성은 auto로 지정됩니다. ?
- flex-wrap 속성은 nowrap으로 지정됩니다.
결과
- flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. ?
- flex-wrap: nowrap
컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. - 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.
> flex-direction
row
row-reverse
행으로 나열, 시작 선과 끝 선이 서로 바뀜
column
주축이 변경되고 항목들은 열로 나열
column-reverse
주축이 변경되고 항목들이 열로 나열되며, 시작 선과 끝 선이 바뀜
> flex-wrap
- flexbox는 1차원 모델이지만 flex 항목이 여러 행에 나열되도록 할 수 있습니다.
- 각 행이 새로운 flex 컨테이너
- 공간 배분은 해당 행에서만, 다른 행 영향 X
wrap
- 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치
nowrap
- flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 * flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다.
- nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다(주축 방향)
flex-flow
- 축약형 속성
해결하고 싶은 것들
- flex 안의 element들이 display가 block이더라도 width를 content의 크기만큼만 차지하게 되는 이유
- align 상하, 좌우
programmerD