Viv*_*ajh 200 html css html5 css3 flexbox
我正在使用弹性框显示8个项目,这些项目将动态调整我的页面大小.如何强制它将项目分成两行？(每行4个)？
这是一个相关的剪辑:
(或者,如果你更喜欢jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>Mic*_*l_B 290
你已经flex-wrap: wrap上了容器.这很好,因为它会覆盖默认值,即nowrap(源).这是在某些情况下项目不会换行以形成网格的原因.
在这种情况下,主要问题是flex-grow: 1flex项目.
该flex-grow属性实际上不会调整弹性项目的大小.它的任务是在容器(源)中分配可用空间.因此无论屏幕尺寸有多小,每个项目都会获得线上自由空间的比例部分.
更具体地说,容器中有八个弹性项.使用时flex-grow: 1,每个人都可以获得线路上1/8的可用空间.由于您的商品中没有内容,因此它们可以缩小到零宽度,并且永远不会换行.
解决方案是在项目上定义宽度.试试这个:
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>随着flex-grow: 1中定义的flex简写,也没有必要flex-basis为25%,这实际上将导致三个项目每行由于利润率.
由于flex-grow将消耗行上的可用空间,因此flex-basis只需要足够大以强制执行换行.在这种情况下,flex-basis: 21%边缘有足够的空间,但是第五个项目没有足够的空间.
dow*_*art 98
为.child元素添加宽度.margin-left如果你想要每行4 个,我个人会使用百分比.
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 2%;
flex-grow: 1;
height: 100px;
width: calc(100% * (1/4) - 10px - 1px);
}
Cap*_*apy 36
这是另一个apporach.
你也可以用这种方式完成它:
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}
示例:https: //codepen.io/capynet/pen/WOPBBm
还有一个更完整的示例:https: //codepen.io/capynet/pen/JyYaba
Mud*_*bas 13
<style type="text/css">
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .child{
flex: 1 1 25%;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
希望能帮助到你.有关详细信息,您可以点击此链接
sha*_*phy 12
我会这样使用负边距和装订线来计算：
.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}
.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}
演示： https : //jsfiddle.net/9j2rvom4/
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
演示： https ：//jsfiddle.net/jc2utfs3/