Flexible Box Layout(Flexbox) - Flex Container Properties

Flexible Box Layout(Flexbox)은 스타일이 "display: flex;" 로 지정된 컨테이너 요소내에 자식 요소들을 배치하는 방법에 관한 CSS 입니다. 웹 페이지 레이아웃을 만드는데 있어서 기존에는 float를 많이 사용했는데, 사용하기 힘든 점들이 있었습니다. Flexbox는 좀 더 강력한 레이아웃을 만드는 방법입니다. 하지만 많은 설정 요소들로 인해 사용이 쉽지는 않습니다.

ul { 
    display: flex;
    flex-direction: row;
    padding: 0;
    list-style-type: none;
    outline: solid 1px red;
}

li {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    margin: 8px;
    outline: solid 1px orange;
}

• 아이템 1
• 아이템 2
• 아이템 3

몇가지 용어들에 대해 먼저 알아보겠습니다.

• Flex Container : "display: flex;"로 지정된 요소를 말합니다. 위에서 <ul> 태그가 컨테이너가 됩니다.
• Flex Item : Flex Container 안에 들어가는 요소를 말합니다. 위에서 <li> 태그가 아이템이 됩니다.
• Main Axis(주축) : Flex 컨테이너 프로퍼티 flex-directinon 으로 지정된 방향의 축을 말합니다.
• Cross Axis(교차축) : 주축에 수직으로 교차되는 축을 말합니다.

Flex Container가 가지는 프로퍼티들 입니다. 컨테이너 내에서 아이템들이 배치되는 방식을 지정합니다.

• flex-direction : 아이템이 놓이는 방향을 지정하며, 주축이 됩니다. 사용 가능한 값은 row, row-reverse, column, column-reverse 입니다. 기본값은 row 입니다.
• flex-wrap : 아이템이 주축 방향으로 컨테이너 너비를 모두 채우면 다음 행 또는 열로 넘어갈지 지정합니다. 사용 가능한 값을 wrap, nowrap, wrap-reverse 입니다. 기본값은 nowrap 입니다.
• flex-flow : flex-direction과 flex-wrap의 축약 표현 입니다.
• justify-content : 컨테이너내에서 아이템이 정렬되는 방식을 지정합니다. 사용 가능한 값은 flex-start, flex-end, center, space-between, space-around 입니다. 기본값은 flex-start 입니다.
• align-items: 컨테이너내에서 아이템이 교차축 방향으로 정렬되는 방식을 지정합니다. 사용 가능한 값은 flex-start, flex-end, center, stretch, baseline입니다. 기본값은 flex-start 입니다.
• align-content: 아이템이 많아서 여러줄에 걸쳐 배치될때 적용되는 정렬 방식입니다.

flex-direction은 플렉스 컨테이너 내에 아이템이 놓이는 방향을 지정합니다.

• row : 왼쪽에서 오른쪽으로 아이템이 배열 됩니다(주축, 기본값). 교차축은 위에서 아래 방향이 됩니다.
• row-reverse : 오른쪽에서 왼쪽으로 아이템이 배열 됩니다. 교차축은 위에서 아래 방향이 됩니다.
• column : 위쪽에서 아래쪽으로 아이템이 배열됩니다. 교차축은 왼쪽에서 오른쪽 방향입니다.
• column-reverse : 아래쪽에서 위쪽으로 아이템이 배열됩니다. 교차축은 왼쪽에서 오른쪽 입니다.

flex-wrap는 아이템이 컨테이너 너비를 모두 채우고나서 어떻게 동작할지 지정합니다.

• wrap: 교차축 방향으로 다음 행 또는 열로 아이템이 넘어갑니다.
• nowrap : 넘어가지 않습니다.
• nowrap-reverse : 교차축의 반대방향으로 행 또는 열로 아이템이 넘어갑니다.

flex-flow는 flex-direction과 flex-wrap를 한번에 표기하는 프로퍼티 입니다. "flex-flow: row wrap;" 처럼 사용합니다.

justify-content 프로퍼티는 컨테이너내에 아이템이 정렬되는 방식을 지정합니다.

• flex-start: 주축에서부터 아이템이 놓여지게 됩니다.
• flex-end: 주축의 끝에서부터 아이템이 놓여지게 됩니다.
• center: 주축을 따라 가운데 정렬됩니다.
• space-between: 각 아이템들이 사이가 동일한 공간을 차지하게 됩니다.
• space-around: 각 아이템 주위가 동일한 공간을 차지하게 됩니다.

align-items 프로터티는 컨테이너내에 아이템이 교차축 방향으로 정렬되는 방식을 지정합니다.

• flex-start: 교차축의 시작 지점부터 맞춥니다.
• flex-end: 교차축의 끝지정 부터 맞춥니다.
• center: 교차축 방향의 가운데 정렬 합니다.
• stretch: 전체 컨테이너를 채우도록 늘어납니다.
• baseline: 폰트의 베이스라인에 맞춥니다.

align-content는 아이템이 많아서 여러줄에 걸쳐 배치될때 적용되는 정렬 방식입니다.

• flex-start: 교차축의 시작 지점부터 맞춥니다.
• flex-end: 교차축의 끝지정 부터 맞춥니다.
• center: 교차축 중심에 맞춰 정렬합니다.
• stretch: 교차축을 따라 사용 가능한 공간에 맞게 늘어납니다.