코딩

노마드코더 CSS Layout 마스터클래스 챌린지 - 2일차

조강철10 2024. 3. 5. 21:36
반응형

 

 

1. 플렉스 박스 안에 20개의 상자를 넣을 수 있을까?

  <body>
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
      <div class="box">11</div>
      <div class="box">12</div>
      <div class="box">13</div>
      <div class="box">14</div> 
      <div class="box">15</div>
      <div class="box">16</div>
      <div class="box">17</div>
      <div class="box">18</div>
      <div class="box">19</div>
      <div class="box">20</div>
  </body>

 

 

20개의 박스를 넣을 수는 있지만, 상자의 크기가 자동으로 조절된다.

 

이 문제를 해결하기 위해서 flex-wrap을 사용한다.

 

body{
  display: flex;
  height: 100vh;
  gap : 10px;
  justify-content: center;
  flex-wrap: wrap;
}

flex-wrap 사용 결과

 

아까와는 다르게, 박스가 각각 자신의 크기를 유지하면서 줄을 바꾼다.

 

2. flex-flow

 

flex-flow는 flex-direction 과 flex-wrap 을 한번에 사용할 수 있게 해준다.

 

body{
  display: flex;
  height: 100vh;
  gap : 10px;
  justify-content: center;
  flex-flow: row wrap;
}

flex-flow : row wrap 은 flex-direction : row / flex-wrap : wrap 이라는 뜻이다.

 

실행 결과

반응형