要素を配置するのにしようするBootstrapクラス
【inline】【block】【float】【flex】などの配置クラス、要素の大きさを指定する【width】【height】、テキストの位置を指定する【text-align】で要素の配置を操作する
【d-inline】【d-block】【d-inline-block】
【d-{設定要素}】頭文字に「d-」をつけてから記述する。
inline要素
inline要素
<div class="d-inline">
<div class="d-inline">block要素
block要素
<div class="d-block">
<div class="d-block">inline-block要素
inline-block要素
<div class="d-inline-block">
<div class="d-inline-block">見た目は【inline】と似ていますが、【block】の要素も持ち合わせています。
【flex】 クラスの設定 【d-flex】【d-inline-flex】
あとで、 【float】クラスの紹介もしますが、基本的にできることは変わりないので【flex】 クラスを使用すれば問題ありません。
【d-{設定要素}】頭文字に「d-」をつけてから記述する。
親要素に【d-flex】クラスを設定する。
左1
左2
<div class="d-flex>
<div>左1</div>
<div>左2</div>
</div>左1
左2
<div class="d-inline-flex>
<div>左1</div>
<div>左2</div>
</div>並べる方向を変更することも可能です。あとで説明する【float】にはこれらのクラスはありません。
| flex-row | 横方向整列（初期設定） |
| flex-row-reverse | 逆順横方向整列 |
| flex-column | 縦方向整列 |
| flex-column-reverse | 逆順縦方向整列 |
row-reverse1
row-reverse2
<div class="d-flex flex-row-reverse>
<div>row-reverse1</div>
<div>row-reverse2</div>
</div>【d-flex】は消さずに【flex-row-reverse】を記述する。
【d-flex】内にある要素が上からひとつずつ逆順＋横方向に配置されていく。
column1
column2
<div class="d-flex flex-column>
<div>column1</div>
<div>column2</div>
</div>column-reverse1
column-reverse2
<div class="d-flex flex-column-reverse>
<div>column-reverse1</div>
<div>column-reverse2</div>
</div>【float】クラス設定【float】【clearfix】
【flex】と違い、配置させたい要素に直接 【float】クラスを設定します。
| float-left | 左側から整列 |
| float-right | 右側から整列 |
| float-none | 回り込まない |
| clearfix | フロートのリセット |
float-none
右1
左1
右2
<div class="float-none">float-none</div>
<div class="float-right">右1</div>
<div class="float-left">左1</div>
<div class="float-right">右2</div>
<div class="clearfix"></div>【clearfix】を設定しないと親要素の高さがわからなくなるので表示が崩れます。
サイズの設定【width】【height】
幅と高さの指定
| w | width(幅) |
| h | height(高さ) |
幅の指定
| 25 | 25% |
| 50 | 50% |
| 75 | 75% |
| 100 | 100% |
【w/h-{幅の指定}】で設定する。
w-25
w-50
w-75
w-100
<div class="w-25">w-25</div>
<div class="w-50">w-50</div>
<div class="w-75">w-75</div>
<div class="w-100">w-100</div>要素内のテキストの位置を揃える【text-align】
| text-left | 左揃え |
| text-center | 中央揃え |
| text-right | 右揃え |
| text-justify | 均等揃え |
text-left
text-center
text-right
text-justify is both side for justify. If Japanese sentence might not get clearly.
<div class="w-25">w-25</div>
<div class="w-50">w-50</div>
<div class="w-75">w-75</div>
<div class="w-100">w-100</div>【text-justify】は日本語だとちょっとわかりにくいかもしれません。
１行目と２行目の単語の間が違うのがわかりますか？両端に合わせて間隔を設定しているためです。
まとめ
- 【d-inline】【d-block】【d-inline-block】
- 【d-flex】【d-inline-flex】
- 【float-left】【float-center】【float-right】【clearfix】
- 【text-left】【text-center】【text-right】【text-justify】
