[解決済み] フレックスアイテムがフレックスコンテナの高さを満たさないようにするには?重複
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-direction
は
row
であるため、垂直方向の配置を制御することができます。
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 には、優れた 記事 を掲載しています。 何度か読むことをお勧めします。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?