※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
'개발이 좋아서 > CSS가 좋아서' 카테고리의 다른 글
scss 사용법 (0) | 2022.04.18 |
---|---|
css - 변수 선언 및 사용법 (0) | 2022.04.18 |
css - center로 보내기 (0) | 2022.04.13 |
css - before, after (0) | 2022.04.11 |
css - display, float (0) | 2022.04.08 |