> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/html-css/flexbox.md).

# Flexbox

**Flexbox 레이아웃 사용법**

```html
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>
```

```css
.flex-container {
  display : flex;
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}
```

그냥 박스들을 감싸는 부모 요소에게 display : flex를 사용하면 됩니다.&#x20;

그럼 박스들이 기본적으로 가로정렬로 배치됩니다.&#x20;

(참고) 인터넷 익스플로러 11 이상에서 사용가능한 속성입니다.

11미만에선 flex 그런거 없다고 에러납니다.&#x20;

**Flexbox 세부속성 사용하기**&#x20;

```css
.flex-container {
  display : flex;
  justify-content : center;  /* 좌우정렬 */
  align-items : center;  /* 상하정렬 */
  flex-direction : column; /* 세로정렬 */
  flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */
  gap: 20px;
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
}
```

역시 외워봤자 다음날 까먹기 때문에

필요할 때마다 찾아쓰는게 일반적입니다.&#x20;

&#x20;

**박스 좌측 & 우측정렬 동시에 하는 법**&#x20;

```html
<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>
```

그러니까 첫 \<div>는 왼쪽,

마지막 \<div>는 우측정렬을 하고싶으면 어떻게 하냐는 겁니다.

그건 가운데 임시 \<div> 하나 만들어주고&#x20;

flex-grow: 1 이런 식으로 사이즈를 크게 키워주면 됩니다.

그럼 알아서 나머지 요소들은 좌측 우측으로 퍼집니다.&#x20;