flex

flex

flexよく使うCSS

基本CSS

FLEXBOXの基本形

display: flex;
flex-direction: row;
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;

flex-direction

子要素を左端揃え(親要素に記述)

flex-direction: row;

子要素を縦方向揃え(親要素に記述)

flex-direction: column;

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

親要素の場合

align-items: center;

子要素の場合

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

align-items: center;

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

flex-grow: 1;

ブログ