css - 如何在多行中获得 33.33% 宽度的 flex div?
问题描述
我正在尝试将 flex div 堆叠成 3 行。有时我会有 3 个 div,有时是 6 或 21 个,等等。我弄清楚了宽度和填充,但我不知道如何让它们开始每组 3 个后新行。
我怎样才能做到这一点?现在它把它们都放在一条线上。
HTML 代码是这样的:
<div id="container">
<div class="sections__container">
<div class="sections__container__a">A-1</div>
<div class="sections__container__b">A-2</div>
<div class="sections__container__c">A-3</div>
<div class="sections__container__a">B-1</div>
<div class="sections__container__b">B-2</div>
<div class="sections__container__c">B-3</div>
</div>
</div>
每个 flex div 都使用 CSS,例如:
width: 33.33%;
height: 100%;
float: left;
flex-grow: 1;
这是一个让事情变得更容易的 jsFiddle: https ://jsfiddle.net/xr746syj/
非常感谢您的任何建议:)
解决方案
首先,您需要使用flex-wrap: wrap
,以便您的行在适当的点中断。
其次,您正在使用边距,需要在width
计算中考虑到它们。
所以,如果你说一个块 is 33.33%
but has margin-left: 5px
,你需要使用width: calc(33.33% - 5px)
.
最后,我float
从您的代码中删除了 s,因为它们在应用于 flex 子项时是无用的属性。您的代码可以通过创建一个class
包含每个部分之间所有共享值的公共来大大简化。
这是完整的工作代码:
* {
box-sizing: border-box;
}
#container {
width: 600px;
margin: 0 auto;
background-color: #ececec;
padding: 10px;
margin-bottom: 30px;
}
.sections__container {
margin: 0 auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
.sections__container__a {
margin-right: 5px;
width: calc(33.33% - 5px);
height: 100%;
border-radius: 4px;
flex-grow: 1;
background-color: #FFFFFF;
font-size: 0.80rem;
padding: 15px 0px 10px 0px;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.sections__container__b {
margin: 0 5px;
width: calc(33.33% - 10px);
height: 100%;
border-radius: 4px;
flex-grow: 1;
background-color: #FFFFFF;
font-size: 0.80rem;
padding: 15px 0px 10px 0px;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.sections__container__c {
margin-left: 5px;
width: calc(33.33% - 5px);
height: 100%;
border-radius: 4px;
flex-grow: 1;
background-color: #FFFFFF;
font-size: 0.80rem;
padding: 15px 0px 10px 0px;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
<div id="container">
<div class="sections__container">
<div class="sections__container__a">A-1</div>
<div class="sections__container__b">A-2</div>
<div class="sections__container__c">A-3</div>
<div class="sections__container__a">B-1</div>
<div class="sections__container__b">B-2</div>
<div class="sections__container__c">B-3</div>
</div>
</div>
推荐阅读
- reactjs - React - 我怎样才能在状态下只渲染一次值
- c# - 无法分配数据
- python - 如何将熊猫数据框合并到现有的reportlab表中?
- javascript - 在 React 中制作简单的对象检查器的几个问题
- linux - 只有一个变量的 if 语句在 bash 中的计算结果是什么?
- python - mysql.connector.errors.ProgrammingError:SQL 语法错误
- javascript - 仅根据类切换某些元素
- java - JDBC根据本地ip地址选择网卡使用?
- javascript - Android WebView:如何滚动到某个位置
- java - Java 中的 Click Listener 出现问题