这是营销网站很常见的布局,例如,网站可能会有一行包含 3 件商品的信息,其中通常包含 1 张图片、1 个商品名,然后是一些文字,用于描述商品的某些功能。在较小的屏幕上,您会希望这些元素能够很好地堆叠在一起,并随着屏幕尺寸的增大而扩展。
通过使用 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>
为 150px:
.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;
}