Flexで高さを設定する時の基本

レイアウトを設定するならFlexを使えば大体間違いない

ただ高さの設定について、height: 〇〇px を指定せず、よしなにやってくれる方法を現場で教えてもらったので、忘れないように記事にする

基本の型

まずは、こちらのコードをご覧ください

これが、基本の型になります

1つずつ説明していきますね

一番外側

1行目ですが、display: flexでflexにしてます

height: 100vhにすることで高さを固定します

flex-direction: columnで縦に並べます

横に並べる場合は、flex-direction: rowにするか、flex-direction自体を削除すればOKです(default direction:row)

flex: none

スクロールせず、表示したいものはここに入れてください

min-heightやmax-heightで高さを指定するのもありです

flex: noneは複数OKです!

flex: auto

flex: 1 1 autoを指定することで残りの高さを埋めてくれます(flex: 0 1 autoを使うケースもあります)

また、overflow: autoも設定することで、はみ出たらスクロールもしてくれます

flex: autoは残りの高さを埋めてくれるので、1つだけです(複数NG)

サンプル

Angular Ivy (forked) - StackBlitz
A angular-cli project based on @angular/animations, @angular/compiler, @angular/core, @angular/common, @angular/platform-browser-dynamic, @angular/forms, @angul...

※スクロールバーが出てますが、bodyタグにoverflow: hiddenを追加すればスクロールバーは無くなります

Flexの入れ子

Flexの入れ子のサンプルも記載します

コメント

タイトルとURLをコピーしました