我正在使用一个flex box来显示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-wrap: wrap个.这很好,因为它覆盖了默认值nowrap(source).这就是项目在some cases中不能换行形成网格的原因.

在本例中,弹性项上的主要问题是flex-grow: 1.

flex-grow属性实际上并没有调整flex项目的大小.它的任务是在容器(source)中分配自由空间.因此,无论屏幕大小有多小,每个项目都会收到一部分在线可用空间.

更具体地说,您的容器中有八个flex项.如果是flex-grow: 1,每个人都会收到线路上1/8的可用空间.由于你的物品中没有内容,它们可以缩小到零宽度,并且永远不会被Package.

解决方案是在项目上定义宽度.试试这个:

.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速记中定义了flex-grow: 1flex-basis就不需要是25%,这实际上会导致由于利润率的原因,每行有三个项目.

因为flex-grow将消耗行上的可用空间,所以flex-basis只需要足够大就可以强制换行.在本例中,对于flex-basis: 21%,有足够的空间放置边距,但从来没有足够的空间放置第五项.

Html相关问答推荐

在悬停时应用文本装饰

如何保持嵌套进度条的背景色?

IFRAME中的Chrome图像未调整大小

如何使用CSS创建文件夹选项卡的形状?

如何生成随机字符串的字母数字字符集长度到html跨度?

创建特定的CSS网格布局

元素offsetTop在滚动容器中时没有更改

rvest: Select 不包含链接的段落(<;p>;)

悬停表格单元格文本时,使元素的字体大小更大,同时保持表格单元格的高度不变

CSS中的百分比高度,如何使其与父级高度相同

伪元素:after和溢出隐藏

如何根据剪辑路径边缘设置文本边距?

如何消除线性渐变线的模糊?

为什么 css position:fixed 不适用于对话框标签?

CSS:第一个类型的伪类没有按预期工作

如何使用 CSS 和 HTML 将文本放入图像中?

Primeng浮动标签溢出管理

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

列宽等于最宽列宽度的无界容器

如何添加适合我的内容的背景图片?