1. ホーム
  2. html

[解決済み] フレックスアイテムがフレックスコンテナの高さを満たさないようにするには?重複

2022-08-09 01:33:47

質問

以下のコードを見るとわかるように、フレックスコンテナ内の左divは右divの高さに合わせて伸びるようになっています。コンテンツを保持するために必要な最小限の高さにするために設定できる属性はありますか (たとえば通常の height: auto divs outside flex containers のような)コンテンツを保持するために必要な最小限の高さに設定する属性はありますか?

#a {
  display: flex;
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}
<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>

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

この align-items を、あるいはそれぞれ align-content 属性はこの挙動を制御します。

align-items はアイテムの位置を定義します。 直角に になります。 flex-direction .

デフォルトの flex-directionrow であるため、垂直方向の配置を制御することができます。 align-items .

また align-self 属性もあり、項目ごとにアライメントを制御することができます。

#a {
  display:flex;

  align-items:flex-start;
  align-content:flex-start;
  }

#a > div {
  
  background-color:red;
  padding:5px;
  margin:2px;
  }
 #a > #c {
  align-self:stretch;
 }
<div id="a">
  
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
  
</div>

css-tricks には、優れた 記事 を掲載しています。 何度か読むことをお勧めします。