伸缩柱自动宽度 [英] Auto width of flex column

问题描述

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

How can I set the width of first flex column so that its width is only the size of its content? 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：自动不起作用... flex-basis：content 这样的东西很不错：）

Setting width: auto doesn't work... Something like flex-basis: content would be nice to have :)

推荐答案

不要给该列 flex：1 ，因为它会扩展为占用允许的最大空间。

Don't give that column flex:1 as it will expand to take up as much room as is permitted.

实际上，根本不给它任何flex值，它将默认为 width：auto 。

In fact, don't give it any flex value at all and it will default to 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>

编辑：似乎是要使每个左元素的大小都相同。

It seems the intention was to have every "left" element be the same size.

flexbox，但CSS Tables可以实现。

This is not possible with flexbox but CSS Tables can achieve this.

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

这篇关于伸缩柱自动宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！