2023年2月 – Abridge-News

フレキシブルボックス(フレックスボックス)を利用すると、ボックスを横並び、横幅、高さをフレキシブルにコントロールすることができ、floatよりも柔軟にレイアウトを組むことができます。

使い方

displayプロパティを「display:flex」と指定して、フレックスコンテナを構成します。

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

レイアウトの調整

次のプロパティを利用してレイアウトを調整していきます。

プロパティ	説明
flex / gap	フレックスアイテムの横幅と間隔を指定する ★当記事はこちらをご紹介★
order / flex-direction / flex-wrap	フレックスアイテムの並び順・並べる方向を指定する
justify-content / align-items / align-self / align-content / margin	フレックスアイテムの位置揃えを指定す

フレックスアイテムー横幅と間隔ー

フレックスアイテムの横幅をflexプロパティで、間隔をgapプロパティで調整します。

プロパティ	説明
flex	フレックスアイテムの横幅を指定する
gap	フレックスアイテムの間隔を指定する

flex

flexプロパティでは、伸長比、縮小比、フレックスコンテナのサイズ指定に応じてフレックスアイテムの横幅を決定します。

flexの伸長比

フレックスアイテムの横幅の合計よりもフレックスコンテナが大きい場合、フリースペースをフレックスアイテムに配分します。
例えば、フレックスコンテナの横幅を900pxに指定した場合、300pxのフリースペースができます、このとき、a～cの伸長比をそれぞれ「1」とした場合、フリースペースが「1：1：1」の比率で分割されます。
その結果、100pxずつ配分され、200px、300px、400pxになります。

(a) 適用後：200px(100px + 100px)
(b) 適用後：300px(200px + 100px)
(c) 適用後：400px(300px + 100px)

コード例

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

変化が分かりづらいので、伸長比率を「0」「4」「1」にした場合、フリースペース(300px)を0:4:1の比率で配分されます。

(a) 適用後：100px(100px + 0px)
(b) 適用後：440px(200px + (300px * 4/5))
(c) 適用後：360px(300px + (300px * 1/5))

コード例

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

問題です！伸長比率を「2」「1」「2」にした場合、フリースペースはどのように配分されるのでしょうか？

答え

(a) 適用後：220px(100px + (300px * 2/5))
(b) 適用後：260px(200px + (300px * 1/5))
(c) 適用後：4200px(300px + (300px * 2/5))

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

flexの縮小比

フレックスアイテムの横幅の合計よりもフレックスコンテナが小さい場合、フレックスコンテナ横幅サイズ値からフレックスアイテムの横幅の合計を差し引いた値を元に縮小します。

例えば、フレックスコンテナの横幅を480px指定した場合、120pxのフリースペースができます。このとき、a～cの縮小率を「1」とした場合、ベースとなるサイズに縮小率を掛け合わせた100:200:300の比率で分割され、(a)に-20px、(b)に-40px、(c)に-60px配分されます。
その結果、(a)に80px、(b)に160px、(c)に240pxになります。

(a) 適用後：80px(100px-(120px * 1/6))
(b) 適用後：160px(200px-(120px * 2/6))
(c) 適用後：240px(300px-(120px * 3/6))

コード例

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

これまた、変化が分かりづらいので、縮小比率を「3」「2」「1」にした場合、フリースペース(120px)をベースとなるサイズに縮小率を掛け合わせた300:400:300の比率で分割されます。

その比率(3 00 :4 00 :3 00)の結果、それぞれの横幅は、(a)に64px、(b)に152px、(c)に264px配分されます。
(a) 適用後：64px(100px-(120px * 3/10))
(b) 適用後：152px(200px-(120px * 4/10))
(c) 適用後：264px(300px-(120px * 3/10))