[CSS] Flexbox

flexbox를 사용할 때 필요한 네 가지 과정

1. flexbox 사용
2. 가로정렬? 세로정렬?
3. 한 줄? 여러 줄?
4. 플렉스박스 사용하기

 

 

 

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를 써봅시다.