Flexbox如何像表格单元格一样调整子元素大小？

Question

我在使用Flexbox时遇到了问题。我尝试了很多变种，但没有找到解决方案。

我需要子元素与父容器一起 拉伸 。

第一行的宽度还可以，但是背景应该随内容 拉伸。

关于第二行，背景 拉伸 得不错，但它会占有等宽的空间，我希望宽度能够根据内容而定，像 自动 宽度......

我希望它能像在 variant 3 中使用 display: table 一样 拉伸。

.row {
  display: flex;
  justify-content: space-around;
  margin: 20px;
  color: #fff;
}

.row .col {
  min-height: 40px;
  background: #333;
  padding: 10px;
}

.row-v2 {
  flex-wrap: wrap;
}

.row-v2 .col {
  flex: 1;
}

.row-table {
  width: 100%;
  display: table;
}

.col:nth-child(2) {
  background: #666;
}

.row-table .col {
  display: table-cell;
  padding: 10px;
  background: #333;
  color: #fff;
}

<h1>Variant 1</h1>
<div class="row">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">e</div>
</div>

<h1>Variant 2</h1>
<div class="row row-v2">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h1>Variant with table method</h1>
<div class="row-table">
  <div class="col">test</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate, blanditiis culpa neque!</div>
  <div class="col">Lorem ipsum dolor sit amet.</div>
</div>

- Ram kumar

Answer 1

试试这个。我已经添加了col-md-auto类和它的css，就像这样：

.col-md-auto {
  -moz-box-flex: 1;
  flex:1 1 auto;
  width: auto;
}

.row {
  display: flex; 
  margin: 20px;
  color: #fff;
}

.row .col {
  min-height: 40px;
  background: #333;
  padding: 10px;
}

.row-v2 {
  flex-wrap: wrap;
}

.row-v2 .col {
  flex: 1;
}

.row-table {
  width: 100%;
  display: table;
}

.col:nth-child(2) {
  background: #666;
}

.row-table .col {
  display: table-cell;
  padding: 10px;
  background: #333;
  color: #fff;
}
.col-md-auto {
  -moz-box-flex: 1;
  flex:1 1 auto;
  width: auto;
}

<h1>Variant 1</h1>
<div class="row row-v1">
  <div class="col col-md-auto">test</div>
  <div class="col col-md-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate</div>
  <div class="col col-md-auto">e</div>
</div>

<h1>Variant 2</h1>
<div class="row row-v2">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h1>Variant with table method</h1>
<div class="row-table">
  <div class="col">test</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit repellendus iste doloremque architecto est et voluptate, blanditiis culpa neque!</div>
  <div class="col">Lorem ipsum dolor sit amet.</div>
</div>

- ankita patel

---

由于 width: auto 是默认值，因此您可以将其删除。Firefox 在版本21（现在是56）中删除了 moz 前缀。如果仍要使用它，则还需要在 display: flex 上添加前缀，否则它不会应用于那些旧版本。 - Asons

Answer 2

由于 table 分配可用空间时使用的算法与 Flexbox 不同，因此很难完全匹配。有关 table 工作原理的更详细说明可以在这里找到：

• 浏览器中如何确定列宽？
• http://www.w3.org/TR/CSS21/tables.html

---

简单来说，table 使用每个单元格的内容大小来计算增长量，而 Flexbox 在计算增长量之前会减去内容大小。

因此，要像示例 1/2 中的文本一样匹配，您需要事先知道 flex 项是否应比另一个小一些。

这里有三个示例，第一个使用相等的增长量 (flex-grow: 1)，第二个进行了调整。

堆栈片段

.row {
  display: flex;
}
.col {
  background: #333;
  padding: 10px;
  color: #fff;
}
.row-v1 .col {
  flex-grow: 1;                    /*  equal  */
}
.row-v2 .col:nth-child(1) {
  flex-grow: 1.6;                  /*  adjusted  */
}
.row-v2 .col:nth-child(2) {
  flex-grow: 3;                    /*  adjusted  */
}
.row-v2 .col:nth-child(3) {
  flex-grow: 1;                    /*  adjusted  */
}
.row-table {
  display: table;
  width: 100%;
}
.row-table .col {
  display: table-cell;
}
.col:nth-child(2) {
  background: #999;
}
h3 {
  margin: 5px;
}

<h3>Flex - equal</h3>
<div class="row row-v1">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h3>Flex - adjusted</h3>
<div class="row row-v2">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

<h3>Table</h3>
<div class="row-table">
  <div class="col">test</div>
  <div class="col">test 1234</div>
  <div class="col">t</div>
</div>

我建议这样思考，小的得1分，中等大小得2分，大的得3分，并且将flex-basis设置为0，仅依靠flex-grow定义宽度，这样第二行就会与第一行匹配，即使内容不同，就像table一样。

堆栈片段

.row {
  display: flex;
}
.col {
  background: #333;
  padding: 10px;
  color: #fff;
}
.row .col.sm {
  flex: 1 1 0;
}
.row .col.md {
  flex: 2 2 0;
}
.row .col.lg {
  flex: 3 3 0;
}
.col:nth-child(even) {
  background: #999;
}
.row + .row {
  margin-top: 2px;
}

<div class="row">
  <div class="col md">test</div>
  <div class="col lg">test 1234</div>
  <div class="col sm">t</div>
  <div class="col md">test</div>
  <div class="col lg">test 1234</div>
  <div class="col sm">t</div>
</div>

<div class="row">
  <div class="col md">test</div>
  <div class="col lg">test 1234 with more text</div>
  <div class="col sm">t</div>
  <div class="col md">a</div>
  <div class="col lg">1234</div>
  <div class="col sm">bcd</div>
</div>

- Asons

---

谢谢。我并不是要求完全一致，我只是想用自动填充。 - Ram kumar

@Kumar 我猜到了，但还是想提一下。如果你打算使用多行，请看看我的建议，否则它将无法工作。 - Asons

是的...非常感谢澄清。 现在我明白了列宽是如何由浏览器确定的。 - Ram kumar