본문 바로가기

CSS/Flex

CSS 플렉스(flex) 기본

1. 부모

 

display: flex;

// 자식들을 flex 방식으로 정렬한다.

 

flex-direction: row; // 또는 column; row-reverse; column-reverse;

// 정렬을 가로로 할 것인지 세로로 할 것인지

 

justify-content: flex-start; // 또는 flex-end; space-between; space-around;

// direction에서 결정한 방향으로 어떻게 정렬할 것인지 (main axis)

 

align-items: flex-start; // 또는 flex-end; center;

// direction에서 결정하지 않은 방향으로 어떻게 정렬할 것인지 (cross axis)

 

 

flex-wrap: nowrap; // 기본값

// 자식의 width보다 화면이 줄어들어도 줄바꿔서 배치하지 않고 자식의 폭을 줄인다.

// 자식의 width를 설정했어도 상관하지 않는다.

// wrap으로 설정하면 줄바꿈한다.

 

align-content: space-between;

// 자식이 두 줄로 나눠졌을 때 생기는 각 가로 라인을 어떻게 배치할지 정한다.

// 방향만 90도로 다를 뿐 justify-content랑 동일하게 작동한다.

 

2. 자식

 

align-self: flex-start; // 또는 flex-end;

// 적용한 자식만 따로 움직인다.

 

 

order: 0; // 기본값

// order에 따라서 오름차순으로 자식의 위치가 달라진다.

 

flex-shrink: 1; // 기본값

// 부모의 폭이 좁아질 때 줄어드는 비율을 정한다.

// 모든 자식 설정했다고 했을 때 grid의 fr과 같은 방식으로 비율이 설정된다.

// 2로 했을 경우 다른 자식보다 2배로 줄어든다.

 

flex-grow: 0; // 기본값

// 부모의 폭이 넓어질 때 공간이 생기면 1 이상의 값을 준 자식이 늘어난다.

// 다른 자식도 1 이상으로 설정했을 때 숫자에 비례해서 각 자식이 차지하는 너비가 달라진다.