[CSS.016] FloxBox로 정렬해보기

 [1] Flex 레이아웃의 구조 

Flex 레이아웃 기본구조

Flex 레이아웃의 기본 구조는 위 그림과 같습니다.

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고,

자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다.

 

Flex 그림

컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다.

 

 [2] 플렉스 컨테이너 

 

[코드 1]

코드1

 

 

[코드1-실행결과]

코드1 실행결과

 

 

[코드2] display: flex

아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다.

코드2

 

[코드2-실행결과]

코드2 실행결과

 

display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다.

그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다.

height는 컨테이너의 높이만큼 늘어납니다.(아래 그림처럼 height값을 컨테이너에 적용해보세요)

 

height값 적용

 

height값에 맞춰 높이가 늘어나는 아이템들

 

 

[코드3] flex-direction (배치 방향 설정)

이번에는 아이템들이 배채되는 축의 방향을 결정하는 flex-direction을 실습해 봅시다.

아이템들을 가로로 할지, 세로로 할지를 설정하는 아래의 코드를 하나씩 실행해 보세요.

코드 3

 

(기본값)

 

 

다음 번 실습을 위해 아래와 같이 HTML의 item개수를 7개 까지 늘려주세요.

 

[코드4] flex-wrap (줄넘김 설정)

아이템들이 한 줄에 다 표현이 안될 정도로 많을 때, 줄바꿈을 할지 설정하는 flex-wrap 속성입니다.

 

코드 4

 

 

[코드 5] 

flex-direction과 flex-wrap을 한번에 설정할 수 있는 명령어로, flex-flow가 있습니다.

사용방법은, 아래와 같이 flex-direction, flex-wrap 순서대로 작성하면 됩니다.

 

 

 

 

 

[코드6] justify-content (가로축 방향 정렬)

justify는 가로정렬을 의미합니다. 그래서 justify-content는 가로축 방향으로 아이템들을 정렬할 때 사용합니다.

 

코드 6

 

 

 

space-between/around/evenly에 대한 이미지 설명은 아래 더보기 클릭하기

 

 

[코드7] align-items (수직축 방향 정렬)

align은 세로정렬을 의미합니다. 그래서 align-items는 세로축 방향으로 아이템들을 정렬할 때 사용합니다.

 

코드 7

 

(기본값)
아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

 

 

* 화면 정가운데 놓기

 

 

[코드 8] align-content (세로축 방향 정렬)

align-content 는 무조건 1줄 초과일때만 효력이 있고, 아이템이 여러줄의 아이템들의 수직정렬을 의미한다.

코드 8

 

 

align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다 그래서 align-content의 경우, 두 줄의 flex-wrap:wrap;인 상태에서 사용해야 한다. 만약 no-wrap이면 라인이 넘어가지 않아 계속 한 줄인 상태이기 때문에 align-content를 사용해도 적용이 되지 않는다.

 

 

[3] 플렉스 아이템

 

[코드1] flex-basis

flex-basis는 Flex 아이템의 기본 크기를 설정합니다.

코드 1

 

 

 

 

[2] flex-grow