如何实现三列均分布局
更多描述 布局代码如下所示，可见 三列均分布局 - codepen (opens in a new tab)
注: 在第一个元素中设置文字，子元素不能因文字过长而挤压。
<div class="container">
<div class="item">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
<div class="item"></div>
<div class="item"></div>
</div>// 以下为样式代码，非核心功能代码
* {
box-sizing: border-box;
}
.container {
background-color: #eee;
height: 10rem;
width: 40rem;
margin: 1rem;
}
.item {
border: 1px solid #888;
}Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 572 (opens in a new tab)
Author 回答者: shfshanyue (opens in a new tab)
见代码 三均分布局 - Codepen (opens in a new tab)
使用 Flex
注意使用 calc(100% / 3) 设置 flex-basis，同时它的缺陷是不能够很好的为子元素设置左右间隙
.flex-container {
display: flex;
flex-wrap: wrap;
// gap: 1rem;
.item {
flex: 0 0 calc(100% / 3);
}
}注意: 如果同时给子元素使用
flex-grow: 1控制均分，当子元素拥有文字等内容时，会受到挤压，将无法实现均分布局。
使用 Grid
使用 Grid 直接操作容器即可，对于子元素之间的间隙也可以很好地控制，可看出 Grid 更为简单，更为高效，更为精确
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}Author 回答者: liuerhost (opens in a new tab)
* {
box-sizing: border-box;
}
.container {
background-color: #eee;
height: 10rem;
width: 40rem;
margin: 1rem;
display: flex;
}
.item {
flex: 1;
border: 1px solid #888;
}