Flexbox

01 Flexbox (Flexible Box Module) 'Container'

display: flex;

flexbox는 container와 item으로 이루어져 있다.
container는 flex속성을 가진 부모 소요이고, item은 container 내부의 자식 요소이다.
flex를 사용하면 요소들이 공간에 맞추어 크기나 위치를 조정한다.

위의 이미지에서 box 들은 모두 item 요소에 해당하며, box외 배경색이 들어간 부분이
container에 해당한다. flex는 부모 요소와 자식 요소에 적용하는 속성이 구분되어 있다.

• container: flex-direction, justify-content, align-items, align-content, wrap, flex flow
• item: align-self, flex-grow, flex-shrink, flex-basis, order, flex

02 flex-direction

flex-direction: row / column;

flexbox에서 레이아웃의 방향을 결정하는 속성이다.
row가 기본값이며 메인축 즉, 가로축 방향을 설정하고 왼쪽에서 오른쪽으로 item이 정렬된다.
column은 교차축 즉, 세로축 방향을 설정하는 값이고 위에서 아래로 item이 정렬된다.
이 때, row와 column모두 reverse를 적용할 수 있는데 reverse를 적용하게 되면
row는 오른쪽에서 왼쪽으로, column은 아래에서 위로 요소들이 정렬된다.

03 justify-content

justify-content: ...;

justify content는 flex container안의 item들의 메인축(가로축) 배열에 대한 속성이다.

03-1. flex-start

flex-start는 기본값으로 container의 좌측으로 정렬된다.

03-2. flex-end

flex-end는 container의 우측으로 정렬된다.

03-3. center

center는 container의 중앙에 정렬된다.

03-4. space-between

첫번째 item과 마지막 item이 화면의 양 끝에 위치하고 남은 여백을 동일하게 적용한다.

03-5. space-around

item을 기준으로 좌우의 여백을 동일하게 주어 정렬한다.

03-6. space-evenly

item을 제외하고 남은 여백을 모두 동일하게 나누어 적용한다.

04 align-items

align-items는 flex container안의 item들의 교차축(세로축) 배열에 대한 속성이다.

04-1. stretch

기본값으로 적용되며 자식 요소인 item의 높이를 늘려 부모 요소인 container의 전체 높이를 채운다.

04-2. flex-start

flex-start는 container의 상단에 정렬된다.

04-3. flex-end

flex-start는 container의 하단에 정렬된다.

04-4. center

center는 container의 중앙에 정렬된다.

04-5. baseline

item들이 수직축 방향에서, item자체의 크기와 별개로, 내부의 text baseline에 맞추어 정렬된다.

05 align-content

align-content와 align-items는 수직선 상에서 item들을 정렬한다는 부분은 동일하다.
하지만 align-items는 모든 item을 한 줄로 배치하고 정렬하고 align-content는 여러 줄의 item을 배치하고 정렬하는 데 사용된다는 점에서 다르다.

justify-content와 동일한 속성값을 가지고 있고 align-content는 wrap이나 wrap-reverse 속성이 설정되어 있을 때만 사용할 수 있다.

06 wrap

wrap은 부모 요소 안에 item들을 강제로 한 열에 배치할 것인지,
요소의 css속성을 유지하면서 여러 줄로 배치할 것인지 정한다.

위와 같이 container 안에 6개의 정해진 규격의 item이 있을 때, 브라우저의 너비가 줄어들거나 부모 요소의 너비가 줄어들게 되어 item의 자리가 부족해 졌을 경우, item이 어떻게 배치될 지에 대한 것이다.

06-1. nowrap

nowrap을 적용하면 부모 요소가 줄어들어 자리가 부족해졌음에도, 한 줄로 배치되기 위하여 자식 요소들의 너비가 줄어든 것을 볼 수 있다.

06-2. wrap

wrap의 경우에는 자식 요소가 각 주어진 속성값을 유지하면서 container안에 배치 될 수 있도록
두 줄로 나뉘어 배치된 것을 볼 수 있다.

06-3. wrap-reverse

wrap과 같이 적용되나 순서가 반대로 된다.

07 flex-flow

flex-flow는 flex-direction 과 flex-wrap가 합쳐진 속성이다. 다음과 같이 사용한다.

flex-flow: column wrap;

---

01 Flexbox (Flexible Box Module) 'Item'

아래는 flexbox 중에 자식요소인 item에 적용하는 속성에 대한 것이다.
flex를 이용할 때 모든 자식 요소에 매번 class나
id를 부여하기는 번거로울 수 있으니 nth-child 등의 구조 선택자를 활용할 수 있다.

02 flex-basis

item의 기본 크기를 지정하는 속성이다. 기본값은 auto로 설정되어 있으며, 요소가 가지고 있을 기본 너비를 설정하는 값이다.

flex-basis: 0;	

0으로 지정된 경우 자식요소는 부모요소를 기준으로 크기가 결정된다.

flex-basis: auto;

auto로 지정된 경우 자식요소는 콘텐츠 양, 크기를 기준으로 크기가 결정된다.

03 flex-grow

item의 여백에 대한 증가 너비 비율을 지정하는 속성이다. 기본값은 0으로 설정되어 있으며 0이 지정되면 부모 요소의 크기나 여백에 관계 없이 기본 크기를 유지한다. 그러나 flex-grow값이 주어지면 부모 요소의 크기가 커지거나 다른 여백이 생기게 되었을 때, 설정된 값만큼 비율로서 item이 크기로 배정받는다.

예를 들어 item1: 2, item2: 1, item3: 1, item4:1로 분배했을 경우, 분배값의 총 합이 5 이므로 남은 여백의 20%에 자신의 분배값을 곱하여 배정하게 된다.

04 flex-shrink

item의 감소 너비 비율을 지정하는 속성이다. flex-grow의 반대 속성으로 볼 수 있다. 이 때 주의할 점은 숫자가 클 수록 더 많이 줄어든다는 점이다.

05 flex

자식 요소에 적용하는 flex속성은 자식 요소인 item의 크기와 관련된 속성으로 위의 세가지 속성, flex-grow, flex-shrink, flex-basis가 합쳐진 속성이다. 다음과 같이 사용한다.

nth-child(1){flex: 0 1 auto;}

05 order

.box4{order: -1;}

item들의 배치 순서를 지정하는 속성으로 값이 작을 수록 먼저 배치 되며 음수로도 적용 가능하다.

06 align-self

교차축에서 지정하는 item만을 개별로 배치하는 속성이다. align-items와 동일한 속성값을 가지고 있고, align-items는 자식 요소 모두를 선택하고, align-self는 지정한 한개의 자식요소를 선택한다는 점이 다르다.