CSS 플렉스 Flex

CSS Layout

float

박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함, 인라인 요소들이 주변을 감싸도록 함.

(한글에서 사진을 삽입하면 객체 설정의 문자열 옆으로 놓게 해 주듯이)

Flexible Box

행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델

행 형태로 배치된 아이템 들을 열 형태로 바꿔줌

 

display: flex;

 

flex-direction: row-reverse; 로 해주면 아이템들이 오른쪽부터 가로로 정렬이 됨

( row: 디폴트, 아이템들이 왼쪽부터 가로로 정렬이 됨

, row-reverse

, column: 아이템들이 위에서부터 아래로 세로로 정렬이 됨

, column-reverse를 사용 가능 )

 

display: inline-flex; 해주면 사각형이 만들어지고 그 안에 아이템들이 정렬됨

 

※ Flex를 왜 써야 되나?

이전까지 Normal Flow를 변경하려면 float나 position밖에 없었음

Flex는 수직정렬, 아이템의 너비와 높이 혹은 간격을 동일하게 배치할 수 있다.

 

flex-wrap = wrap을 해주면 크기를 건드리지 않고 튀어나온 다면 밑으로 줄 바꿈

                   nowrap은 줄 바꾸지 않고 아이템 크기를 줄여줘 한 줄로 배치 (디폴트)

 

flex= flow는 row와 nowrap의 기능을 해주는 숏 핸드

 

justify-direction

메인 축을 기중으로 공간을 배분

가능 속성

 { flex-start: 왼쪽에 붙임

flex-end: 오른쪽에 붙임

center: 가운데 정렬

space-between 양 쪽에 아이템 한 개씩 붙이는 방식으로 정렬

space-around:한 개의 아이템이 양쪽에 똑같은 사이즈를 가지도록 정렬

space-evenly: 모든 공백(간격)이 똑같은 사이즈를 가지도록 정렬 }

 

align-content

크로스 축을 기준으로 공간을 배분

가능 속성 위와 같음

 

align-items

모든 아이템을 크로스 축을 기준으로 정렬

가능 속성

(stretch: 디폴트, 아이템들을 늘려서 채움

flex-start flex-end, center, baseline)

 

align-self

align-items와 같은 속성을 가지지만 개별 아이템에 적용 가능

 

flex-grow는 남은 영역(공백)을 아이템에 분배

예시) <div class="flex_item grow-1>

4개의 아이템에 대해 grow를 1, 1, 2, 1을 준다면 남은 영역(공백)에 대해 크기를 1대 1대 2대 1 비율로 늘어남.

 

order는 아이템의 배치 순서

예시) <div class="flex_item order-1>