flexboxによるdivタグの横並び化
display:flex
flex-direction:row-reverse
要素の右揃え
flex-wrap: wrap;
要素の折り返し指定
item1
item2
item3
item4
item5
item6
item7
item8
justify-content: center;
要素を中央揃えで間隔を取る
justify-content: space-between;
全画面均等そろえ
justify-content:space-around;
要素を左右均等揃えで間隔を取る
align-itemsによる垂直方向の位置合わせ
align-items: stretch;
item1
item2
item3
item4
item5
item6
align-items: start;
item1
item2
item3
item4
item5
item6
align-items: flex-start;
コンテナ内垂直位置の指定 上揃え
item1
item2
item3
item4
item5
item6
align-items: flex-end;
コンテナ内垂直位置の指定 下揃え
item1
item2
item3
item4
item5
item6
align-items: center;
コンテナ内垂直位置の指定 中央
item1
item2
item3
item4
item5
item6
align-items: baseline;
コンテナ内垂直位置の指定 ベースライン(文字の下ラインを合わせる)
item1
item2
item3
item4
item5
item6