마케팅 사이트에서 흔히 사용되는 레이아웃입니다. 예를 들어 3개 항목으로 구성된 행이 있으며, 보통 이미지, 제목, 일부 텍스트가 포함되어 있으며 제품의 몇 가지 특징을 설명합니다. 작은 화면에서는 잘 쌓이고 화면 크기가 커질수록 확장되는 것이 좋습니다.
이 효과를 위해 Flexbox를 사용하면 화면 크기를 조절할 때 미디어 쿼리가 이러한 요소의 위치를 조정할 필요가 없습니다.
flex는 flex: <flex-grow> <flex-shrink> <flex-basis>
를 의미합니다.
flex-grow
스트레칭
상자가 다음 줄로 래핑될 때 공간이 늘어나고 채워지도록 하려면 <flex-grow>
값을 1로 설정합니다. 예를 들면 다음과 같습니다.
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
이제 화면 크기를 늘리거나 줄이면 이러한 Flex 항목이 축소되거나 증가합니다.
스트레칭 없음
상자를 <flex-basis>
크기로 채우고 작은 크기에서 축소하되 추가 공간을 채우도록 늘어나지 않게 하려면 다음과 같이 작성합니다. flex: 0 1 <flex-basis>
이 경우 <flex-basis>
는 150픽셀입니다.
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
HTML
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
CSS
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}