初めに
webページを作成にあたって要素を横並びにする方法が定着しないので記事に残します。
要素を横並びにする方法
今回はFlexboxを記事にします。flortもありますがFlexboxの方が応用が効くと思うのでFlexboxを使用します。
前提として、Flexboxとはブロック要素の配置を変えることができます。
ブロック要素とインライン要素については以下を見てください。
ブロック要素とインライン要素について
displayプロパティについて
displayプロパティとは要素の種類を変更することができるプロパティです。displayプロパティの種類を何個か書いておきます。
| 種類 | 説明 |
|---|---|
| display:block | 指定した要素をブロックレベル要素へ |
| display:inline | 指定して要素をインライン要素へ |
| display:inline-block | 指定した要素は並びはインライン、中身はブロック要素として表示 |
| display:none | 指定した要素は非表示となる |
| display:flex | 指定した要素の子要素は横並びになる |
上記の表で書いてあるdisplay:flexを使用すると要素を横並びにすることができる。注意としては親要素にdisplay:flexを使用することです。
横並びにした要素の詳細を指定する
display:flexを使用し、さらに横並びにした要素を中央に寄せたり間隔を開けて均等に配置したりすることもできます。
justify-contentプロパティ
justify-contentを使用することによって横並びの配置を指定できます。display: flexを使用した親要素に記載します。何個か種類を書いておきます。
| 種類 | 説明 |
|---|---|
| justify-content:flex-start | 指定した要素を左寄せにする |
| justify-content:flex-end | 右寄せにする |
| justify-content | 中央寄せ |
| justify-content:space-between | 両端が左右により、等間隔 |
| justify-content:space-around | 両端が左右により等間隔。両端の余白と要素間の余白が1:2になる |
他にも縦の要素を調整するalign-itemsプロパティやなどがあります。
初心者のため間違いなどありましたらご指摘お願いします。