フレックスカラムの自動幅

Question

最初のフレックスカラムの幅を、コンテンツのサイズだけの幅に設定するにはどうすればよいですか？ width: auto動作しません... flex-basis: contentのような何かが、それは限り部屋を取るために拡張されますように、その列flex:1を与えないでください:)

Answer 1

を持っていいだろう設定 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 { 
 
    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：意図は、すべての "左" の要素が同じサイズで持っていたようです。

これはフレックスボックスでは不可能ですが、CSSテーブルでこれを達成できます。

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

Answer 2

あなたは、各列が同じ幅でその内容などになりたい場合は、ALIGN-アイテムを使用する必要があります：フレックススタート チェックこのリンクhere