# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/html-css/flexbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.