[CSS] Flexbox

🙏 참고

• https://www.youtube.com/watch?v=7neASrWEFEM

💻 Flexbox

Flexbox는 Box와 Item을 행, 열로 배치하는 유용한 기능이다. Flexbox만 잘 이해해도, 웹사이트의 레이아웃을 아주 쉽게 구성할 수 있다.

⛵ float

float는 이미지와 텍스트를 어떻게 배치할 것인지에 정의하기위해서 나타난 property. 예전에는 CSS에 레이아웃을 하는 기능이 없어서, 많은 사람들이 float을 사용해서, 박스들을 왼쪽, 오른쪽 나눠서 배치를 했는데, 이는 float 사용의 원래 목적에 어긋나는 행위였다. Flexbox의 등장으로 float은 원래 목적에 맞게 사용되게 되었다.

float: left;
float: none;
float: right;

✌ Flexbox 기억할 점 2가지

1. Flexbox는 container, Box에 적용되는 속성 값이 존재하고, 각각의 item에 적용되는 속성 값이 존재한다.

   container, box에 꾸며줄 수 있는 속성 값 예시

   • display
   • flex-direction
   • flex-wrap
   • justify-content
   • align-items
   • flex-flow
   • align-content

   item에 꾸며줄 수 있는 속성 값 예시

   • order
   • flex-grow
   • flex-shrink
   • flex
   • align-self

2. Flexbox에는 중심축과 반대축이 있다.(main axis, cross axis) 개발자가 중심축을 수평이냐, 수직이냐에 두는 것에 따라서 반대축이 바뀐다.

height: 100%; %는 selector의 부모 높이의 100%를 채운다.
height: 100vh; vh는 부모에 상관 없이 item을 보이는 화면에 height의 100%를 다 쓰겠다.
* vh: Viewport Height | vw: Viewport width

🙏 참고

CSS 이쁜 색을 사용하고 싶다면 Color tools방문해보자.

🧧 Container 속성값들

• display: flex, item이 왼쪽에서 오른쪽으로 정렬된다.

.container {
  background: beige;
  display: flex;
}

• flex-direction: row-reverse, item이 오른쪽에서 왼쪽으로 가는 방향
• flex-direction: column, item이 위에서 아래로
• flex-direction: column-revers, item이 아래에서 위로

.container {
  background: beige;
  display: flex;
  flex-direction: row;
}

• flex-wrap: nowrap, item이 한 줄에 빼곡하게 정렬되게 한다.
• flex-wrap: wrap, 화면에 item이 차면 다음 줄로 넘어가게 한다.
• flex-wrap: wrap-reverse, 화면에 item이 밑에서부터 위로 정렬한다.

.container {
  background: beige;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap
}

• border: 1px solid red, border 속성들을 한 줄에 적는 것처럼 flex-flow: column nowrap, 이라고 작성할 수 있다.

.container {
  background: beige;
  display: flex;
  // flex-direction: column;
  // flex-wrap: nowrap
  flex-flow: column nowrap;

🔺 위에서는 flexbox로 보여주고(flex), 수평을 중심축으로 할 지, 수직을 중심축으로 할 지(flex-direction)결정하고, 한 줄에 가득차면, 다음 줄로 넘어가게 할건지, 안할 건지(flex-wrap)를 알아보았다.

---

🙄 justify-content, 중심축(main axis)에서 item을 어떻게 배치할건지 결정한다.

• justify-content: flex-start, 기본값, item들을 중심축에 따라서 왼쪽에서 오른쪽으로 또는 위에서 아래로 배치한다.
• justify-content: flex-end, 오른쪽 축으로 아이템을 배치(아이템 순서는 유지, item의 중심축을 이동시킬 뿐)
• justify-content: center, item을 center에 맞춘다.
• justify-content: space-around, item 사이에 space를 넣어준다. 양쪽 끝 item의 공간은 작음
• justify-content: space-evenly, item 사이에 공평하게 space를 넣어준다.
• justify-content: space-between, item 양쪽 끝 공간은 은 변화가 없고, 중간 item에만 공간을 넣어 줌

---

🏢 align-items, 수직축(cross axis)에서 item을 어떻게 배치할건지 결정한다.

• align-items: center, item을 수직적으로 중심에 넣는다. navbar에서 logo, menu, icon 등을 중심을 넣을 때 사용하면 좋다.
• align-items: baseline, items에서 여러 다른 크기의 box가 있을 때, 텍스트에 맞춰서 균등하게 배치해준다.

🏦 align-content, justify-content(중심축에서 아이템 배치)와 비슷하지만 반대축의 아이템을 배치한다.

• alint-content: space-between, item의 최상위, 최하위에 위치한 item은 붙어있으면서 중간에만(align-items: center; 일 때) space가 들어간다.
• align-content: center, 중간으로 items이 배치된다.

❓ Flexbox를 더 자세히 알아보려면 Flexbox

---

➕ item 속성값들

.container {  
  padding-top: 100px;
  background: beige;
  height: 100vh; 
  display: flex;
}
.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

• order, item들의 순서를 바꾼다.

.container {
	display: flex;
}

.item1 {
  background: #ef9a9a;
  order: 2; // 순서가 2번 째로 바뀐다. 자주 쓰이지는 않음.
}

• flex-grow, item을 지정해서, 페이지 공간을 메운다.

.item2 {
  background: #f48fb1;
  flex-grow: 1; 
  // item 크기보다 커지고, 
  // 페이지 공간을 메운다. 
  // flex-grow 기본값은 0
}

• flex-shrink, 컨텐츠가 작아졌을 때 item이 어떻게 행동하는 지 지정한다.

.item3 {
  background: #ce93d8;
  flex-grow: 2; //item3이 item1과 .item2보다 
  // 2배로 커지게 된다. 
  // 페이지 창을 줄이다보면 모든 item들이 본래 크기로 돌아왔다가 계속 작아진다.
}

• flex-basis, item이 공간을 얼마나 차지해야하는지 조금 더 세부적으로 명시한다. 기본값은 auto. items들의 공간을 원하는 비율만큼 나누고 싶을 때 사용한다. ex) 6:3:1, 3:4:3

.item1 {
  background: #ef9a9a;
  flex-basis: 60%; // .item1은 60% 공간을 차지한다.
}
.item2 {
  background: #f48fb1;
  flex-basis: 30%; // .item2은 30% 공간을 차지한다.
}
.item3 {
  background: #ce93d8;
  flex-basis: 10%; // .item3은 10% 공간을 차지한다.
}

---

• align-self, item 별로 item을 정렬할 수 있다.

.item1 {
  background: #ef9a9a;
  flex: 2 2 auto; // grow, shrink, basis를 한 줄에 작성 가능하다.
  align-self: center; // .item1만 중심에 배치하고 싶다.
}
.item2 {
  background: #f48fb1;
}
.item3 {
  background: #ce93d8;
}

💣 정리

1. flexbox에는 container에 꾸며주는 속성값들이 있고, item 각각에 꾸며줄 수 있는 속성값들이 있다.
2. flexbox에는 2가지의 축이 있는데, 중심축(main axis), 반대축(cross axis)가 있다. 그리고 이 축은 수평, 수직에 따라 바뀔 수 있다.
3. Flexbox 게임을 해보자.