如何每行显示三列？答案

【问题标题】：How can I show three columns per row?如何每行显示三列？
【发布时间】：2014-08-03 12:32:24
【问题描述】：

我一直在尝试每行显示三列。是否可以使用 flexbox？

我当前的 CSS 是这样的：

.mainDiv {
    display: flex;
    margin-left: 221px;
    margin-top: 43px;
}

此代码将所有内容放在一行中。我想添加一个约束，每行只显示三个记录。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这可能是您正在寻找的：

http://jsfiddle.net/L4L67/

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: #23a;
}

body>div>div:nth-child(odd) {
  background: #49b;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

您的标记令人困惑。这可行，但考虑使您的示例更易于理解/阅读。
由于flex-grow，当侧面只有一两个divs时，这将显示一两列。
如果您不希望子元素伸展以填充空间，请删除 flex-grow。
@Barun 一个可运行的堆栈片段客观上比仅仅发布单独的代码块要好。请让人们帮助您改进您的帖子。
@Barun，如果有奇数个 div 说 5 怎么办？第二行将有 2 个 div 拉伸全宽，看起来不那么漂亮。如何使第 2 行的 div 与第 1 行的宽度相同？

【解决方案2】：

尽管上面的答案似乎是正确的，但我想添加一个（希望）更具可读性的示例，该示例也以不同的宽度保持在 3 列形式中：

.flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.flex-row-container > .flex-row-item {
    flex: 1 1 30%; /*grow | shrink | basis */
    height: 100px;
}

.flex-row-item {
  background-color: #fff4e6;
  border: 1px solid #f76707;
}

<div class="flex-row-container">
  <div class="flex-row-item">1</div>
  <div class="flex-row-item">2</div>
  <div class="flex-row-item">3</div>
  <div class="flex-row-item">4</div>
  <div class="flex-row-item">5</div>
  <div class="flex-row-item">6</div>
</div>

希望这对其他人有所帮助。

【讨论】：

感谢您的回答。请看我下面的图片，如何使框 4,5 与 1,2,3 相同？图片：prnt.sc/n29bm7
嘿@huykon225。本质上，您需要调整 flex 的值：1 1 30%；在弹性项目上。 “flex”属性是 3 个 flex box 属性的简写：“[flex-grow] [flex-shrink] [flex-basis]”，它定义了 flex 元素的宽度和空间填充属性。 flex-basis 设置 flex-items 的初始宽度，而 flex-grow 描述这些项目如何填充剩余空间（基于不同的 flex-grow 值）。因此，在这种情况下，您需要为项目设置一个与您想要的宽度（可能是 20%）相对应的 flex-basis 值，并将 flex-grow 设置为“0”。
这应该是公认的答案。使用 flex-wrap 属性是一种更好的 flexbox 方法。

【解决方案3】：

使用网格布局试试这个：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

【讨论】：

当项目数可变时，这似乎比 flex wrap + space-between 工作得更好，例如可能有 2 个项目，或者奇数个项目，比如 5。如果你想要项目具有固定大小，然后 space-between 会通过分隔第 4 个和第 5 个孩子来破坏显示，这与此解决方案不同

【解决方案4】：

您现在可以使用grid-auto-flow

https://jsfiddle.net/chalcrow/bqye79kr/1/

CSS

.grid-flow {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

注意 - repeat(3, 1fr) 表示 '3 列，每列占用可用空间的 1（相等）部分。

HTML

<div class="grid-flow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

结果

【讨论】：