web-dev-qa-db-ja.com

フレックスコンテナ内に垂直に配置されたフレックスアイテムの幅を制御する

「HALF」というラベルの付いたボックスが幅の50％しか占めない（最初の行を均等に共有する）効果を達成しようとしています。

基本要件は、それらが単一のコンテナに残ることです。フレックスボックスを使用してこれを達成することは可能ですか？

私はflex-grow、flex-shrink、およびflex-basisをいじってみましたが、単一のコンテナ要件。

このフィドルを考慮してください： http://jsfiddle.net/GyXxT/270/

div {
  border: 1px solid;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.child {
  
  height: 200px;
}
.child.half {
  flex: 1 1 10em;
  color: green;
}

.child:not(.half) {

  flex-shrink: 2;
  flex-basis: 50%;
  color: purple; 
}
<div class="container">
  <div class="child half">
    HALF
  </div>
  
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>
htmlcsscss3flexboxword-wrap
14
parliament

の代わりに flex-direction: column、ラッピング flexboxを使用してflex-wrap: wrap;以下を設定できます。

  1. flex-basis: 50%半角div

  2. flex-basis: 100%全幅divの場合

私がbox-sizing: border-boxは、flex-basisを使用するときに幅を調整します。

以下のデモをご覧ください：

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}
<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>
14
kukkuz

フレックスサイジングプロパティ-flex-grow、flex-shrink、flex-basisおよびflex-は、主軸に沿ってのみ機能しますフレックスコンテナの。

コンテナはflex-direction: columnであるため、主軸は垂直であり、これらのプロパティは幅ではなく高さを制御しています。

列方向コンテナでフレックスアイテムを水平方向にサイズ設定するには、widthプロパティが必要です。

（詳細な説明は次のとおりです。 フレックスベースと幅の違いは何ですか？ ）

単一のコンテナでレイアウトを実現するには、 この質問に対する別の回答 を参照してください。

列方向にとどまる場合は、.half要素を独自のコンテナーにラップする必要があります。

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: green;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}
<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>
6
Michael_B

基本要件は、それらが単一のコンテナに残ることです。

2つのflexbox要素を単純にフロートさせることで、halfなしでも実行できます。

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
}
.child {
  height: 200px;
}
.child.half {
  float: left;
  width: 50%;
  color: green;
}
.child:not(.half) {
  width: 100%;
  color: purple; 
}
<div class="container">
  <div class="child half">
    HALF
  </div> 
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>
3
LGSon