[CSS] Flexbox

Flexbox란?

행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드

항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 된다.

display : flex;

 

flex-direction

flex 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정

• 기본축이 X축 방향

//왼쪽 → 오른쪽
flex-direction : row;
//오른쪽 → 왼쪽
flex-direction : row-reverse;

• 기본축이 Y축 방향

//왼쪽 → 오른쪽
flex-direction : row;
//오른쪽 → 왼쪽
flex-direction : row-reverse;

 

flex-wrap

‘flex-item’ 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성

flex-wrap:nowrap; // 기본값
flex-wrap:wrap; // 한 줄에 꽉 차게되면 다음 줄로 넘어감
flex-wrap:wrap-reverse; // 반대

 

flex-flow

기본값은 flex-start // 중심축(main axis)에서 배열을 어떻게 할 것 인지!

justify-content : flex-end; // 마지막 선에서 정렬

// 박스를 둘러싸며 spacing을 줌
justify-content : space-around; // 모두 동일한 spacing을 줌
justify-content : space-evenly; // 양 옆뿐만 아니라 모두 동일한 spacing
justify-content : space-between; // 양 옆을 화면에 딱 맞게 배치

 

justify-content

기본값은 flex-start // 중심축(main axis)에서 배열을 어떻게 할 것 인지!

justify-content : flex-end; // 마지막 선에서 정렬

// 박스를 둘러싸며 spacing을 줌
justify-content : space-around; // 모두 동일한 spacing을 줌
justify-content : space-evenly; // 양 옆뿐만 아니라 모두 동일한 spacing
justify-content : space-between; // 양 옆을 화면에 딱 맞게 배치

 

align-content

반대축(cross axis)에서 배열을 어떻게 할 것 인지! // justify-content와 속성은 동일

align-content : space-between; // 양 옆을 화면에 딱 맞게 배치

 

align-items

items들의 배열을 어떻게 할 것 인지

align-items : baseline; // 서로 다른 패딩이 있는 items를 균등하게 보여줌

 

flex-grow

flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언

.container{
 display : flex;
}

.item{
 flex-grow : 2;
}

.item2{
 flex-grow : 1;
}

.item3{
 flex-grow : 1;
}

 

flex-shrink

화면이 작아졌을 때 어떻게 할당 할 것 인지 결정

.container{
 display : flex;
}

.item{
 flex-grow : 2;
 flex-shrink : 1;
}

.item2{
 flex-grow : 1;
 flex-shrink : 1;
}

.item3{
 flex-grow : 1;
 flex-shrink : 1;
}

 

 

flex-basis

container의 width에 따라서 %를 정함

flex-basis : 60%;

 

 

align-self

item 하나만 정렬하고 싶을 때

align-self : center;