Flexbox

• flex는 잘 구부러지는 유연하다는 뜻이다.
• 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는데 의의가 있다.

display: flex

• 부모 박스 요소에 적용해, 자식의 박스 방향과 크기를 결정하는 레이아웃 구성 방법

부모 요소에 적용해야 하는 Flexbox 속성

flex-direction: 정렬 축 정하기

• 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다.
• 아무 설정이 없을 시 기본적으로 가로 정렬.
• row(기본값), column, row-reverse, column-reverse

flex-wrap : 줄 바꿈 설정하기

• 하위 요소들의 크기가 상위 요소의 크리를 넘으면 자동 줄 바꿈을 할 것인지 정한다.
• 아무 설정이 없을 시 줄 바꿈을 하지 않는다.
• nowrap(기본값), wrap, wrap-reverse

justify-content: 축 수평 방향 정렬

• 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.
• 가로 방향일 때, 가로 방향으로 어떻게 정렬할 것인지
• 세로 방향일 때, 세로 방향으로 어떻게 정렬할 것인지 정한다.
• flex-direction의 방향에 따라 적용되는 방향이 달라진다.
• flex-start, flex-end, center, space-between, space-around

align-items: 축 수직 방향 정렬

• 자식 요소들의 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
• 가로 방향일 때, 세로 방향으로 어떻게 정렬할 것인지
• 세로 방향일 때, 가로 방향으로 어떻게 정렬한 것인지
• flex-direction의 방향에 따라 적용되는 방향이 달라진다.
• stretch, flex-start, flex-end, center, baseline

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값

• flex: <grow(팽창지수)> <shrink(수축지수)> <basis(기본 크기)>
• 설정이 없을 시 flex: 0 1 auto; (기본값) 적용
• 세 가지 값을 한 번에 설정할 필요 없이, 각 값을 따로 지정할 수 있다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

grow

• 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 늘어나서 남는 공간을 차지할 비율을 정하는 것
• 총합에서의 비율

shrink

• grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다.
• 만약 grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방

basis

• 박스의 기본 값을 말한다. 즉, grow나 shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
• grow 속성 값이 0인 경우에만, flex-basis 속성 값이 유지 된다.
• basis로 설정된 크기가 항상 유지되는 것은 아니다. grow 속성 값이 양수인 경우, 늘어나면서 basis 속성에 적용한 값보다 커질 수도 있기 때문.

참고

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있음.