CSS display : flex; 단번에 익히기!

일을 하면서 종종 느끼는 것은

display : flex; 를 알기 전과 후로 업무의 질이 달라졌다는 것이다.

 

float를 이용한 방식과 inline-block, block을 이용한 정렬방식도 있지만

display : flex; 를 이용하면 정말 쉽게 레이아웃을 구현할 수 있다.

 

---

Flex(플렉스)

 

Flex(플렉스)는 Flexible Box , Flexbox라고 부르기도 한다.

Flex는 레이아웃 배치 전용으로 고안된 기능이다.

레이아웃을 만들때 사용하던 Float, inline-block등을 이용한 기존의 방식보다 훨씬 편리하고 간편하다.

 

예시를 들기위한 HTML코드는 다음과 같다!

<div class="container">
	<div class="item">box1</div>
	<div class="item">box2</div>
	<div class="item">box3</div>
</div>

 

부모 요소인 div.container 를 Flex container(플렉스 컨테이너)라고 부르고

자식 요소인 div.item들을 Flex item(플렉스 아이템)이라고 부른다.

 

---

Flex 속성은

- 컨테이너에 적용하는 속성

- 아이템에 적용하는 속성

두가지로 나뉜다.

---

 

부모(컨테이너)에 적용하는 속성

 

1. display: flex;

Flex Container에 display : flex; 를 적용하는게 시작이다.

이 한줄의 css만으로 아이템들을 가로로 배치할 수 있다.

.container {
	display: flex;
}

 

2. flex- direction

아이템들이 배치되는 축의 방향을 결정하는 속성이다.

즉 방향을 가로로 할지 새로로 할지 정해주는 속성.

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

 

flex-direction: row ;

flex-direction: column;

flex-direction: row-reverse;

 flex-direction: column-reverse;

 

3. 줄넘김 처리 설정

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유공간이 없을 때

아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

 

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

 

flex-wrap: nowrap; (기본값)

- 줄바꿈을 하지 않고 넘치면 그냥 넘치는대로 부모영역을 벗어나게끔 하는 속성

 

flex-wrap: wrap;

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

 

 flex-wrap: wrap-reverse;

- 줄바꿈을 하는데, 아이템을 역순으로 배치한다.

 

4. flex- flow

 flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.

 

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

 

 flex-direction과 flex-wrap 순서대로 한 칸 띄우고 작성하면 됨

 

5. 메인축 방향 정렬

justify 라는 키워드는 무조건 메인축 방향으로 방향을 정렬,

align 이라는 키워드는 수직축 방향으로 정렬한다고 생각하면 쉽다.

 

justify content

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

- flex- start (기본값) :  아이템을 시작점으로 정렬한다. flex-direction이 row(가로)일때는 왼쪽, column(세로)일때는 맨 위쪽

- flex-end : 아이템을 끝점으로 정렬한다.  flex-direction이 row(가로)일때는 오른쪽, column(세로)일때는 맨 아래쪽

- center :  아이템들을 가운데로 정렬한다.

- space-between : 아이템들의 사이에 균일한 간격을 만들어준다.

- space-around: 아이템들의 둘레에 균일한 간격을 만들어준다.

- space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다. (IE 와 Edge에서 지원 되지 않으므로 주의)

 

6. 수직축 방향 정렬

align 키워드는 수직으로 아이템을 정렬하는 속성이다.

 

align-items

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

 

- stretch (기본값) :  아이템을 수직축 방향으로 끝까지 쭉 늘어남

- flex-start: 아이템들을 시작점으로 정렬한다. flex-direction이 row(가로)일때는 위, column(세로)일때는 왼쪽

- flex-end : 아이템을 끝점으로 정렬한다.  flex-direction이 row(가로)일때는 아래, column(세로)일때는 오른쪽

- center :  아이템들을 가운데로 정렬한다.

- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

 

align-content

여러 행을 정렬할 때 사용 !

flex-wrap:wrap; 이 설정된 상태에서 아이템의 행이 2줄 이상 됐을 때 수직축 방향 정렬을 결정하는 속성

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

 

 

---

flex 아이템에 적용하는 속성

1. flex- basis

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

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

 

아이템의 기본 점유 크기를 설정한다고 생각하면 쉽다.

 

2. flex- grow

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

 

flex-grow에 들어가는 숫자의 의미는 

아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나눠가진다라고 생각하면 쉽다.

 

예시

.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

 

이런식으로 적용할 수 있다.

 

3. flex-shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.

flex-shrink에는 숫자값이 들어가는데 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한 박스로 변하고

flex-basis보다 작아진다.

 

기본값이 1이기 떄문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

 

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기때문에 고정폭의 컬럼을 쉽게 만들수 있다.

고정 크기는 width로 설정한다.

.item:nth-child(1) {
	flex-shrink: 0;
	width: 100px;
}
.item:nth-child(2) {
	flex-grow: 1
}
.item:nth-child(3){
	flex-grow: 1
}

 

 

4.flex

flex-grow, flex-shrink, flex-basis 를 한번에 쓸 수 있는 축약형 속성이다.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; 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; */
}

 

주의할 점은 

flex:1; 이런식으로 flex-basis를 생략해서 사용하면 flex-basis의 값은 0이 된다.

 

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

 

flex-basis:0;으로 기본 점유 크기를 0으로 만들어버려 결국 전체 크기를 1:2:1로 나누어 가져서 영역 자체의 크기가 정확히 1:2:1의 비율로 설정되었다.

 

여백의 비가 아닌 영역자체를 원하는 비율로 분할하고싶다면

flex-basis를 0으로 하면 손쉽게 처리 가능하다.

 

.container {
	display: flex;
	flex-wrap: wrap;
}
.item {
	flex: 1 1 40%;
}