display flex

flex의 기본 구조

 

flex container : 부모 요소로 flex의 영향을 받는 전체 영역

flex item : 자식 요소로 flex의 속성에 따라 각각의 아이템들이 배치되는 것

---

container에 적용하는 속성

 

• display

display: flex;

: flex 아이템들이 가로로 배치되고 자신이 가진 내용물의 width 만큼 공간을 차지함

: height는 컨테이너의 높이만큼 알아서 늘어남

display: flex;

display: flex; / container의 높이만큼 item의 높이도 같이 늘어남

 

display: inline-flex;

: inline-block처럼 동작함

: 아이템 배치와 관련있다기 보다 컨테이너와 관련 있으며 컨테이너가 주변 요소들과 어떻게 어우러질지 결정함

display: inline-flex; / item이 차지하는 공간만큼만 container의 크기가 차지함

display: inline-flex;

 

• flex-direction 배치 방향 설정

flex-direction: row;

: 아이템들이 가로 방향으로 배치

 

flex-direction: column;

: 아이템들이 세로 방향으로 배치

 

flex-direction: row-reverse;

: 아이템들이 가로 방향 역순으로 배치

 

flex-direction: column-reverse;

: 아이템들이 세로 방향 역순으로 배치

 

• flex-wrap 줄넘김 처리 설정

flex-wrap: nowrap;

: 줄바꿈을 하지 않고 넘치면 밖으로 삐져 나감

 

flex-wrap: wrap;

: 줄바꿈을 하고 float이나 inline-block으로 배치한 요소들과 비슷하게 동작함

 

flex-wrap: wrap-reverse;

: 줄바꿈을 하고 아이템을 역순으로 배치함

 

• flex-flow : flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

flex-flow: flex-direction flex-wrap;

 

• justify-content 메인축 방향 정렬

justify-content: flex-start;

: 기본값, 아이템들을 시작점으로 정렬

: flex-direction이 row(가로)일 떄 왼쪽, flex-direction이 column(세로)일 때 위

 

justify-content: flex-end;

: 아이템들을 끝점으로 정렬

: flex-direction이 row(가로)일 떄 오른쪽, flex-direction이 column(세로)일 때 아래

 

justify-content: center;

: 아이템들을 가운데로 정렬

 

justify-content: space-between;

: 아이템들의 사이에 균일한 간격을 만들어줌

 

justify-content: space-around;

: 아이템들의 둘레에 균일한 간격을 만들어줌

 

justify-content: space-evenly;

: 아이템들의 사이와 양끝에 균일한 간격을 만들어줌

: IE와 엣지에서 지원되지 않음 

 

• align-items 수직축 방향 정렬

align-items: stretch;

: 아이템들을 수직축 방향으로 끝까지 늘려줌

 

align-items: flex-start;

: 아이템들을 시작점으로 정렬

: flex-direction이 row(가로)일 떄 왼쪽, flex-direction이 column(세로)일 때 위

 

align-items: flex-end;

: 아이템들을 끝점으로 정렬

: flex-direction이 row(가로)일 떄 오른쪽, flex-direction이 column(세로)일 때 아래

 

align-items: center;

: 아이템들을 가운데로 정렬

 

align-items: baseline;

: 아이템들을 텍스트 베이스라인 기준으로 정렬

 

• align-content  여러 행 정렬

조건

1. flex-wrap: wrap;이 설정된 상태
2. 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

 

align-content: flex-start;

 

align-content: flex-end;

 

align-content: center;

 

align-content: space-between;

 

align-content:: space-around;

 

align-content: space-evenly;

---

item에 적용하는 속성

 

• flex-basis 유연한 박스의 기본 영역

: flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이)

: 값으로 width height 등에 사용하는 각종 단위의 수가 들어감

: width를 따로 설정하지 않으면 컨텐츠의 크기가 됨

 

flex-basis: auto;

: 기본값, 해당 아이템의 width값을 사용

 

flex-basis: 0;

: 기본 크기를 0으로 만들어버림

: 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하려면 flex-basis를 0으로 하면 됨

 

flex-basis: 50%;

flex-basis: 300px;

flex-basis: 10rem;

: width height에 사용하는 각종 단위를 사용함

 

flex-basis: content;

: content의 크기로 width를 따로 설정하지 않은 경우와 같음

 

• flex-grow 유연하게 늘리기

: 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성

: 값으로 숫자가 들어가고 0보다 큰 값이 들어가면 해당 아이템이 flexible 박스로 변하고 flex-basis보다 커지며 빈 공간을 채우게 됨

: 값으로 들어가는 숫자의 의미는 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자 비율로 나누어 가짐

: 기본값이 0이기 때문에 따로 적용하기 전까지 아이템이 늘어나지 않았던 것!

 

flex-grow: 0;

: 기본값

 

flex-grow: 1;

 

• flex-shrink 유연하게 줄이기

: 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성

: 값으로 숫자가 들어가고 0보다 큰 값이 들어가면 해당 아이템이 flexible 박스로 변하고 flex-basis보다 작아짐

: 기본값이 1이기 때문에 따로 적용하기 않았어도 아이템이 flex-basis보다 작아질 수 있었던 것!

 

flex-shrink: 1;

: 기본값

 

flex-shrink: 0;

: 0으로 적용하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정된 폭의 컬럼을 쉽게 만들 수 있음

: 고정 크기는 width로 결정함

 

• flex : flex-grow flex-shrink flex-basis를 한번에 축약하는 속성

flex: 1;

/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */

: flex-basis를 생략해서 쓴것이기 때문에 flex-basis의 값은 0이 됨

 

flex: 1 1 auto;

/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */

 

flex: 1 500px;

/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */

 

align-self 수직축으로 아이템 정렬

align-self: auto;

: 기본값, 기본적으로 align-items 설정을 상속 받음

 

align-self: stretch;

 

align-self: flex-start;

 

align-self: flex-end;

 

align-self: center;

 

align-self: baseline;

 

• order 배치 순서

: 각 아이템들의 시각적 나열 순서를 결정하는 속성

: 값으로는 숫자가 들어가면 작은 숫자일 수록 먼저 배치

: 시각적인 순서를 바꿀 뿐 html 자체의 순서를 바꾸는 것은 아니므로 웹접근성 측면에서 사용을 주의해야함

---

참고

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)