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

Question

我正在学习flexbox的工作方式，并希望构建一个非常粗略的原型，看看flexbox是否可以处理这种布局。

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

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

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

Answer 1

  

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

简单地说，Flexbox与HTML表共享的一个很好的功能是，同一行 上的弹性项具有相同的高度，由align-items property控制。它的默认值是stretch，并且会使行中的项目等于高。

＆＃13;

＆＃13;

.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  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

可能值得一提的是，Flexbox 与HTML Table无法共享。

• 动态相等的列宽。

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

＆＃13;

＆＃13;

.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  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

通过防止弹性项目缩小，并使它们小于其内容，可以强制相等的宽度。

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

＆＃13;

＆＃13;

.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  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更合适的比较是使用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中的默认设置。

您无法获得equal height rows in a flex container，这意味着所有行共享相同的高度。为此，您可以使用CSS Grid layout。

但是对于flexbox，每行本身在所有列上的高度都相同。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo

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

• Flex容器设置为wrap。

• 在flex-grow: 1简写中定义flex的展示项目中，flex-basis不需要25％，这实际上会导致由于边距，每行有三个项目。

• 由于flex-grow将消耗行上的可用空间，flex-basis只需要足够大以强制执行换行。在这种情况下，使用flex-basis: 20%时，边距有足够的空间，但第五项的空间不足。

更多信息：

• Equal height rows in a flex container
• Equal height rows in CSS Grid Layout