[CSS] flex 사용법 알아보기 - 띵코딩 on Code

flex란?

flex는 display 속성 중 하나로 Flexible Box Layout란 뜻으로 컨테이너 박스 내에서 아이템들을 유연하게 배치 가능하게 해주는 레이아웃 속성이다. 화면의 크기에 상관없이 요소의 크기와 위치, 정렬 등을 설정해주기 때문에 반응형 레이아웃에서도 유용하게 쓰인다.

 

flex의 전용 요소들

flex-direction : 컨테이너 내의 아이템을 배치할 때 사용할 주축을 지정합니다.

flex-direction: row; // 가로축을 주축으로 왼쪽부터 시작하여 정렬된다.

flex-direction: row-reverse; // 가로축을 주축으로 오른쪽부터 시작하여 정렬된다.

flex-direction: column; //세로축을 주축으로 위에서부터 시작하여 정렬된다.

flex-direction: column-reverse; // 세로축을 주축으로 아래에서부터 시작하여 정렬된다.

flex-direction 속성이 주어지지 않으면 기본적으로 row값으로 설정된다.
이 외에 inherit, initial, unset 전역 값이 속성으로 올 수 있다.

 

flex-wrap : 컨테이너 내의 아이템들이 강제로 한줄로 배치되게 할 것인지, 또는 여러행으로 배치할 것인지 결정하는 속성입니다.

flex-wrap: nowrap; // 컨테이너 내의 아이템들을 한 줄로 배치한다.

flex-wrap: wrap // 컨테이너 너비에 따라 아이템들을 여러행으로 배치한다.

flex-wrap: wrap-reverse; // wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치된다.

flex-wrap 속성이 주어지지 않으면 기본적으로 nowrap값으로 설정된다.

 

flex-basis : 아이템들의 초기 크기를 지정합니다. 크기를 지정해주고 싶은 아이템에 값을 넣어주어야 합니다.

.container{
	display: flex;
}

.item1{
	flex-basis: auto; // auto는 width를 정해주는 값들과 같이 아이템에 주어진 크기를 사용한다.
}

.item1{
	flex-basis: 200px; // width를 나타내는 단위를 사용할 경우 값에 맞게 조절해준다. em, auto 등등
    // 주어진 값보다 아이템의 width가 클 경우 원래의 크기를 유지한다.
}

.item1{
	flex-basis: content; // 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변한다.
}

 

flex-grow : 아이템 요소가 컨테이너 내부에서 할당 가능한 공간의 정도를 선언합니다.

.item1{
  flex-grow: 1;
}
.item2{
  flex-grow: 2;
}
// 컨테이너의 빈공간을 다 메워준다.

 

flex - CSS: Cascading Style Sheets | MDN (mozilla.org)

flex - CSS: Cascading Style Sheets | MDN