[CSS_study] flex-wrap, align-content, flex-flow

* flex-wrap

• flexbox는 width보다도, '같은 줄'에 있도록 하는 것을 우선시함
  • width의 크기를 깨트려서라도 오직 같은 줄에 있도록 만드는 데만 신경을 쓴다.
  • flex-wrap의 기본값은 nowrap이다.
• flex-wrap: wrap; (child의 사이즈를 유지하라고 하는 것)
• flex-wrap: nowrap; (child를 모두 같은 줄에 정렬함, 이때 width가 줄어들 수 있음)

* flex-wrap 예시코드

* flex-wrap: nowrap

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

 

 

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: nowrap
}

---

* flex-wrap: nowrap

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: wrap
}

---

* reverse

• flex-direction: row-reverse; (오른쪽에서부터 1이 시작)
  • column-reverse도 가능
• flex-wrap: wrap-reverse; (한 줄이 되지 않아도 아래에서 위로 정렬되게)

---

* align-content (line을 변경, line은 cross-axis에 있는 상태)

• wrap으로 정렬 시 (여러 줄로, 각 item의 width를 유지)
• 각 줄(기본: row) 간의 간격이 생기는데, 이것을 'align-content'라는 property로 조절 가능
• justify-content와 비슷하지만 'line'에 관한 것
  • (아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성)

* align-content 예시코드

.father {
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: wrap
}

---

* flex-flow

 flex-flow는 flex-direction속성과 flex-wrap의 속성을 합쳐서 앞쪽은 flex-direction설정 뒤쪽은 flex-wrap를 설정하는 것이다.

(개인적으로 잘 사용하지 않음)

 

* flex-flow 예시코드

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;