弹性列的自动宽度答案

【问题标题】：Auto width of flex column弹性列的自动宽度
【发布时间】：2017-02-22 10:28:18
【问题描述】：

如何设置第一个 flex 列的宽度，使其宽度仅为其内容的大小？ http://codepen.io/anon/pen/rrKkOW

<div class="flex">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

.flex {
  display: flex;
}

.inside {
  flex: 1;
  border: 1px solid #000;
}

设置width: auto 不起作用...像flex-basis: content 这样的设置会很高兴:)

【问题讨论】：

标签： css flexbox

【解决方案1】：

不要给该列flex:1，因为它会扩展以占用尽可能多的空间。

事实上，根本不要给它任何 flex 值，它会默认为width:auto。

.flex {
  display: flex;
}
.inside {
  border: 1px solid #000;
}
.inside-right {
  flex: 1;
  background:#c0ffee;
}

<div class="flex">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

<div class="flex">
  <div class="inside inside-left">Left Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>

<div class="flex">
  <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>

编辑：似乎目的是让每个“左”元素的大小相同。

这在 flexbox 中是不可能的，但 CSS Tables 可以做到这一点。

.row {
  display: table-row;
}
.inside {
  display: table-cell;
  border: 1px solid grey;
}
.inside-left {
  background: lightgreen;
}

<div class="row">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

<div class="row">
  <div class="inside inside-left">Left Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>

<div class="row">
  <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
  <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>

【讨论】：

感谢您的评论，但是否可以使所有左侧列的宽度相同，即最长的列的宽度？这就是为什么我认为使用 flex 可能是个好主意的原因:)
不，这在 flexbox 中是不可能的。不过，您可以使用 CSS 表格布局来做到这一点。 codepen.io/Paulie-D/pen/xEzagW

【解决方案2】：

你必须稍微重构你的 HTML 来实现你想要的：

.flex {
  display: flex;
}
.inside {
  border: 1px solid #000;
}
.flex-grow {
  flex: 1;
}
.inside-right {
  background:#c0ffee;
}

<div class="flex">
  <div>
    <div class="inside">Left</div>
    <div class="inside">Left Left Left LeftLeft Left</div>
    <div class="inside">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
  </div>
  <div class="flex-grow">
    <div class="inside inside-right">Right</div>
    <div class="inside inside-right">RIghtRIghtRIght RIght</div>
    <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
  </div>
</div>

【讨论】：

【解决方案3】：

如果您希望每列与其内容一样宽，您需要使用 align-item: flex-start 检查此链接here

【讨论】：