[CSS] Flex box

Flexbox 📦

flexbox로 레이아웃 구성

: 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다

display : flex

• 부모의 박스에 적용하여 자식 박스의 방향과 크기를 결정
• default 값 : 자식요소는 왼쪽부터 차례대로 배치된다.

flex-direction

• Flex 요소에 방향을 지정한다.
• default 값 : 박스가 수직으로 분할되는 것
• 설정 값 : row (default), column

flex : grow shrink basis

• default값 : flex : 0 1 auto
• 세 가지는 기본 크기를 바탕으로 늘리거나 줄일 수 있다.

grow : 얼마만큼의 비율로 늘어날 것인가

• box 구조

  <div id="outer">
  <div class="box hong">.box.hong</div>
  <div class="box">.box</div>
  <div class="box">.box</div>
  </div>

• box hong만 비율을 줄 경우

  #outer { 
  display:flex;
  }
  .hong {
  flex: 1 1 auto;
  }

  

• box 전체에 비율을 줄 경우

  .box {
  border: 1px solid green;
  padding: 10px;
  flex: 1 1 auto;
  }
  .hong {
  }

  

• box hong이 2 box는 1의 비율을 줄 경우

  .box {
  border: 1px solid green;
  padding: 10px;
  flex: 1 1 auto;
  }
  .hong {
  flex: 2 1 auto;
  }

  

shrink : 얼마만큼의 비율로 줄어들 것인가

• grow 와 함께 속성을 사용하는 것을 추천하지 않다
• 실제 크기를 예측하기가 어렵기 때문

basis : 박스의 기본크기를 설정

• grow가 0일 때, 기본 크기를 설정한다
• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선

---

flex 연습 사이트

https://flexboxfroggy.com/#ko