> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/attributes/area/flexbox.md).

# flexbox

## flexbox layout

`flexbox layout`은 컨테이너를 기준으로 공간을 키우거나 줄여 맞춤 배치하도록 설정하는 방식의 디자인이다. 다음과 같이 영역에 설정한다.

```css
/* 한 줄을 차지 */
display:flex;

/* 인라인 배치 */
display:inline-flex;
```

#### display:flex

`display` 속성을 `flex`로 설정하면 내부 요소들의 배치 방식이 변경된다. 자기 자신은 `block` 속성을 가진다.

{% embed url="<https://codepen.io/hiphop5782/pen/NWvEMob>" %}

#### display:inline-flex

`display` 속성을 `inline-flex`로 설정하면 내부 요소들은 `flex`와 동일하게 배치되지만 자기 자신은 `inline-block` 형태로 배치된다.

{% embed url="<https://codepen.io/hiphop5782/pen/VwzVxRJ>" %}

### flex-direction

`flex-direction` 속성은 flexbox의 **배치 방향**을 결정한다.

* flex-direction:row;
* flex-direction:row-reverse;
* flex-direction:column;
* flex-direction:column-reverse;

{% embed url="<https://codepen.io/hiphop5782/pen/ExvOLJe>" %}

### flex-wrap

`flex-wrap` 속성은 flexbox의 폭이 100%를 넘을 경우 **줄 바꿈 여부**를 결정한다.

* `flex-wrap : wrap;` - 폭이 100%를 넘어가면 줄을 바꾸어 배치
* `flex-wrap : nowrap;` - 폭이 100%를 넘어가도 줄을 바꾸지 않고 비율로 설정하여  <mark style="color:red;">(기본값)</mark>

{% embed url="<https://codepen.io/hiphop5782/pen/XWayYzG>" %}

### flex-flow

`flex-flow` 속성으로 `flex-direction`과 `flex-wrap` 속성을 같이 설정할 수 있다.

### flex-grow

`flex-grow` 속성은 flexbox의 내부 항목에 설정하여 비어있는 영역에 대한 <mark style="color:red;">점유 비율</mark>을 설정한다.

{% embed url="<https://codepen.io/hiphop5782/pen/MWvzXQP>" %}

### flex-shrink

`flex-shrink` 속성은 flexbox의 내부 항목에 설정하여 폭이 초과한 경우에 대한 <mark style="color:red;">수축 비율</mark>을 설정한다.

{% embed url="<https://codepen.io/hiphop5782/pen/OJjaEZj>" %}

예제의 inner 블록은 50%의 폭을 가지고 있어 합계 150%가 되므로 한 줄에 표시할 수 없는 상황이다. `flex-wrap` 속성도 `nowrap` 으로 되어 있어 줄 바꿈도 이루어지지 않기 때문에 영역이 부족한 상황이며, 이 때 폭이 같음에도 설정된 `flex-shrink` 비율에 따라 수축하는 것을 알 수 있다. 값이 클 수록 더 많이 수축한다.

### flex-basis

`flex-basis` 속성은 flexbox 내부 항목의 초기 크기를 지정하는 데 사용한다.

### 지원 브라우저 확인

{% embed url="<https://caniuse.com/flexbox>" %}