.container{
display: flex
}
.container .item{
}
<div class="container">
<div class="item"> item01 </div>
<div class="item"> item02 </div>
</div>
1. flex의 container에 대한 속성
- display : block | flex | inline-flex
- flex-flow:
- flex-direction:
- flex wrap
- justify-content
- align-content
- align-items
1.1 display : 아이템 배치속성
- block : 기본값, 아이템을 위에서 아래로 배치(상->하)
- flex : 좌에서 우로 배치(좌->우)
- inline-flex : 인라인 요소와 같이 정렬
- ※참고
- div는 기본값이 block
- block : 가로길이의 기본값이 auto, 즉 최대 너비를 갖는다.
- inline : 가로길이를 기본값이 auto, 즉 최소 너비를 갖는다(아이템의 크기만큼만 차지한다).
1.2 flex-direction : 수평/수직 정렬에 대한 설정(main-axis 설정)
- row : 수평정렬 (좌 -> 우), 기본값
- row-reverse : 수평 정렬 (우->좌)
- column : 수직 정렬 (상->하)
- column-reverse : 수직 정렬 (하->상)
-
flex-direction : row => main-axis를 row로
-
flex-direction : column => main-axis를 column으로
1.3 flex-wrap : Items 묶음, 줄바꿈 단위
- nowrap : 묶음 없음.줄바꿈 없음, 기본값
- wrap : 여러줄 몪음
- wrap-reerse : wrap의 반대 반향
1.4 justify-content : main-axis의 정렬방법
- flex-start : Flex Item을 시작점으로 정렬, 기본값
- flex-end : Flex Item을 끝점으로 정렬
- column-reverse와 다르게 아이템 항목은 바뀌지 않는다.
- center : Flex Item을 가운데 정렬
- 아래 두개 속성은 거의 사용하지 않음.
- space-between : 각 Item 사이를 균등하게 정렬
- space-aroundn : 각 Item의 외부 여백을 균등하게 정렬
1.5 align-content : cross-axis의 여러줄 정렬방법
- 한줄일 때는 작동하지 않는다. 2줄 이상일때만 작동
- stretch : Flex Item을 시작점으로 정렬하되 라인의 높이를 동일하게 만든다. 기본값
- flex-start : Flex Item을 시작점으로 정렬
- flex-end : Flex Item을 끝점으로 정렬
- column-reverse와 다르게 아이템 항목은 바뀌지 않는다.
- center : Flex Item을 가운데 정렬
- 아래 두개 속성은 거의 사용하지 않음.
- space-between : 각 Item 사이를 균등하게 정렬
- space-aroundn : 각 Item의 외부 여백을 균등하게 정렬
stretch
flex-start, center, flex-end
1.6 align-items : cross-axis의 한줄 정렬방법
- 세로 정렬시 실제로는 align-content 보다 효율적이라 많이 사용됨.
- stretch : Item을 교차축으로 늘림
- flex-start : Flex Item을 각 라인의 시작점 정렬
- flex-end : Flex Item을 각 라인의 끝점 정렬
- center : Flex Item을 각 라인의 가운데 정렬
- 아래 속성은 거의 사용하지 않음.
- baseline : Item을 각 라인의 문자 기준선에 정렬
stretch
flex-start, center, flex-end
2. flex의 item에 대한 속성
- order
- flex
- flex-grow
- flex-shrink
- flex-basis
- align-self
2.1 order : 아이템의 순서
- 0 : 순서없음
- number : 숫자가 작을수록 앞 순서
2.2 flex-grow : 아이템의 증가비율조절
- 컨테이너의 남은 부분에 대한 아이템의 증가비율을 설정
- 아이템에 flex-grow를 설정하면 컨테이너의 남은 부분을 아이템을 늘려서 채운다.
- 0 : main-axis에 대한 증가비율 없음
- number : 증가비율
2.3 flex-basis : 아이템의 비율 적용전(flex-grow) 기본 너비
- auto : 요소의 content 너비를 기준, 기본값
- 단위 : px, rem, em등 단위지정
- 참고 사항
- flex-grow와 조합해서 flex-basis:0 으로 조합해서 사용하는 경우가 대부분
2.4 flex : flex-grow,flex-shirink, flex-basis:0의 축약형
- flex-grow,flex-shirink, flex-basis를 같이 쓰는것 보다 간결하교 유용함.
- 아이템 width를 flex 비율로 배치. 아래의 축약형과 동일
- flex-grow, flex-shirink의 비율
- flex-basis:0
- 사용예 : flex:1, flex:2