CSS 弹性列的自动宽度

Auto width of flex column

提问by Ivan Topi?

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

如何设置第一个 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;
}

Setting width: autodoesn't work... Something like flex-basis: contentwould be nice to have :)

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

回答by Paulie_D

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

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

In fact, don't give it any flex value at all and it will default to width:auto.

事实上，根本不要给它任何 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>

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

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

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

这在 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>

回答by YingYang

You have to restructure your HTML a bit to achieve what you want:

你必须稍微重构你的 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>

回答by Aras

If you want each column to be as wide as its content you need to use align-item: flex-start check this link here

如果你想每列一样宽，它的内容，您需要使用对齐项：柔性启动检查此链接在这里