레이아웃을 정리할 때 사용하는 속성으로 flex를 소개한다. flex는 블록속성의 박스를 만들어 준다.
레이아웃을 정리 할때, 브라우저에서 긴 레이아웃을 정리 할때 보통 스크롤을 내려서 볼 수 있도록,
header, section, footer, div(구) 등의 순서가 아래로 내려오도록 정리했다. 이러한 태그들은 블록속성을 가지고 있기 때문에 자연스럽게 아래로 내려가는 수직구조를 만들어 준다.
블록 속성을 가진 태그들은 row 전체를 차지 하기 때문이다.
이러한 블록 속성으로 인해 세로로 떨어지는 수직구조를 작성 할 때는 어려움은 없지만,
li태그를 이용한 가로 배치 메뉴 등을 만들거나, 3단, 4단 등의 배치를 하는 레이아웃은
float:left나, display:inline-block(여백이 생김) 속성을 통해 만들어 왔다.
이러한 속성들은 수평구조를 만들기 위한 방법은 아니지만, 정석의 방법이 없어서 결국 이들 속성의 기능과 여러 다른 속성(clear, margin 등)을 함께 사용해 구조를 만들어왔다.
이처럼 레이아웃을 정리 할 때 위치 속성으로 분류 해 온 display:inline(-block) float이나 position 속성도 있지만, 제한된 크기나 여백 등을 재설정하는 등의 일들을 해결해 줄수 있는 방법이 소개하는 내용이다.
flex 레이아웃은, 점점 개선되는 브라우저 환경과 변화하는 스마트디바이스 환경(다양한 해상도에 맞는 반응형)에 유연하게 대처할 수 있는 방법이라 할 있겠다.
container와 item으로 나누어 속성을 정리하자.
여기서 container는 item을 감싸고 있는 부모요소로 하며, 부모요소 안에 있는 자식요소들을 배치 할 때 좀 더 flexible하게 배치하는 속성이다.
또한 유연한 반응형 레이아웃 구조를 보다 쉽게 설계할 수 있는 장점이 있다.
2021년 2월 기준으로 브라우저 적용여부를 caniuse.com에서 보면, 아래와 같으니 참고하여 사용하도록 한다.
※ container에 사용하는 속성(부모요소)
부모요소인 container에 display:flex;를 먼저 선언하고 아래 속성으로 정렬방법 등을 적용한다.
| 속성 | 속성값 | 설명 |
| flex-direction | row |
기본값 : 좌->우 한줄로 가로배치 자식요소item을 나열하는 방향을 지정 |
| row-reverse | 우->좌 | |
| column | 위->아래로 한 컬럼에 세로정렬 많이 씀-mobile | |
| column-reverse | 아래->위 | |
| flex-wrap | nowrap | 기본값 : 자식요소 item들의 줄바꿈 방식지정, 자식요소가 많아도 기본폭이 줄어들며 한줄로 배치 |
| wrap | 자식요소들이 많으면 기본폭을 유지하며 다음 줄로 넘침 | |
| wrap-reverse | 자식요소들이 많으면 다음 윗줄로 넘침 | |
| justify-content (가로정렬) |
flex-start | 기본값 : 공간이 남을 때 시작쪽으로 가로정렬 |
| flex-end | 끝쪽으로 정렬 | |
| center | 세로 중앙정렬 | |
| space-between | 양쪽으로 정렬 | |
| space-around | 요소 좌우 동일 간격을 두고 정렬 | |
| align-items (세로정렬) |
flex-start | 시작쪽으로 세로 정렬 |
| flrx-end | 끝쪽으로 정렬 | |
| center | 중앙으로 정렬 | |
| baseline | 글자의 baseline애 맞춰 정렬 | |
| stretch | 기본값 : 부모요소의 세로 크기를 따라 확장됨 | |
| flex-flow | row nowrap | flex-directionn과 flex-wrap을 하나의 속성으로 묶어서 사용 |
| align-content (flex-wrap:wrap일 때 여러줄을 세로 정렬함) |
flex-start | 시작쪽으로 세로 정렬 |
| flex-end | 끝쪽으로 정렬 | |
| center | 세로 중앙정렬 | |
| baseline | 글자의 baseline애 맞춰 정렬 | |
| stretch | 기본값 : 부모요소의 세로 크기를 따라 확장됨 |
1. flex container 의 속성
container는 items의 부모요소이며, flex로 레이아웃 구조를 정리하기 위해서는 여기에 display:flex를 설정해야 한다.
container에서 사용하는 속성은 위의 표에 있는 것 처럼,
display, flex-direction, justify-content, align-items 등이 있다.
우선, container 는 가로 축과 세로축의 개념을 적용는데,
가로축은 (main-axis, 주축)으로 기본 설정값이고,
세로축은 (cross-axis, 교차축)으로 세로 방향의 축이다.
3. flex-direction 방향을 설정한다.
- flex-direction :row; 기본값으로 가로방향으로 설정됨
- flex-direction :row-reverse; 가로방향을 반대로 설정됨
- flex-direction :column; 세로방향으로 설정됨
- flex-direction :column-reverse; 세로방향을 반대로 설정됨
4. flex-wrap : 아이템을 기본인 한줄로 배치하거나, 여러줄로 배치한다.
- flex-wrap:nowrap; 기본값, 박스를 한줄로 배치, 아래줄로 넘기지 않음
- flex-wrap:wrap; 박스를 여러줄로 배치, 넘치면 아래줄로 넘김
- flex-wrap:wrap-reverse; 박스를 여러줄로 배치하되 역방향으로 배치,
- 주축이 가로일때 아래에서 위로, 주축이 세로일 때 오른쪽에서 왼쪽으로 배치
- css에서 wrap의 자식 너비가 100%여도 아래로 배열되지 않음. 기본값이 nowrap이기 때문
5. flex-flow:row wrap;
플렉스의 방향과 여러줄 배치를 한번에 작성한다.
flex-flow:row wrap; ==> flex-direction:row; 와 flex-wrap:wrap;을 한줄로 작성한 것이다.
5. justify-content
가로 정렬방법을 정하는 속성이다.
- justify-content: flex-start; 박스를 주축으로 시작점을 정렬, 기본값
- justify-content: flex-end; 박스를 주축으로 끝 점을 정렬
- justify-content: center; 박스를 주축으로 가운데로 정렬
- justify-content: space-between; 박스에 빈 공간이 있을 때, 첫째와 마지막 박스는 양끝으로 붙이고, 나머지 박스는 동일한 간격으로 정렬
- justify-content: space-around; 박스에 빈 공간이 있을 때, 양끝에 잇는 박스의 양 옆에도 공간을 둔 채 정렬, 개별박스의 좌우 여백을 모두 동일하게 적용
- justify-content: space-evenly; 박스에 빈 공간이 있을 때, 양끝에 잇는 박스의 양 옆에도 공간을 둔 채 정렬, 좌우,박스사이 간격의 여백을 모두 동일하게 적용
6. align-items
세로 정렬방법을 정하는 속성이다.
- align-items: stretch;
- align-items: flex-start;
- align-items: center;
- align-items: flex-end;
- align-items: baseline;
7. align-content
여러줄인 플렉스 아이템을 교차축방향으로 배치하기(세로간격)
- align-content: stretch;
- align-content: flex-start;
- align-content: center;
- align-content: flex-end;
- align-content: space-between;
- align-content: space-around;
※ items에 사용하는 속성(자식요소)
자식요소인 items에 flex:1 1 0; 과 같이 선언하고, 개별적으로 정렬속성 및 공간을 차지하는 속성을 적용한다
| 속성 | 속성값 | 설명 |
| order | number | flex item들의 순서를 지정 |
| flex-grow | 0 | 기본값 |
| 1 | item들이 모두 1이면 같은 크기 | |
| 양수 | 값이 커질수록 늘어남, 공간이 작으면 무의미 |
|
| flex-shrink | 0 | 공간이 작아도 item의 크기를 줄일수 없음 |
| 1 | 기본값(공간이 줄어들면 item도작아짐) 자식요소가 많아 부모요소의영역이 작아지면, 넘치지 않도록 줄어듬 |
|
| 양수 | 값이 커지면 공간이 줄어듬(수축지수) 공간이 남으면 무의미 |
|
| flex-basis | auto | 기본값 (요소의 초기 길이를 지정함) |
| 100px... | 지정해주는 크기 | |
| flex | 1 1 0 1 1 auto 같은 결과 |
flex-grow (생략안됨) flex-shrink (생략가능) flex-basis (생략가능) |
| align-self (item요소를 세로정렬) |
flex-start | 시작쪽으로 세로 정렬 |
| flex-end | 끝쪽으로 정렬 | |
| center | 세로 중앙정렬 | |
| baseline | 글자의 baseline애 맞춰 정렬 | |
| stretch | 기본값 : 부모요소의 세로 크기를 따라 확장됨 |
items의 속성에는 위의 표와 같이, order, flex, align-self 등이 있다.
크기변경(비율) : flex, 즉 세가지를 한번에 작성 [flex-grow][flex-shrink][flex-basis]
1. flex-grow : 플렉스박스에 여백이 있을 때 아이템의 크기를 늘일수 있는 속성
- 속성값을 비율로 설정, width, flex-basis 속성값에 따라 늘어나는 크기가 변할 수 있다.
- 플렉스 박스 안에 아이템이 3개일때, flex-grow 1,1,2로 설정하면 남은 공간을 4등분하여, 1/4,1/4,2/4 만큼 기본 크기에 더한다.
2. flex-shrink : 플렉스 반스 안의 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성
- 플렉스 박스 안에 아이템이 3개일때, flex-shrink 1,1,2로 설정하면 넘치는 공간을 4등분하여, 1/4,1/4,2/4 만큼 기본 크기에 뺀다.
3. flex-basis : 플렉스 박스의 기본 크기를 설정하는 속성
- 속성값으로 0이 들어가면, item이 긴~ 내용을 가지고 있어도 고정크기를 갖게 된다. 단위는 px, %를 사용
- 속성값으로 auto가 들어가면, 아이템의 기본 크기를 기준으로, flex-grow, flex-shrink 값에서 설정한 비율이 적용된다.
4. flex : 0 1 auto; 기본값
- flex : 0 auto; 0 1 auto와 같음
- flex : initial; 0 1 auto와 같음
- flex : auto; 1 1 auto와 같음
- flex : none; 0 0 auto와 같음
ref :
Flex 연습 사이트 : flexboxfroggy.com/#ko
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| css 위치와 공간 해석 - float (0) | 2021.02.09 |
|---|---|
| css 공간의 이해 3 - margin collapsing (0) | 2021.02.09 |
| css 공간의 이해 2 - - margin collapsing (0) | 2021.02.09 |
| css 공간의 이해 1 - BFC (0) | 2021.02.08 |
| coding tip - 2. about margin & overflow(BFC) (0) | 2021.02.04 |
