반응형
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;
}
아까와는 다르게, 박스가 각각 자신의 크기를 유지하면서 줄을 바꾼다.
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 이라는 뜻이다.
반응형
'코딩' 카테고리의 다른 글
| 노마드코더 CSS Layout 마스터클래스 챌린지 - 4일차 (0) | 2024.03.07 |
|---|---|
| 노마드코더 CSS Layout 마스터클래스 챌린지 - 3일차 (0) | 2024.03.07 |
| 노마드코더 CSS Layout 마스터클래스 챌린지 - 1일차 (0) | 2024.03.04 |
| [Kotlin] 상속과 접근 제한자 (0) | 2023.10.03 |
| [Kotlin] 코틀린 클래스 , 생성자 (0) | 2023.10.02 |
