Open2
スタイルシート（CSS・Style Sheet）
PHP初心者勉強会スタイルシートに関するTips
PHP初心者勉強会Flexbox
display:flex; を指定するだけでOK。
<div class="flex">
<div>あいうえお</div>
<div>かきくけこ</div>
<div>さしすせそ</div>
</div>
<style>
.flex {
display: flex;
justify-content: space-between;
}
</style>
ボックスの配置ルール
justify-content で、左寄せ、右寄せ、均等配置などの指定ができる。
| 値 | 結果 |
|---|---|
| start | □ □ □ |
| space-between | □ □ □ |
余白の配置
ボックスの横幅が余っている場合は、余っている部分を等分割当することができる。
/* 最初のボックスに余白をすべて割り当てる */
.flex > div:first-child {
flex-grow: 1;
}