[ HTML & CSS ] 레이아웃의 핵심, flexbox

 

⚾️ flex 란?

flex는 유연한 레이아웃을 잡기 위해 사용하는 속성이다.

1차원적 레이아웃을 위해 주로 사용한다.

 

---

 

📍 flex의 특징

flex는 부모와 자식 태그가 필요하고, 부모 요소(flex-container)와 자식 요소(flex-item)에 적용하는 속성이 구분되어 있다.

flex는 각각의 item에 부여하는 게 아닌 부모 container에 속성을 부여한다.

 

flex-container의 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content 등

flex-item의 속성 : flex, flex-grow, flex-shrink, flex-basis, align-self, order, z-index 등

 

---

 

📍 flex-container의 속성

1️⃣ flex-direction

container 내 item을 배치할 때 주축 및 방향을 지정한다.

row : 기본값으로, 주축이 행 방향으로 왼쪽에서 오른쪽으로 가로 배치

row-revers : 주축이 행 방향으로 오른쪽에서 왼쪽으로 가로 배치

column : 주축이 열 방향으로 위에서 아래로 세로 배치

column-reverse : 주축이 열 방향으로 아래에서 위로 세로 배치

 

 

2️⃣ justify-content

주축을 기준으로 어떻게 정렬할지 지정한다.

flex-start : 시작점에,  center : 가운데,  flex-end : 끝점에,

space-between : 사이에, space-around : 둘레에, space-evenly : 균등하게

 

 

3️⃣ align-items, align-content

수직 방향(교차축)을 기준으로 어떻게 정렬할지 지정한다.

align-items : 한 줄을 기준으로 정렬

stretch : 기본값-늘어난, baseline : 컨텐츠를 기준으로,

flex-start : 시작점에,  center : 가운데,  flex-end : 끝점에

 

align-content : 교차 축의 아이템들이 여러 줄일 때 정렬

· justify-content 속성들과 동일

· flex-wrap:wrap; 인 상태에서 사용

 

---

 

📍 flex-item에 사용하는 속성

1️⃣ flex-basis

기본값은 auto로, flex-item의 초기 크기를 설정한다.

· 축의 방향에 따라 달라진다는 점과 내부 콘텐츠에 따라 유연한 크기를 가진다는 점이 width, height와 다르다.

· flex-basis 값 적용 시 row일 경우 width 값이 무시되며, column일 경우 height 값이 무시된다.

· 기본적으로 px이나 em 등의 단위값을 사용한다.

 

 

2️⃣ flex-grow

item이 container 내부에서 할당받는 공간의 정도를 지정한다.

· item들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받는다.

· 중요한 것은 여백의 공간을 할당받는 것인데 하나의 자식요소에 flex-grow값을 2를 줬다고 2배의 크기가 되는 것이 아닌

다른 자식요소보다 두 배의 여백공간을 할당받는 것이다.

· 값을 0을 주면 늘어나지 않는다.

 

3️⃣ flex-shrink

item의 크기를 고정하거나 축소할 때 사용한다.

· 값을 0을 줄 경우 줄어들지 않는다.

 

 

4️⃣ align-self

부모의 align-items 속성을 덮고 flex-item에게 개별적인 align-items 속성을 부여한다.

· 기본값은 stretch이다.

 

 

5️⃣ order

flex-item들의 순서를 수의 크기로 결정한다.

· 수가 적을수록 우선순위가 높다. (음수도 사용가능)

 

 

6️⃣ flex (단축속성)

flex: flex-grow flex-shrink flex-basis

/* 늘어나고, 줄어들고, 기본값 */
flex: 1 1 100px;
/* 늘어나지도 않고, 줄어들지도 않고, 기본값 */
flex: 0 0 100px;

 

---

 

실습으로 좀 더 직관적으로 이해해 보자..!

 

📍 flex-item 속성 실습 ( flex-grow, flex-shrink, flex-basis )

 

flex-basis: auto;  item들의 크기(콘텐츠 크기)만큼 자동으로 크기가 잡힌다.

flex-grow: 1; 여백 공간의 크기가 더해진다. (기본값은 0)

세 번째 박스에 grow 값 1을 주면 basis 값에 여백공간의 크기가 더해져 남은 공간을 혼자서 차지한다.

모든 박스에 grow 값 1을 주면 남은 공간을 똑같이 나눠서 차지한다.

각각의 박스 내부의 크기(컨텐츠 크기)만큼 자동으로 크기가 잡히기 때문에,

같은 grow 값을 줬어도 컨텐츠 크기에 따라 값이 달라질 수 있다.

flex-basis: 100px; 아래와 같이 basis 값을 특정 단위로 지정할 수 있다.

flex-basis: auto; 다시 basis 값을 컨텐츠 크기에 따라 자동으로 크기가 잡히도록

auto로 설정해 container에 꽉 차도록 만들어 준다.

이 상태에서 미니언 한 명이 더 추가된다면??

 

박스들의 크기가 줄어들게 되는데, 그 이유는 flex-shrink가 숨어있기 때문에!

 기본값이 1이기 때문에 모든 박스들이 같은 비율로 줄어든다.

그리고 아래와 같이 컨테이너를 삐져 나가게 되는데 왜일까??

각각의 박스에 min-width값이 auto로 설정되어 있는 게 숨겨져 있기 때문이다.

자식 컨텐츠(미니언)보다 자신(각각의 미니언 박스)을 더 작게 만들어질 수 없게 min-width 값이 막고 있는 것이다.

아래와 같이 min-width값에 0을 주면 삐져 나가지 않는다.

처음에 flex-basis를 0을 줘도 변함이 없는데 그 이유는 min-width 값이 이미 auto로 숨겨져 있기 때문이다.

아래와 같이 min-width에 0을 주게 되면 basis 0이 먹는다.

이렇게 되면 컨텐츠 크기와 상관없이 균등하게 삼등분할 수 있다! (모두 grow값 1을 주면 된다.)

자식하나가 커지면 부모가 커지고 부모가 커지면 나머지 자식들이 같이 커진다. (부모의 크기가 커지면 무조건 커진다)

align-items: stretch 가 기본값이어서 안에 있는 모든 자식들이 부모 기준으로 늘어난다.

세 번째 박스에 margin-top과 bottom에 모두 auto를 주면 아래와 같이 만들 수 있다.

다른 박스들에도 margin-top과 bottom에 auto를 사용해서 이런 정렬을 만들 수 있다.

세 번째 박스에는 margin-bottom에 auto를  margin-top에 0을 줬다.

flex를 사용하면 더 다양한 정렬들을 만들 수 있다!

 

 

---

 

 

모든 정렬은 마진이 기본이 된다는 것을 알 수 있었고,

flex를 통해 보다 편리하고 다양하게 정렬할 수 있다는 점을 배울 수 있었다.