柔性柱的自动宽度

Question

如何设置第一个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这样的东西会很好：）

Answer 1

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

事实上，根本不给它任何弹性值，它将默认为width:auto。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：似乎打算让每一个＆＃34;离开＆＃34;元素大小相同。

这对于flexbox是不可能的，但CSS Tables可以实现这一点。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

如果您希望每列都与其内容一样宽，则需要使用align-item：flex-start 点击此链接here