[CSS] Flexbox

Flexbox 구성 요소

- 하나의 Flex container와 여러 개의 Flex item으로 구성

- 부모 요소에 flex를 적용하면 모든 직계 자식이 플렉스 항목이 됨

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

container에 적용할 수 있는 속성

1. flex-direction: 기본값은 row이며, 좌우로 배치됨 (row면 main axis는 좌우, column이면 상하)

- row-reverse로 설정하면, 반대쪽 구석에서 시작하여 역방향 대열이 됨

 

2. justify-content: main axis를 기준으로 정렬, flex-direction가 row면 좌우로 정렬

- 기본값은 flex-start로 item을 main axis의 맨 앞으로 정렬해 줌

- 주로 space-between를 씀 (양 끝 배치 후 나머지는 똑같은 간격으로 배치하는 속성값)

 

3. align-items: cross axis를 기준으로 정렬, flex-direction가 row면 상하로 정렬

- 기본값은 stretch로 container의 높이 또는 너비만큼 늘려줌

-  flex-direction가 row면 높이만큼 늘어남

 

4. flex-wrap: containter 영역을 벗어나는지를 고려하여 배치

- nowarp: item들을 containter 영역을 벗어나더라도 강제로 한줄에 배치

- wrap: 가능한 영역 내에서 벗어나지 않고 여러 행으로 걸쳐서 배치

- wrap-reverse: wrap과 같지만 방향이 반대로 배치됨

 

5. flex-flow: flex-direction과 flex-wrap 속성의 단축 속성

flex-flow: row wrap;
flex-flow: row-reverse nowrap;
flex-flow: column wrap-reverse;
flex-flow: column wrap;

 

item에 적용할 수 있는 속성

1. flex: flex-grow, flex-shrink, flex-basis 속성을 한 번에 적용할 수 있도록 해줌

- main axis 기준으로 공간 배분을 위해 사용됨

- 모든 item에 flex:1 을 주면 공백을 균등하게 나눠서 점유

2. flex-grow: item이 main axis 상에 공백을 얼마나 점유할지를 지정

3. flex-shrink: item이 main axis 상에 공백이 부족하면, 공간을 얼마나 양보할지를 지정

 

4. flex-basis: item이 main axis 상에 공백을 최소 얼마나 점유할지를 지정

 

 

 

 

+

- 본인을 한가운데 두기 위해 자식 요소가 아니라 본인한테 display: flex를 두는 경우가 많음

- 완전 한가운데까지는 아니면 그냥 패딩 사용하면 됨

 

++

gap은 양쪽 정렬하면 되니까  굳이 쓰지 않음. 

 

+++

align-content

- flexbox의 cross axis나 그리드, 블록 레벨에서 정렬할 때 씀

- align-items와 달리 두 줄이상의 전체 컨테이너를 정렬할 때 사용됨 

- start, center, space-between, space-around가 있음

 

 

---

[출처] https://www.daleseo.com/css-flexbox/

CSS 플렉스박스(Flexbox) 이해하기

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap

flex-wrap - CSS: Cascading Style Sheets | MDN