web-dev-qa-db-ja.com

フレックス方向に同じ高さの行：列

行（flex-direction: column）として表示される2つのフレックスアイテムを持つフレックスレイアウトがあります。アイテムは最小の高さでなければなりませんが、それらの1つが成長するのに必要な同じ高さを維持する必要があります。 this fiddle を参照して、結果ウィンドウの幅を狭くしてください。これにより、2番目の.component要素の高さが強制的に増加しますが、最初の.component要素の高さは変わりません。

フレックスアイテムを強制的に同じ高さに維持することは可能ですか？これの主なものは、2つの.component要素のスタッキングであり、flex-direction: columnなしでは達成できなかったことに注意してください。 flex-direction: rowは同じ高さを可能にしましたが、積み重ねは機能しません。

これが私がこれまでに得た結果です：

div {
  border: 1px solid black;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.component {
  min-height: 300px;
}
.left {
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 100px;
  background-color: lightyellow;
}
.right {
  margin-left: 100px;
  margin-top: -250px;
  margin-right: 50px;
  background-color: lightgreen;
}
<div class="container">
  <div class="component left">

  </div>
  <div class="component right">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
      magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
    </p>
    <p>
      Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
      Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
    </p>

  </div>
</div>
htmlcssflexboxflex-direction
11
Andrei V

フレックスコンテナーのデフォルト設定であるalign-items: stretchの結果であるフレックス高さの等しい列機能は、同じ行のフレックスアイテムにのみ適用されます。

複数行のフレックスコンテナー内のアイテムに対しては機能しません。この動作は仕様で定義されています。

6。フレックスライン

複数行のフレックスコンテナー（1行しかない場合でも）では、各行のクロスサイズは、（align-selfによる配置後の）行にフレックスアイテムを含めるために必要な最小サイズです。行は、align-contentプロパティを使用してフレックスコンテナー内で整列されます。

つまり、行ベースのフレックスコンテナーに複数の行がある場合、各行の高さ（ "クロスサイズ"）はです。 「ラインにflexアイテムを含めるために必要な最小サイズ」。

さらに、align-items: stretchは交差軸に沿って機能するため、flex-direction: columnでは交差軸が水平であるため、高さの等しい列の機能は役に立ちません。

複数の行で同じ高さの列/行を実現するには、Javascriptソリューションを検討してください。

ただし、全体的な目的をあまり知らなくても、現在のレイアウトで行の高さを同じにする簡単な方法を次に示します。

両方のdivに重複するコンテンツを追加します。 .component.left divでは、visibility: hiddenを使用します。

改訂フィドル

5
Michael_B

これらのflexbox列を別の列にラップすることができますflexboxこれは行です。フレックスボックスとフレックスアイテムの両方になることができない理由はありません。

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

https://jsfiddle.net/1dp87bm2/1/

2
JackHasaKeyboard