こういうレイアウトをHTML/CSSで実現するための備忘録です。
作成中のツールで実現したかったけれど、だいぶ悩んだので書き留めておきます。
上にいくつかUI（ボタンや説明文）が存在し、その下に縦幅いっぱいのテキストエリアがあるというレイアウトです。
まずはベースです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box
}
body {
margin: 0;
}
p {
margin-block-start: 0;
}
.yokonarabi-buttons {
display: flex;
}
.green-box {
background-color: green;
}
.input-area textarea {
background-color: yellow;
}
</style>
</head>
<body>
<div class="green-box">
<div class="ui-area">
<p>山路を登りながら、こう考えた。</p>
<div class="yokonarabi-buttons">
<button>ボタン1</button>
<button>ボタン2</button>
<button>ボタン3</button>
</div>
<div>
<label>何かの設定値: <input type="text"></label>
</div>
</div>
<div class="input-area">
<textarea></textarea>
</div>
</div>
</div>
</body>
</html>
全体の縦幅を広げる
大本になる入れ物を広げます。
body {
margin: 0;
height: 100vh;
}
.green-box {
background-color: green;
height: 100%;
}
Flexboxを利用する1段階目
オブジェクトの伸張には、flexを使用し、以下のようにします。
.green-box {
background-color: green;
height: 100vh;
display: flex;
flex-direction: column;
}
.input-area {
flex-grow: 1;
display: flex;
}
.input-area textarea {
background-color: yellow;
}
green-boxクラスのdivへdisplay: flex;とflex-direction: column;を指定し、フレックスコンテナ化します。
すると、その子要素のdiv（ui-areaクラスとinput-areaクラス）が、縦に並べられたフレックスアイテム化します。
さらにinput-areaクラスのdivへはflex-grow: 1;を指定すると、フレックスコンテナ内の分配可能な余白いっぱいにinput-areaクラスのdivが伸びます。
Flexboxを利用する2段階目
で、さらに、input-areaクラスへdisplay:flex;を指定すると、自身もフレックスコンテナ化します。
ここからが、よく理解していないのだが
フレックスアイテムとなったtextareaは、親コンテナのデフォルト設定のalign-items: normal;で、align-items: stretch;相当が影響し、交差軸方向で伸張します。
flex-directionもまたデフォルト設定のrowであることから、ここでいう『交差軸』は画面上から下方向です。（誤解の無い適切な表現がわからない）
したがって、textareaは伸張します。
そして、こうなる
最後にちょっと見やすいようにpaddingを付け足して、完成です。
.green-box {
padding: 10px;
}
必要なら、横方向もFlexboxを使って、伸張します。
.input-area textarea {
background-color: yellow;
flex-grow: 1;
}
最後に
こういうレイアウトを使ったツールを使いたかったけれど、なかなか実現できずにいました。
しかし、ようやく実現しました。
Flexboxについての理解も多少深まりましたし、さらに開発を進めたいと思います。
ここまで、読んでいただきありがとうございました。