Question

有没有办法使用Flexbox在不同的行上获得相同的列宽？

我希望cell--id具有相同的宽度（宽度必须具有最大cell--id的宽度）。

示例：

<div class="container">
  <div class="row">
    <div class="cell cell--id">1</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222</div>
    <div class="cell">Test</div>
  </div>
</div>

CSS：

<style>
   .row { display: flex }
</style>

Answer 1

您基本上是在描述一个表格，所以您可能应该使用表格布局，例如。

＆＃13;

.row { display: table-row }
.cell { display: table-cell }

＆＃13;

<div class="container">
  <div class="row">
    <div class="cell cell--id">1</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222</div>
    <div class="cell">Test</div>
  </div>
</div>

＆＃13;

如果您在flexbox上设置了死机，我会看到两个选项：

如果你的行高度相同，你可以换成列专业 - 即将你的列div放在行div之外
手动管理列的大小，类似于：http://inlehmansterms.net/2014/10/11/responsive-tables-with-flexbox/

但实际上，我认为你想要表格布局。

Answer 2

你需要思考：

在一列或多列的行中=＆gt; row是灵活容器
或一行或多行的列=＆gt; column是灵活容器
内容为 flexed 项目（可以是嵌套的灵活容器）

在你的情况下，你需要给.row一个宽度，让flexbox将细胞均匀地分成一行：

.row  { display: flex; width: 300px }
.cell { flex: 1 } /* each cell width will be: available space divided by the number of cells */

好的，这是POC：

＆＃13;

        .row    { display: flex; width: 500px }
        .cell   { flex: 1 }

＆＃13;

<div class="container">
  <div class="row">
    <div class="cell cell--id">1</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222</div>
    <div class="cell">Test</div>
  </div>
  <div class="row">
    <div class="cell cell--id">2222222222222</div>
    <div class="cell">Test</div>
  </div>
</div>

＆＃13;

如何使用Flexbox获得相同的列宽？

2 个答案: