flexbox를 사용할 때 필요한 네 가지 과정
- flexbox 사용
- 가로정렬? 세로정렬?
- 한 줄? 여러 줄?
- 플렉스박스 사용하기
flexbox 사용
정렬을 하고자 하는 요소의 부모에게 flex 선언을 해줘야 합니다.
.flexbox {
display: flex;
/*inline-flex도 가능*/
}
flex도 일종의 box type입니다.
가로, 세로 선택하기
정렬을 어느 방향으로 할 것인지 알려줘야 합니다.
.flexbox {
display: flex;
flex-direction: row;
/* row | row-reverse | column | column-reverse */
}
축(axis)
flex를 사용하면 두 개의 축(axis)이 생깁니다.
main axis : flex-direction 방향
cross axis : main axis와 수직 방향
이 축들은 flex-direction에 따라 다음과 같이 달라집니다.
한 줄 or 여러 줄
한 줄 안에 요소들을 정렬할건지 상황에 따라 여러 줄을 만들건지 정해줘야 합니다.
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* nowrap | wrap */
}
flex-wrap에 의해 결정되며, nowrap은 무조건 한 줄, wrap은 상황에 따라 여러 줄로 정렬하게 됩니다.
wrap은 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만듭니다.
반면, nowrap은 자식의 사이즈를 줄여서라도 한 줄로 정렬합니다.
사용하기
main axis 기준 정렬: justify-content
cross axis 기준 정렬: align-items, align-content
order: flex가 적용된 부모의 자식에게 번호를 주고 그 번호대로 정렬
.flexbox {
justify-content: center;
/* flex-start | flex-end | center | space-between | space-around */
align-items: center;
/* align-content: center; */
}
.flexbox > li:nth-child(1){
order: 3;
}
.flexbox > li:nth-child(2){
order: 2;
}
.flexbox > li:nth-child(3){
order: 1;
}
/* child(3) child(2) child(1) 순으로 정렬 */
wrap을 사용했을 때 align-content가 의미를 가집니다.
align-items는 wrap으로 인해 줄 수가 늘어났을 때 위 그림과 같이 축의 수가 늘어납니다.
그에 따라 정렬 모양이 바뀌기 때문에 이를 방지하기 위해 align-content를 사용해줍니다.
사용시 align-items를 먼저 써보고 내가 생각하는 결과가 이게 아니다! 싶으면 align-content를 써봅시다.
'CSS' 카테고리의 다른 글
[CSS] Typography (0) | 2023.07.28 |
---|---|
[CSS] Media Query (0) | 2023.07.27 |
[CSS] Position (0) | 2023.07.27 |
[CSS] Float (0) | 2023.07.26 |
[CSS] Box (0) | 2023.07.26 |