像表格单元格一样的 Flexbox 大小的孩子？

Posted 2023-03-06

【中文标题】像表格单元格一样的 Flexbox 大小的孩子？

【英文标题】：Flexbox size child like table cell?

【发布时间】：2018-04-13 09:30:39

【问题描述】：

我遇到了 Flexbox 的问题。我尝试了很多变体，但没有找到解决方案。

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

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

关于第二行，背景 stretch 很好，但它需要相等的宽度，我需要宽度取决于内容，例如 auto 宽度....

我需要它来拉伸，就像在变体 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>

【参考方案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>

【讨论】：

width: auto 是默认设置，您可以将其删除，并且 Firefox 在版本中删除了 moz 前缀。 21（现在是 56），如果要继续使用，还需要在 display: flex 上添加前缀，否则将不适用于旧版本

【参考方案2】：

很难精确匹配，因为当table 分配可用空间时，它使用与 Flexbox 不同的算法，更深入的解释 table 的工作原理可以在这里找到：

How is column width determined in browser? http://www.w3.org/TR/CSS21/tables.html

---

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

因此，要匹配示例 1/2 中的文本，您需要提前知道弹性项目是否应该比另一个小一些。

这里有 3 个样本，其中第一个使用相等增长 (flex-grow: 1)，第二个使用调整。

堆栈sn-p

.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 一样。

堆栈sn-p

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

【讨论】：

谢谢..我的意思不是很准确..我只是想用自动填充

@Kumar 我猜到了，还是想提一下。另外，如果您打算使用多行，请查看我的建议，否则它将不起作用。

是的。非常感谢您的澄清。现在我了解了浏览器如何确定列宽