我正在使用弹性框显示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>有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.
...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.
我想知道flex-basis与实际宽度的不同之处:
编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.
flex-grow当其中一个项目部分填充填充时，如何保持两个项目之间定义的宽度比？这是行不通的。比率取决于容器宽度。
<div style="display: flex;">
<div style="flex-grow: 3; padding: 4rem; background-color: red;">
</div>
<div style="flex-grow: 2; background-color: green;">
</div>
</div>为什么将两个 CSS Grid 列显式设置为 50%，每个列会创建超出视口宽度 100% 的水平滚动？
基本上，当网格设置为以下 css 时，它会生成一个两列布局，没有超出视口宽度的强制水平滚动：
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 50%;
grid-template-areas: 'item item';
}
当grid-template-columns更改为显式设置两个列宽时，结果是带有水平滚动条的两列布局：
.grid {
grid-template-columns: 50% 50%;
}
为什么水平滚动出现在第二个上下文中，而不是第一个？
编辑：<aside>我似乎记得 flexbox 的行为方式类似</aside>
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 50%;
grid-template-areas: 'item item';
}
.grid {
grid-template-columns: 50% 50%;
}