flexよく使うCSS

基本CSS

FLEXBOXの基本形

display: flex;
flex-direction: row;/*子要素を並べる方向 他に column*/
justify-content: flex-start;
flex-wrap: wrap;

align-items

上下中央

align-items: center;

下揃え

align-items: flex-end;

高さをそろえない

align-items: baseline;

justify-content

右端揃え

justify-content: flex-end;

左右中央揃え

justify-content: center;

均等に並べる

justify-content: space-between;

子要素同士に余白を空けたくない場合は、子要素にwidth: 100%を追加。

flex-direction

子要素を左端揃え（親要素に記述）

flex-direction: row;

子要素を縦方向揃え（親要素に記述）

flex-direction: column;

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

親要素の場合

align-items: center;

子要素の場合

子要素にdisplay: flex;を追加してから、下記を追加

align-items: center;

親要素に対して子要素の幅を100%。aなどを幅一杯にする場合など（親要素に記述）

flex-grow: 1; など

孫要素の高さを合わせ、要素の中身を上下中央に揃える

ulなどの親要素に

display: flex;

liなどの子要素に

display: flex;

aなどの孫要素に

display: flex;
align-items: center;
width: 100%;
justify-content: center;
text-align: center;