Flexbox

flexbox

레이아웃 배치 시 좀 더 유연하도록 고안된 기능. 기존 inline-block, float으로 레이아웃을 배치하는 것보다 유연하다고 하는데 얼마나 그런지 살펴보자

 

1차 학습 후 정리

메인 축 또는 교차 축 기준으로 어떻게 정렬하는지 등의 설정에 따라 아이템들이 배치가 되어 유연하다고 생각.

 

2차 학습 후 정리

아이템에 적용할 수 있는 속성을 배운 후 왜 유연하단건지 깨달음. 설정한 값에 따라 아이템들이 유연하게 늘었다 줄었다 하기 때문.. 

 

총 정리하자면 메인축 또는 교차축을 기준으로 어떻게 정렬이 되는지 등의 설정에 따라 아이템들이 유연하게 배치되는 기능이다.

 

구조

flex container와 flex item으로 나뉘어져 있음 컨테이너가 아이템을 포함하는 구조. 플렉스 아이템들이 설정된 규칙에 따라 나열됨

 

display: flex일 경우 컨테이너가 block의 성질을 띄지만 inline-flex일 경우 inline-block의 성질을 가진다

 

축

Main axis(메인 축): 해당 플렉스 아이템들이 배치된 방향의 축을 뜻함

Cross axis(교차 축): 플렉스 아이템들이 배치된 방향으로부터 수직인 축을 뜻함

 

초록색은 컨테이너에 지정할 수 있는 속성

노란색은 아이템에 지정할 수 있는 속성

flex-direction 속성

플렉스 아이템들의 배치 방향을 설정하는 값

row(행), column(열)과 그 reverse 값이 존재

여기서 row의 방향은 해당 국가의 언어 설정 값과도 연관이 있음. ex) 아랍은 오른쪽에서 왼쪽으로 읽는게 기본이기에 우리나라와 반대

 

flex-wrap 속성

컨테이너의 크기가 작아져서 플렉스 아이템들의 총 크기 합이 더 커질 경우 아이템 줄바꿈을 어떻게 할 것인지 설정하는 속성

nowrap: 컨테이너 밖으로 삐져나감

wrap: 줄바꿈됨

wrap-reverse: 역방향으로 줄바꿈됨

 

flex-flow 속성

flex-direction과 flex-wrap 속성을 한 번에 설정하기 위한 속성

flex-flow: (flex-direction값) (flex-wrap값);

 

! fire-fox를 이용하면 해당 요소의 플렉스 또는 그리드 영역을 한 눈에 보기 쉽게 해주는 기능을 이용 가능

 

전체 아이템 정렬 속성

justify-content(메인축 방향 정렬) 속성

! space-evenly 값은 IE 계열에서는 작동하지 않음

 

설정할 수 있는 값들

flex-start: 아이템 배치의 시작점으로 정렬한다 (기본 값)

center: 아이템 배치의 중간지점으로 정렬한다

flex-end: 아이템 배치의 끝지점으로 정렬한다

space-between: 아이템 간의 간격에 여백을 균일하게 나누어 정렬한다

space-around: 아이템 주위(둘레)에 여백을 균일하게 나누어 정렬한다

space-evenly: 모든 여백을 균일하게 나누어 정렬한다

 

align-items(교차축 방향 정렬) 속성

설정할 수 있는 값들

stretch: 교차축 방향으로 늘어나도록 정렬한다. (기본 값)

flex-start: 교차축 방향 시작점으로 정렬

flex-end: 교차축 방향 끝지점으로 정렬

center: 교차축 방향 중앙지점으로 정렬

baseline: 텍스트 베이스라인 기준으로 정렬

 

align-content 속성

flex-wrap: wrap; 설정이 있을 경우 행이 2줄 이상이 되었을 때의 교차축 방향의 정렬 기준 설정

stretch: 교차축 방향으로 늘어나도록 정렬

flex-start: 교차축 방향 시작점으로 정렬

flex-end: 교차축 방향 끝지점으로 정렬

center: 교차축 방향 중앙지점으로 정렬

space-between: 교차축 방향으로 아이템 간의 간격여백을 균일하게 나누어 정렬

space-around: 교차축 방향으로 아이템 주위(둘레)에 여백을 균일하게 나누어 정렬

space-evenly: 교차축 방향으로 모든 여백을 균일하게 나누어 정렬한다

==================================================

 

flex-basis 속성

메인축에 따라 아이템의 크기를 설정할 수 있는 속성

row일 경우 너비, column일 경우 높이임

width와의 중요한 차이점은 width는 content의 크기를 무시하고 정해진 픽셀로 크기를 설정하는 반면,

flex-basis의 경우 최소 크기는 해당 컨텐츠의 크기로 설정된다. 따라서 컨텐츠의 길이에 따라 폭이 늘어나는 것을 원치 않을 경우 width가 더 좋을 수 있다.

auto가 기본 값이다.

 

flex-grow 속성

아이템이 flex-basis 속성에서 설정한 값보다 얼마의 비율로 커질 수 있는지 설정하는 속성. 기본 값은 0 (안 커짐)

숫자 값이 들어가며 해당 값은 늘어나야 하는 크기의 여백을 얼마의 비율로 커질지 정하는 값이다. 소수도 가능

 

flex-shrink 속성

아이템들의 크기 합이 container보다 클 때 flex-basis 속성에서 설정한 값까지 얼마의 비율로 작아질 수 있는지(basis 보다 작아질 순 없으니까) 설정하는 속성. 기본 값은 1

 

flex 속성

flex-grow flex-shrink flex-basis를 순서대로 한 번에 설정할 수 있는 속성

 

flex-self (개별 아이템 교차축 정렬 속성)

설정할 수 있는 값은 align-items와 내용이 같다. 아이템에 설정하는 속성이기 때문에 개별정렬이 가능하다.

align-items보다 우선권이 있다.

 

order 속성

각 아이템들의 시각적 나열 순서를 설정한다. 다만 시각적 속성이기에 스크린 리더 같은 방식으로 접근할 경우 무시된다.

 

z-index

z-index로 z축 정렬이 가능함