기존에는 HTML과 CSS만으로 웹사이트를 무리 없이 제작했다.
하지만 스마트폰이라는 디바이스와 테블릿이 들어오면서 여러 디바이스를 대응하기 위해서 여러가지가 생겼다.
이는 HTML, CSS뿐만 아니라 다른 개발언어에서도 보이는 현상이다.
기존의 HTML, CSS의 Inline, block에서 float, position Layout만으로 제작자는 갈증을 느꼈고 그로 인해서 생겨난 것이 Flex Layout 이다.
이 내용을 보면서 폭이 좁아서 제대로 코드가 안보일 경우 오른쪽 하단의 아이콘을 누르면 TOC가 사라지면서 넓어질 것이다.
Flex 란?
기존의 Layout(float, position)을 조금 더 유연하게 하기 위해서 생긴 Layout 이다.
float 처럼 좌, 우로 띄워서 보내는 것이 아니며
position 처럼 좌표값과 층으로 나누는 것이 아니다.
flex 는 조금 더 유연하게 각각의 구역을 똑같이 나눈다거나 중심에 배치시키는 그런 것이 가능하다.
나는 텍스트로만 설명하는게 가장 싫기 때문에 눈으로 보여줄 것이다.
Flex 구조
Flex는 부모요소와 자식요소가 있다.
부모요소는 container , 자식요소는 item 이라고 정의하며,
부모요소의 속성과 자식요소의 속성이 따로 있으며 그 속성을 보자면
container : display, flex-flow, justify-content, align-content 등
item : order, flex(flex-grow, flex-shink, flex-basis),align-self 등이 있다.
부모요소(container) 속성 살펴보기
display : flex, inline-flex
flex
부모요소 자체가 flex속성을 가지면 block처럼 수직으로 레이아웃이 짜여지며
자식요소의 속성은 그대로다.
inline-flex
부모요소에 inline 속성이 들어간 flex 가 부여되어서 수직이 아닌 수평으로 가로로 되어진 형태가 보인다.
자식요소에는 영향이 없다.
flex-flow, flex-direction, flex-wrap
flex-flow 는 flex-direction 과 flex-wrap의 단축 속성이며
예를 들면 background-image, background-repeat가 있다면
background 하나만으로 해결이 가능 할 것이다.
이것과 같이 flex-flow는 단축속성이며 쓰는 방법은 아래와 같다.
flex-flow{ flex-direction속성 flex-wrap속성 }flex-flow{
row-reverse wrap
}구분은 스페이스바로 한칸 띄워주면 된다.
| 속성 | 쓰임새 | 기본값 |
|---|---|---|
| row | 자식요소(item)들이 왼쪽에서 오른쪽으로 배치됩니다. | row |
| row-reverse | 자식요소(item)들이 오른쪽에서 왼쪽으로 배치됩니다.(row에서 반대) | |
| column | 자식요소(item)들이 위에서 아래로 배치됩니다. | |
| column-reverse | 자식요소(item)들이 아래에서 위로 배치됩니다.(column에서 반대) |
| 속성 | 쓰임새 | 기본값 |
|---|---|---|
| nowrap | 자식요소(item)들이 부모영역(container)를 벗어나도 한줄로 배치됩니다. | nowrap |
| wrap | 자식요소(item)들이 부모영역(container)틀안에서 여러행으로 배치됩니다. | |
| wrap-reverse | wrap의 반대로 배치됩니다. |
주축(main-axis)과 교차축(cross-axis), 시작점(main-start)와 끝점(main-end) 개념
위의 이미지를 보면 flex의 주축,교차축, 시작점, 끝점에 대한 개념과 더불어 교차축의 시작점과 끝점에 대해서 이해를 돕기 위해서 준비했다.
기본 뼈대는 주축(main-axis)과 교차축(cross-axis)이며 그 축은 flex-direction 이 row 인지 column 인지의 기준에 다라 바뀐다. row 이면 가로가 주축, column 이면 세로가 주축이 되어진다.
그렇게 주축과 교차축의 뼈대가 잡혔다면 이제 주축의 시작점과 끝점, 교차축의 시작점과 끝점을 알아야한다.
주축의 시작점과 끝점은 reverse 의 유무에 따라 바뀌며
교차축의 시작점과 끝점은 변경이 없다.
justify-content
주축(main-axis)를 기준으로 정렬하는 방법
| 값 | 내용 | 기본값 |
|---|---|---|
| flex-start | 자식요소(item)들이 주축의 시작점(main-start)기준으로 정렬 | flex-start |
| flex-end | 자식요소(item)들이 주축의 끝점(main-end)기준으로 정렬 | |
| center | 자식요소(item)들이 가운데 | |
| space-between | 자식요소(item)들이 양끝점에 붙으며 그 이후 여백을 균등하게 정렬 | |
| space-around | 자식요소(item)들이 균등여백으로 정렬 |
align-content
교차축(cross-aixs)를 중심으로 정렬
주의할 점 : 자식요소(item)들이 두줄이상 배치되어야지 사용 가능
한줄만 배치일경우 align-items를 쓸 것
| 값 | 내용 | 기본값 |
|---|---|---|
| stretch | 자식요소(item)들이 교차축의 빈공간을 채우기 위해 늘림(자식요소의 height가 없을경우) | stretch |
| flex-start | 자식요소(item)들이 교차축의 시작점(cross-start)기준으로 정렬 | |
| flex-end | 자식요소(item)들이 교차축의 끝점(cross-end)기준으로 정렬 | |
| center | 자식요소(item)들이 가운데 | |
| space-between | 자식요소(item)들이 교차축 양끝점에 붙으며 그 이후 여백을 균등하게 정렬 | |
| space-around | 자식요소(item)들이 균등여백으로 정렬 |
align-items
자식요소를 교차축(cross-aixs)를 중심으로 정렬
한줄을 기준으로 정렬된다.
align-content가 더 우선순위이며, 같이 쓰게된다면 align-content:stretch가 아니면 작동하지 않는다.
| 값 | 내용 | 기본값 |
|---|---|---|
| stretch | 자식요소(item)들이 교차축의 빈공간을 채우기 위해 늘림(자식요소의 height가 없을경우) | stretch |
| flex-start | 자식요소(item)들이 교차축의 시작점(cross-start)기준으로 정렬 | |
| flex-end | 자식요소(item)들이 교차축의 끝점(cross-end)기준으로 정렬 | |
| center | 자식요소(item)들이 가운데 | |
| baseline | 자식요소(item)들이 문자선을 기준으로 정렬 |
뒷이야기
아직 우리나라는 IE때문에 쉽사리 flex를 쓰긴 힘들지만 모바일이나 다양한 디바이스에 대응되기 위해서 그리고 텍스트 배열처럼 쉽게 배열을 할 수 있어서 좋은 것 같다. 다음에는 자식요소에 대해서 다뤄볼 예정이다.
