サイトアイコン WEBデザインMATOME

【コーディング初心者向け】フレックスボックスの使い方

display:flexの使い方編

コーディングでよく使うフレックスボックス!!
そのオプションについてご説明させて頂きます。

「display: flex;」

親要素に設定する事で子要素が横並びに表示されます。

サンプル


box01

box02

box03

box04

box05

box06

表示サンプル

box01

box02

box03

box04

box05

box06

縦並びのオプション「flex-direction: column;」

flex-direction: column;を付けるとは縦並びになります。

サンプル


box01

box02

box03

box04

box05

box06

表示サンプル

box01

box02

box03

box04

box05

box06

折り返しの指定「display: flex;」

display: flex;を付けるとはみ出した要素が下に折り返されます。

サンプル


box01

box02

box03

box04

box05

box06

表示サンプル

box01

box02

box03

box04

box05

box06

横並びの指定

横並びの指定には色々な指定方法がございます。

「justify-content: flex-end;」
要素の一番最後揃え
「justify-content: center;」
要素のセンター揃え
「justify-content: space-between;」
要素の先頭と最後の要素を両サイドに配置し、残りの要素を均等に並べる
「justify-content: space-around;」
全ての要素を均等に並べる。

縦並びの指定

縦並びの指定には色々な指定方法がございます。

「align-items: flex-start;」
縦方向の先頭揃え
「align-items: center;」
縦方向のセンター揃え
「align-items: flex-end;」
縦方向の最後に揃える

並びの順番を変える

「order:数字;」を指定する事により、数字の少ない順に表示されます。

サンプル


box01

box02

box03

box04

box05

box06

表示サンプル

box01

box02

box03

box04

box05

box06

フレックスボックスの使い方動画

モバイルバージョンを終了