CSS flexbox

1. display

대부분 요소들의 레이아웃 구성은 수직 구성으로 좀 더 간편하게 수평 레이아웃을 구현하기 위해 display 속성을 사용할 수 있습니다.

display: flex;
block 요소들의 구성을 쉽고 빠르게 수평적으로 구현할 수 있습니다.

2. flex-direction

flex container 에서 중요한 개념은 바로 Axis(축)입니다.
어떤 축을 기준으로 정렬할지를 정하는 속성이 바로 flex-direction이다.
기본값은 row이며 column으로 세로로 요소들을 쌓을 수 있습니다.
row-reverse, row-column와 같이 작성할 경우 요소들은 배열 순서를 역방향으로 구현 할 수 있습니다.

3. flex-wrap

요소들의 여러 줄 묶음(줄 바꿈을)을 설정 할 수 있는 속성입니다.
부모 요소의 넓이보다 요소들의 총 길이가 더 넓을 경우 다음줄로 보기 좋게 배치 합니다.

flex-wrap : wrap

flex-wrap: wrap-reverse

4. justify-content

주 축(main-axis)의 정렬 방법과 아이템 사이의 간격을 설정합니다.
flex-direction: row의 경우 x축
flex-direction: column의 경우 y축
기본값은 flex-start입니다.

5. align-items

교차 축(cross-axis)의 정렬 방법을 설정합니다.
flex-direction: row의 경우 y축
flex-direction: column의 경우 x축
기본값은 align-items: stretch입니다.
각 요소의 폰트사이즈 또는 줄 간격이 다를 경우 baseline 속성으로 지정시 요소의 포함된 문자열을 기준으로 정렬합니다.

5-1. align-content

2줄 이상의 요소들이 정렬된 경우에서 한 몸 처럼 배치되도록 설정합니다.

align-content: center

6. flex

요소들의 너비(증가, 감소, 기본)을 설정합니다.
flex: 증가너비 감소너비 기본너비;

6-1 flex-grow

해당요소들을 같은 넓이를 가지게 하고 화면을 꽉 채우게 구현하고 싶다면 사용합니다.

6-2. flex-shrink

창이 줄어줄어도 해당요소는 고정값으로 더이상 줄지 않도록 설정합니다.
기본값은 flex-shrink:0 으로 숫자값이 높을 수록 창이 줄어 들때 더 빨리 줄어듭니다.

6-3. flex-basis

flex-grow의 경우 내부 요소의 여백을 공평하게 n분의 1로 나누는데 내부 컨텐츠 길이에 따라 동일한 flex-grow:1 경우에도 각각 다른 너비로 구현되어 보여진다
이 상황에서 flex-basis:0으로 속성을 줄 경우 안에 요소의 넓이를 동일하게 통일, 즉 각 요소들의 여백이 동일하게 설정되어 균형있는 배치를 구현 할 수 있다.
구체적인 값을 지정할 수도 있다.