TIL)
프로퍼티가 꽤 복잡했던 flexbox ,, 종류가 많다.
이걸 다 외우고 있어야 하는건지 아니면 필요할 때 마다 찾아봐야 하는 건지 모르겠다.

FLEXBOX란

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.

이용 방법

부모 요소에 display를 flex라고 선언해주면 된다.

예 ) display: flex;

수평 정렬할 요소들을 감싸고 있는 부모 요소로
flex container가 필수다.

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

부모 요소와 자식 요소에 적용 가능 한 프로터티가 따로 있다

flex container 프로터티

display
flex-direction
flex-wrap
flex-flow
justify-content
align-item / align-content

1. display

• flex : flex container간에 수직 정렬
• inline- flex : flex container간에 수평 정렬

2. flex-direction

정렬 방법 설정하기.

flex direction 프로퍼티 값:

row(좌에서 우로 수평정렬), row-reverse(우에서 좌로 수평 정렬), column(위에서 아래로 수직정렬), column-reverse(아래에서 위로 수직 정렬)

3.flex-wrap

flex item들을 1행이나 복수의 행으로 배치하는 것

nowrap(디폴트) : flex item들을 한 행에 배치
wrap: 자식 요소들의 너비 합이 부모요소보다 크면 복수의 행에 표시. reverse도 존재.

4. flex-flow

flex-direction 과 flex-wrap를 같이 쓸 수 있는 단축 프로퍼티

5. justify-content

주 축 기반 수평 정렬 방법

디폴트 값이 flex-start라 flexbox 시작 점 부터 수평 정렬 됨

flex-start(디폴트), flex-end, flex-center, flex-between, flex-around의 프로퍼티 값이 존재

6. align-item / align-content

align-item: 교차 축 기반 정렬을 행마다 설정 align-content : 교차 축 기반 정렬을 행 전체 적용

flex item 프로터티

order, flex-grow, flex-shrink, flex-basis, flex, align-self

1. order

flex item 배치 순서로 디폴트 값은 0,
값이 낮은 순서대로 배치됨. 말그대로 순서를 설정

2. flex-grow

flex item 너비 증가 비율 설정

3. flex-shrink

flex item 너비 축소 비율 설정

4. flex- basis

디폴트 값은 auto, 기본 너비 설정

5. flex

flex-grow, flex-shrink, flex- basis 프로퍼티를 한 번에 지정하는 단축 프로퍼티

6. align-self

flex-container에서 적용한 전체 flex 수직 정렬 방법 보다 우선 적용하는 flex item 개별 수직 정렬 방법 (align-content, align-items 보다 우선 적용)

flex-start, flex-end, flex-center, flex-between, flex-around 로 설정

FLEXBOX 참고 페이지