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 로 설정
