zoaseo 2022. 4. 14. 11:36

※flex-box 레이아웃
container에게 주는 속성
1. display : flex;
2. flex-direction : 배치방향을 지정
속성값 - row(default) / column / row-reverse / column-reverse
3. flex-wrap : 아이템을 한줄로만 배치할건지 여러줄로 배치할건지 지정
속성값 - wrap / no-wrap(default) / wrap-reverse
4. flex-flow(속기법): column no-wrap
5. justify-content : 주축방향 아이템 정렬을 지정
속성값 - flex-start / flex-end / center / space-around / space-between / space-evenly
6. align-items : 교차축 아이템 정렬 지정(한줄일 때)
속성값 - flex-start / flex-end / center / stretch(default)
7. align-content : 교차축 아이템 정렬 지정(여러줄일 때)
속성값 - flex-start / flex-end / center / space-around / space-between / stretch

item에게 주는 속성
1. order : 아이템 배치 순서를 지정
2. align-self : 
속성값 - flex-start / flex-end / center / stretch / baseline