web-dev-qa-db-ja.com

flexbox子要素で行を折り返すのを防ぎます

flexbox要素の行の折り返しを防ぐにはどうすればよいですか？それは可能ですか？

flexboxを使用して次のマークアップで2列のグリッドを作成しようとしています。

<div class="flex-container">
   <div class="no-wrap">this should not wrap</div>
   <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div>
</div>

.no-wrap要素は、「必要な」幅と同じ幅にして、内部のすべてのテキストが2行目に折り返されないようにする必要があります。 .can-wrap要素は残りのスペースを占め、必要に応じて折り返します。

私はこのCSSを使用しています（prefrixは無料です）：

.flex-container{
  display:flex;
}

.no-wrap{
  flex-basis:initial;
}

flex-basis:initialは要素が行を折り返すのを防ぐと思いました- https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

これがコードペンです： http://codepen.io/jshawl/pen/bknAc

.no-wrap要素の幅を修正できることはわかっていますが、行の折り返しを防ぐために、どのようにして幅を広くできますか？

.no-wrap要素に対応するfloatは次のようになります。

.no-wrap{
  display:block;
  float:left; /* be as wide as need be! */
}
cssflexbox
34
jessh

探しているプロパティは flex-shrink であり、 flex-basis ではありません。

.no-wrap{
  flex-shrink: 0;
}

ただし、IE10はこのプロパティをサポートするものとしてリストされていないことに注意してください（Flexbox実装を追加した時点では仕様に存在していなかったため）。を使用できます。代わりにflex プロパティ。

.no-wrap{
  flex: 0 0 auto; 
}
43
cimmanon