レイアウトを設定するなら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の入れ子のサンプルも記載します
コメント