Flexbox：每行4个项目

一尘不染

Flexbox：每行4个项目

html

我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？

这是一个相关的片段：

.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>

阅读 1016

2020-05-10

共1个答案

一尘不染

您已经flex-wrap: wrap在容器上了。很好，因为它会覆盖默认值nowrapsource。这是在某些情况下项目无法包装形成网格的原因。

在这种情况下，主要问题在于flex-grow: 1伸缩项目。

该flex-grow属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此，无论屏幕尺寸有多小，每一项都会在行中获得一定比例的可用空间。

更具体地说，您的容器中有八个flex项目。使用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-basis25％，由于边距，实际上每行将导致三项。

由于flex-grow将消耗行上的可用空间，因此flex-basis只需要足够大即可执行换行。在这种情况下，使用flex-basis: 21%，有足够的空间留出边距，但没有足够的空间容纳第五个项目。

2020-05-10