BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスアイテムの高さが他のフレックスアイテムに合わせて拡張されないようにする

2022-10-24 01:18:22

質問

コンテナ内に2つの要素があり、フレックスボックスを使って横に並べています。2つ目の要素( .flexbox-2 )では、CSSで高さを設定しています。ところが、1つ目の要素( .flexbox-1 ) の高さに合わせます。 .flexbox-2 . どのようにしたら .flexbox-1 の高さと一致しないようにするにはどうしたらよいでしょうか。 .flexbox-2 の高さに合わせず、自然な高さを維持するのですか？

以下は、私がこれまでに作成したものです (また、利用可能な をjsFiddleとして利用できます。 ) 

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

どのように解決するのですか？

<ブロッククオート

これは古い解決策です。 私の回答はこれに取って代わられました。 を使用したAaronによる新しい回答です。 align-self . これはCSSの癖に頼らない、より良い解決策です。

フレックスコンテナである限り が高さを持たない限り を設定することができます。 height: 0% を設定します。それは親から継承する高さを持たないので、すべての パーセント の高さを指定すると、折りたたまれます。そして、その内容に応じて大きくなります。

表示例

この例では -webkit の接頭辞を削除しています。 これは Safari にのみ必要な というプレフィックスを付けることができます。 上に を付けることができます。また flex-direction: row はデフォルト値なので削除しました。 

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します