flexbox 可以处理不同大小的列但一致的行高吗？

Question

我只是在学习 flexbox 是如何工作的，想构建一个非常粗略的原型，看看 flexbox 是否可以处理这种布局。

我基本上想看看 flexbox 是否可以支持具有不同宽度和高度但具有一致行高的 4 列表格。

我不确定我是否很好地解释了布局，所以这里是我所追求的快速草图：

所以我关心的是：如果我使用 HTML 表格制作它，无论特定列有多少高度，每一行都将是一致的。

Answer 1

我基本上想看看 flexbox 是否可以支持具有不同宽度和高度但具有一致行高的 4 列表格。

简单来说，Flexbox 与 HTML Table 共享的一个好特性，就是同一行的 flex item可以有相同的高度，由align-items属性控制。它的默认值是stretch, 并且将使行上的项目相等。

.flex-container {
  display: flex;
  flex-wrap: wrap;                    /*  allow items to wrap  */
  justify-content: space-between;     /*  vertical  */
  align-items: stretch;               /*  horizontal, is default
                                          and can be omitted  */
}

.flex-item {
  flex-basis: 23%;                    /*  give each item a width  */
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.flex-item:nth-child(n+5) {
  margin-top: 10px;                   /*  from 5th item, add top margin  */
}

<div class="flex-container">
  <div class="flex-item">Left<br>high</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right<br>higher<br>higher</div>
  <div class="flex-item">Right</div>
</div>

值得一提的一件事是 Flexbox不与 HTML Table共享的内容。

• 动态等列宽。

如果一个项目的内容将比同一列中的其余项目更宽，则其他项目不会将其宽度调整为与最宽相等。

.flex-container {
  display: flex;
  flex-wrap: wrap;                    /*  allow items to wrap  */
  justify-content: space-between;     /*  vertical  */
  align-items: stretch;               /*  horizontal, is default
                                          and can be omitted  */
}

.flex-item {
  flex-basis: 23%;                    /*  give each item a width  */
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.flex-item:nth-child(n+5) {
  margin-top: 10px;                   /*  from 5th item, add top margin  */
}

<div class="flex-container">
  <div class="flex-item">Left<br>high</div>
<div class="flex-item">Middle/Left&nbsp;-&nbsp;&nbsp;is&nbsp;wider</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right<br>higher<br>higher</div>
  <div class="flex-item">Right</div>
</div>

通过防止 flex item 收缩，并使它们小于其内容，可以强制等宽。

请注意，overflow: hidden（或除 之外的任何值visible）与 has 具有相同的效果min-width: 0，因此在下面的示例min-width中可以省略。

.flex-container {
  display: flex;
  flex-wrap: wrap;                    /*  allow items to wrap  */
  justify-content: space-between;     /*  vertical  */
  align-items: stretch;               /*  horizontal, is default
                                          and can be omitted  */
}

.flex-item {
  flex-basis: 23%;                    /*  give each item a width  */
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
  
  flex-shrink: 0;                     /*  prevent from "shrink to fit" */
  min-width: 0;                       /*  allow to shrink past content width  */
  overflow: hidden;                   /*  hide overflowed content  */
}

.flex-item:nth-child(n+5) {
  margin-top: 10px;                   /*  from 5th item, add top margin  */
}

<div class="flex-container">
  <div class="flex-item">Left<br>high</div>
<div class="flex-item">Middle/Left&nbsp;-&nbsp;&nbsp;is&nbsp;wider</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right</div>
  <div class="flex-item">Right</div>
  
  <div class="flex-item">Left</div>
  <div class="flex-item">Middle/Left</div>
  <div class="flex-item">Middle/Right<br>higher<br>higher</div>
  <div class="flex-item">Right</div>
</div>

更合适的比较是使用 CSS Grid，它几乎可以完成 HTML Table 的所有功能，然后还有一些 :)

这里有两个很棒的 Flexbox 和 CSS Grid 指南：

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

一致的行高实际上是 Flexbox 中的默认设置。

您无法在弹性容器中获得相同高度的行，这意味着所有行共享相同的高度。为此，您可以使用CSS 网格布局。

但使用 Flexbox，每一行本身在所有列上都可以具有相同的高度。

body {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

.box {
  flex: 1 0 20%; /* see note below */
  margin: 0 5px 5px 0;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="container">
  <div class="box">GROUP 1</div>
  <div class="box">text text text text text text text text text text text text text text text text</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">GROUP 2</div>
  <div class="box"></div>
  <div class="box">text text text text text text text text</div>
  <div class="box"></div>
  <div class="box">GROUP 3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">text text text text text text text texttext text text text text text text text</div>
  <div class="box">GROUP 4</div>
  <div class="box">text text text text text text text text</div>
  <div class="box"></div>
  <div class="box"></div>
</div>

jsFiddle 演示

关于flex: 1 0 20%，这是基本概念：

• Flex 容器设置为wrap。

• 在弹性项目上，根据简写flex-grow: 1定义flex，不需要为flex-basis25%，由于边距的原因，这实际上会导致每行出现三个项目。

• 由于flex-grow会消耗行上的可用空间，flex-basis因此只需足够大即可强制换行。在本例中，使用 时flex-basis: 20%，边距有足够的空间，但没有足够的空间容纳第五个项目。

更多信息：

• 弹性容器中的等高行
• CSS 网格布局中的等高行