仕事でhtmlとcssで画面作成時に縦並びのボタンの一番下のボタンを下寄せに変更し、残りのボタンは上に詰めるようにする方法に苦労したのでメモ。
まず、横並びで左側に表、右側にボタンを縦並びで配置。
<html>
<head>
<title>
Sample
</title>
</head>
<body>
<!-- CSS -->
<style>
.flex{
display: flex;
}
.panel{
margin: 5px;
}
.btn{
margin: 1px;
width: 50px;;
box-sizing: border-box;
}
</style>
<div>
<h3>title</h3>
</dv>
<div class="flex">
<!-- 横並び左側 -->
<div id="left" class="panel">
<!-- 表の設定 -->
<table border=1>
<tr>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
<tr>
<td>12345</td>
<td>10000</td>
<td>98000</td>
</tr>
<tr>
<td>99999</td>
<td>12345</td>
<td>25000</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
</table>
</div>
<!-- 横並び右側 -->
<div id="right" class="panel">
<!-- ボタン縦に配置 -->
<div>
<button class="btn">Add</button>
</div>
<div>
<button class="btn">Del</button>
</div>
<div>
<button class="btn">Check</button>
</div>
<div>
<button class="btn">Quit</button>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
この"Quit"ボタンを下寄せ、他のボタンを上に詰めて並べるようにしたい
marginや検索で出てくる下寄せの方法では思ったように実現できない実際に作成した画面ではさらにこの下に要素が追加されていくため、検索した方法だとそこからはみ出して画面一番下になってしまう。
解決法
「display: grid」を使用しグリッドを上側のボタンの集まりと下側のボタンに分ける。
（抜粋）
CSS
.btnGrid{
display: grid;
}
HTML
<div class="btnGrid">
<div id="top">
<div>
<button class="btn">Add</button>
</div>
<div>
<button class="btn">Del</button>
</div>
<div>
<button class="btn">Check</button>
</div>
</div>
<div id="end">
<div>
<button class="btn">Quit</button>
</div>
</div>
<div>
この状態からgridの大きさを設定する。
「grid-template-rows: 1fr auto」を設定する。
"grid-template-rows"で縦の数を設定できる。ちなみに"grid-template-columns"で横の数を設定できる。
"1fr"と"auto"で縦2行設定できる。設定数により縦横を何×何にGridを設定できる。
autoは大きさを自動で設定する。1frは大きさの割合を設定する"1fr 2fr"のようにすると1:2の大きさになる。
上側を1fr、下側をautoにすると下側はボタンの大きさに、上側は残り全体になる。
ここでGrid全体の大きさを変更、「height:100%;」にすることで左側の表の大きさに合わせて拡大するため上側に余白が現れる。
最終的には以下になる。
<html>
<head>
<title>
Sample
</title>
</head>
<body>
<!-- CSS -->
<style>
.flex{
display: flex;
}
.panel{
margin: 5px;
}
.btn{
margin: 1px;
width: 50px;;
box-sizing: border-box;
}
.btnGrid{
display: grid;
grid-template-rows: 1fr auto;
height:100%;
}
</style>
<div>
<h3>title</h3>
</dv>
<div class="flex">
<!-- 横並び左側 -->
<div id="left" class="panel">
<!-- 表の設定 -->
<table border=1>
<tr>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
<tr>
<td>12345</td>
<td>10000</td>
<td>98000</td>
</tr>
<tr>
<td>99999</td>
<td>12345</td>
<td>25000</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
</table>
</div>
<!-- 横並び右側 -->
<div id="right" class="panel">
<!-- ボタン縦に配置 -->
<div class="btnGrid">
<div id="top">
<div>
<button class="btn">Add</button>
</div>
<div>
<button class="btn">Del</button>
</div>
<div>
<button class="btn">Check</button>
</div>
</div>
<div id="end">
<div>
<button class="btn">Quit</button>
</div>
</div>
<div>
</div>
</div>
<script>
</script>
</body>
</html>