flexboxよく使うCSS

基本CSS

横並びにさせたい要素の親要素に下記CSSを記述。

display: flex;

flex-direction: row;

justify-content: flex-start;

flex-wrap: wrap;

上下中央

align-items: center;

右端揃え

justify-content: flex-end;

左端揃え

flex-direction: row;

中央揃え

justify-content: center;

横並び要素の高さを揃える

子要素に

display: flex;

align-items: center;

高さをそろえない

align-items: baseline;

均等に並べる

justify-content: space-between;