CSS Flex 기본 개념

FlexBox 란?

📌 Flex 는?

Flexible Box, Flexbox 라고 부르며 기존보다 세련된 레이아웃 배치 기능이다. 유연하게 속성들을 배치하여 레이아웃을 잡는 아주 유용한 기능이다.

📌 Flex 를 쓰기 전?

Flex가 나오기 전에는 float: left, float: right 등으로 다소 까다롭게 레이아웃을 배치해야했다. float는 원래 이미지와 텍스트를 배치하기 위해 만들어진 css인데 그걸 레이아웃을 제어하는 용도로 쓰이다보니 유연하게 수정하기 힘들 수 밖에 없던 것이다. 그러나 flex를 이용하면 이를 간편하게 해결할 수 있다.

👉 Flex, 그럼 인터넷 익스플로어(IE) 에서도 지원이 될까?

https://caniuse.com/?search=CSS%20Flexible%20Box

자세한 건 위 링크에서 확인할 수 있다. 확인해보면 IE11에서는 대부분 Flex를 지원하는 것을 확인할 수 있다.

---

FlexBox 기본 개념

📌 예제 바로보기

📝 html

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

📝 css

/* 부모요소 */
.container{
    background: rgb(239, 223, 245);
    height: 100vh;
    display: flex;
    flex-direction: row; /* 방향(기본값) */
    flex-wrap: nowwrap; /* 줄바꿈 여부(기본값) */
    justify-content: space-between; /* 어떻게 배치할건지(중심축에서) */
    align-items: center; /* 어떻게 배치할건지 위치(반대축에서) */
    align-content: space-between;/* 어떻게 배치할건지(반대축) */  
}

1) flex-direction

여기서 flex-direction 은 아이템들이 배치되는 축의 방향을 나타내주는데 기본값은 row로 왼쪽에서 오른쪽을 향하게 된다.

🔷 flex-direction: row;

🔷 flex-direction: column;

2) flex-wrap

그리고 flex-wrap 은 줄넘김 처리 설정을 바꿔줄 수 있는데, 기본값은 nowrap으로 줄바꿈 되지 않도록 설정되어있다. wrap으로 설정하게 되면 아이템들이 여유 공간이 없어질 때 줄바꿈이 된다.

🔷 flex-wrap: nowrap;

🔷 flex-wrap: wrap;

🔷 flex-wrap: wrap-reverse;

3) justify-content

이는 메인축 방향 정렬을 설정한다.

🔷 justify-content: space-between; (화면과 딱 맞도록)

🔷 justify-content: space-around; (각각 박스 영역이 존재함)

🔷 justify-content: space-evenly; (똑같은 간격을 가짐)

🔷 justify-content: center;

🔷 justify-content: flex-end;

🔶 쉽게 이해하기

(출처: https://studiomeal.com/archives/197 )

4) align-items

이번엔 반대축에서 어떻게 정렬할 것인지 정렬해주는 속성이다. justify-content 와 수직방향의 정렬인 것이다. 쉽게 보여주기 위해서 밑에 예제는 1번에 패딩 넓게 들어간 경우를 보여준다.

🔷 기본

🔷 align-items: baseline;

📌 자식요소

📝 css - 자식 요소 추가

/* 자식요소 */
.item01{
    flex-grow: 2; /* 배치 크기 (다른 애들에 비해 2배만큼 커짐) */
    flex-shrink: 2 /* 컨테이너 줄어들때 속도 (다른 애들에 비해 2배로 빨리 줄어들음) */
    flex-basis: 60%; /* 차지하는 정도 (커질때나 작아질때나 얘에 의해 움직이게됨) */
    align-self: center; /* 아이템별로 아이템 정렬 (얘 하나만 가운데로 가게됨) */
}
.item02{
    flex-grow: 1;
    flex-shrink: 1
    flex-basis: 30%;
}
.item03{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10%;
}

1) flex-grow

유연하게 값을 늘리는 방법이다. 여기에는 숫자가 들어가는데(기본값: 0), 1번에다가 2를 주고 나머지에 1을 주어 1번이 나머지 애들보다 두배 커진다.

2) flex-shrink

flex-grow 와 상응하는 속성으로, 줄어들때의 값을 결정한다. 0으로 설정하면 아이템의 크기가 줄어들지 않는다.

3) align-self

align-items 의 아이템 버전으로 해당 아이템의 수직축 방향 정렬이다. 밑에서 1번에만 center을 주어 독단적으로 위치가 설정되었음을 확인할 수 있다.

📌 유용한 사이트

flex를 이해하는데 큰 도움이 되는 개구리 게임이다. 24레벨까지 있으며 기본적인 flex 속성을 모두 이해할 수 있다!
https://flexboxfroggy.com/