1) flex 란
css로 레이아웃을 잡기 위하여 사용하는 방식이다. 요소의 사이즈가 명확하지 않거나 동적으로 변화 할 때도 문제 없이 레이아웃을 적용 할 수 있으며 기존에 사용하던 float:left 방식보다 더 적은 코드로 간단하게 표현 할 수 있다. 또한 화면의 사이즈가 달라져도 요소들이 자동으로 재정렬되는 등 유연한 대응이 가능하여 반응형 웹 사이트를 제작할 때 사용하기 편리하다. 다만 아직까지 익스플로어 10, 11에서의 지원이 완벽하지 않아 익스플로어에서의 버그가 발생 할 수 있으며 ( flexibility.js를 사용하여 어느정도 보완이 가능하다. ), 복잡한 레이아웃을 구성할 때는 적합하지 않다.
2) flex 사용 예시
구구 절절 설명보다 좋은 예시. 사용법이 정말 간단하다.
<div id="test">
<div class="wrap">
<h1>h1</h1>
<p>p</p>
<div>div</div>
<ul>ul</ul>
</div>
</div>
우선 첫번째로 html을 위처럼 만들어줬다. 나는 wrap에 width값을 지정해서 부모요소에 맞춰 요소들이 생성 된걸 확인 가능하다.
#test .wrap{
display: flex;
}
그 다음으로 각 요소들의 부모요소에 display:flex를 지정해주면 사진처럼 자동으로 정렬이 된다.
조금더 보기 좋게 width값을 일정하게 지정해줬다. float : left와 차이점으로는 모든 요소들의 높이값이 자동으로 맞춰진 걸 볼 수 있다. 물론 각 요소에 높이값을 별도로 줘서 원하는 대로 만들 수도 있다. 이렇게만 쓸 수 있어도 훨씬 편리하지만 좀 더 디테일하게 변경을 원한다면 아래 속성들을 확인해서 필요한걸 적용 하면 된다.
3) flexbox 구성요소
플렉스 박스는 컨테이너(flex container)와 요소(flex item)으로 구성되어 있다.
<div id="test">
<h1>h1</h1>
<p>p</p>
<div>div</div>
<ul>ul</ul>
</div>
위 HTML에서 각 요소들의 부모인 <div id="test"></div>는 컨테이너 역할을 그 안에 들어있는 요소들은 아이템 역할을 한다. 이 때 컨테이너만 존재 할 수는 없으며 컨테이너 안에는 항상 한가지 이상의 아이템이 포함되어 있어야 한다.
또 실제 HTML태그들이 컨테이너와 아이템으로써의 역할을 수행하기 위해서는 컴퓨터가 이 HTML 엘리먼트는 컨테이너고~ 이건 요소에요~" 라는걸 인식해야 하는데 그러기 위해 각각 태그들에 적용 해야하는 속성들이 따로 있다.
4) 컨테이너 속성 살펴보기
4-1) display
display 속성을 적용함으로써 flexbox의 컨테이너라고 정의를 내릴 수 있다. 속성 값으로는 인라인이냐 블록이냐에 따라 아래와 같이 2개로 나눠 사용 할 수 있다.
| flex : 블록 속성으로 정의 |
| inline-flex : 인라인 속성으로 정의 |
4-2) flex-direction
축의 방향을 설정 할 수 있다.
| row : 왼쪽에서부터 정렬 (가로/ 기본 값) |
| row-reverse : 오른쪽에서부터 정렬 |
| column : 위에서부터 세로로 정렬 |
| column-reverse : 아래에서부터 세로로 정렬 |
4-3) flex-wrap
컨테이너 값보다 요소들의 합산 값이 더 큰 경우에 줄바꿈을 어떻게 할지 지정하는 속성이다.
| nowrap : 부모(컨테이너)의 값에 맞춰 요소들을 축소 (기본값) |
| wrap : 줄바꿈을 하여 빠져나가는 요소는 다음줄로 이동 |
4-4) justify-content
축을 기준으로 아이템들 사이의 간격을 조절 하는 속성이다. between과 around는 예시를 보면 더 이해가 쉽게 된다.
row를 기준으로 하면 x축 사이 간격을 조절하고 column을 기준으로 하면 y 축 사이의 간격을 조절하는 속성이다. (예시는 row를 기준으로 만들었다.)
| flex-start : 시작점을 기준으로 차례대로 정렬 |
| flex-end : 끝점을 기준으로 차례대로 정렬 |
| center : 아이템을 가운데로 정렬 |
| space-between : 첫 아이템과 마지막 아이템을 양 끝에 두고 사이 간격을 동일하게 정렬 |
| space-around : 모든 아이템의 좌우 사이를 동일하게 정렬 |
4-5) align-items
justify랑 반대로 축과 교차하는 사이의 간격을 조절하는 속성이다. row를 기준으로 y축 정렬 column을 기준으로 하면 x축을 정렬한다.
| stretch : 시작점을 기준으로 정렬 (기본값) |
| flex-start : 시작점을 기준으로 정렬 |
| flex-end : 끝점을 기준으로 정렬 |
| center : 가운데 정렬 |
| baseline : 문자열을 기준으로 정렬 |
이 두개는 예시만 본다면 차이 점을 알 수 없는데, 사실 정렬에서는 차이가 없는게 맞다 둘 다 row 기준 y축 시작점으로부터 정렬이 된다. 하지만 높이 값이 지정이 안되어 있는 경우를 생각한다면 아래와 같은 차이가 발생한다.
stretch는 높이 값 까지 자동으로 맞춰주며 flex-start는 높이값과 상관없이 정렬만 해주는걸 확인 할 수 있다.
문자열 기준으로 정렬한다는건 무슨 소리인가 했는데, 들쭉날쭉한 다른 예시와는 달리 문자열이 깔끔하게 정렬된걸 볼 수 있다. 나중에 리스트 정렬할 때 종종 쓸 것 같기도...
