FlexBox

FlexBox란?

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.

 

FlexBox 사용법

Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.
flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.
flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다.

출처: poiemaweb

.flex-container {
  display: flex; 
}

.flex-container {
  display: inline-flex; //부모가 inline요소일 경우
}

 

FlexBox container 속성

Justify-content 속성

요소들을 가로선 상에서 정렬한다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다

• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다

• center: 요소들을 컨테이너의 가운데로 정렬합니다.

 

• space-between: 요소들 사이에 동일한 간격을 둡니다.

• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items 속성

요소들을 세로선 상에서 정렬한다.

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다

• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다

• center: 요소들을 컨테이너의  세로선상의 가운데로 정렬합니다

• baseline: 요소들을 컨테이너의 시작위치에 정렬합니다

• stretch: 요소들을 컨테이너에 맞도록 늘립니다

 

flex-direction 속성

다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야할 방향을 지정한다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.