web-dev-qa-db-ja.com

flex-directionが 'column'の場合、CSSflex-basisが機能しません

私の目標は、次のように、flexboxの2列のレイアウトを作成することです。最初の列には2つの行があり、2番目の列には1つの行があります。

enter image description here

設定flex-basis: 100% 3番目の項目で目的の効果が得られますが、これはコンテナのflex-directionはrowです：

enter image description here

変更flex-directionからcolumnは、heightが明示的に設定されていない限り、次のようになります。これは、私のプロジェクトでは実行不可能です。

enter image description here

コンテナのheightを明示的に設定せずに、最初の画像を取得するにはどうすればよいですか？

これが問題を説明するプランカーです 。

body {
  display: flex;
  height: 100px;
  width: 100px;
}
.container {
  display: flex;
  flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
  flex-grow: 1;
  flex-wrap: wrap;
  /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
  flex-grow: 1;
}
.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: green;
  flex-basis: 100%;
}
<div class="container">
  <div class="item one">&nbsp;</div>
  <div class="item two">&nbsp;</div>
  <div class="item three">&nbsp;</div>
</div>
htmlcssflexbox
13
Alek Storm

なぜ機能しないのか：

フレックスラップは、フレックスアイテムの初期メインサイズがフレックスコンテナをオーバーフローした場合にのみ発生します。 flex-direction: rowの場合、これは、アイテムがコンテナよりも幅が広い場合です。 flex-direction: columnを使用すると、コンテナの高さをオーバーフローする必要があります。

しかし、CSSでは、高さは幅とは根本的に異なる動作をします。 CSSのコンテナの高さは、その子の高さによって決まります。したがって、何かがコンテナの高さを制約しない限り、アイテムがオーバーフローすることはありません。コンテナを高くするだけです。オーバーフローしないと、ラップしません。

考えられる解決策：

コンテナの高さを制限する必要があります。明白な方法（あなたが言ったのはテーブルから外れている）は、明示的なheightまたはmax-heightを設定することです。

高さを制限する必要がある理由を自問してください。ビューポート内にとどまるのですか？ viewport-relative unitsを使用して、max-height: 100vhのように設定できます。このフレックスコンテナの外側にある別の柱の高さと同じですか？別のフレックスボックスで制約できる場合があります。このフレックスコンテナを外側のフレックスボックスのフレックスアイテムにします。ただし、その外側のflexboxには、高さを設定する必要があります。

12
keithjgrant

向きを変えたときの状態（flex: noneなど）で、コンテナ内のブロックに@mediaを設定してみてください。

ChromeとFirefoxでテストしました。

1
Deez

私が理解している限り、次のコードはあなたが望む結果を与えます：

body {
  display: flex;
  height: 100px;
  width: 100px;
}

.container {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  flex-grow:1;
}

.item {
  flex-basis:50%;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;

}

.three {
  background-color: green;
  flex-basis:100%;
}

flex-basis:50%;を除いて、このコードはプランカーで使用するコードと同じです。何らかの理由で、プランカーはflex-basisをサポートしていません。以下も参照してください。

enter image description here

0
Bass Jobsen