目次
正式名称はFlexible Box Layout Moduleです。
横方向または縦方向に要素を配置し、柔軟にレイアウトすることができます。
親要素にdisplay:flex;を指定するだけです。
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
CSS
ul {
display:flex;
}
横並びに配置することができました。
これを基本にして、プロパティを追加していきます。
flexboxのプロパティには大きく分けて『flexコンテナ』と『flexアイテム』があります。
『flexコンテナ』は親要素に定義します。
『flexアイテム』は子要素に定義します。
横方向への配置を決めます。
| flex-start | （初期値）左揃え |
|---|---|
| flex-end | 右揃え |
| center | 中央揃え |
| space-between | 端と端から均等配置（両端に余白なし） |
| space-around | 両端も含めて、均等配置（両端に余白あり） |
縦方向への配置を決めます。
| stretch | （初期値）余白なし |
|---|---|
| flex-start | 上揃え |
| flex-end | 下揃え |
| center | 上下中央揃え |
| baseline | ベースライン揃え |
複数行にした時の縦方向への配置を決めます。
| stretch | （初期値）余白なし |
|---|---|
| flex-start | 上揃え |
| flex-end | 下揃え |
| center | 上下中央揃え |
| space-between | 上と下から均等配置（両端に余白なし） |
| space-around | 上下も含めて、均等配置（両端に余白あり） |
折り返しの有無を決めます。
| nowrap | （初期値）折り返さずに一列に配置 |
|---|---|
| wrap | 上から下へと折り返す |
| wrap-reverse | 下から上へと折り返す |
子要素の向きを決めます。
| row | （初期値）左から右へ配置 |
|---|---|
| row-reverse | 右から左へ配置 |
| column | 上から下へと配置 |
| column-reverse | 下から上へと配置 |
順番を任意の順に並び替えることができます。
指定した要素の伸び率を設定できます。
指定した要素の縮み率を設定できます。
横幅を指定できます。
縦方向の位置を指定できます。
猫田 ねこ
パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。
Google Fontsとは？Google Fontsの使い方を解説（2022年）
【CSS】placeholderの文字色を変更する方法
【CSS】テキストの末尾を3点リーダーにする方法
