flex

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;

ホームページ制作の
お問い合わせ

Y desIgnのサービスは全国対応可!

全国
対応

遠方の企業様にLINEやzoomなどのビデオ会議ツールを活用させていただくことで日本全国のお客様へのサービス提供を可能としております。

ホームページを作りたいと
お伝えください

受付時間
平日火曜~金曜 10:00~17:00

0586-82-2196