Flexboxグリッドシステムを使って、整列、順序付け、オフセットのいくつかのオプションで列を変更する方法。
Bootstrap5（ブートストラップ5）では「列の間隔を両端から均等に配置」が追加されました。
垂直方向の配置
カラムの上揃え・・・align-items-start
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row align-items-start"> <div class="col"> 3つの列の1列目 （高め） </div> <div class="col"> 3つの列の2列目 </div> <div class="col"> 3つの列の3列目 （少し高め） </div> </div> </div> |
カラムの上下中央揃え・・・align-items-center
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row align-items-center"> <div class="col"> 3つの列の1列目 （高め） </div> <div class="col"> 3つの列の2列目 </div> <div class="col"> 3つの列の3列目 （少し高め） </div> </div> </div> |
カラムの下揃え・・・align-items-end
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row align-items-end"> <div class="col"> 3つの列の1列目 （高め） </div> <div class="col"> 3つの列の2列目 </div> <div class="col"> 3つの列の3列目 （少し高め） </div> </div> </div> |
水平方向の配置
カラムの行頭揃え・・・justify-content-start
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-start"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
カラムの中央揃え・・・justify-content-center
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-center"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
カラムの行末揃え・・・justify-content-end
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-end"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
カラムを等間隔に配置・・・justify-content-around
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-around"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
カラムを両端から均等に配置・・・justify-content-between
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-between"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
カラムの間隔を両端から均等に配置・・・justify-content-evenly
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row justify-content-evenly"> <div class="col-4"> 2つの列の1列目 </div> <div class="col-4"> 2つの列の2列目 </div> </div> </div> |
コメント