ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

そこが知りたい、Flexbox

全4回

CSS Flexible Box Layout Moduleによるカラムレイアウトの仕様を詳しく解説。また、レスポンシブレイアウトなどに役立つ使用頻度の高い実装例を、仕組みとともに紹介します。

基本的な仕様は変わっていません。仕様策定が続いていますので、最新仕様については仕様書もご確認ください。(2019.05.16)

最終回 Flexboxを実践する 2

Flexboxを用いて、横並びのリンクの位置や、並んだカラム内の要素の高さを揃えるなど、実務に役立つ手法を解説します。また、Flexboxでできないこともポイントとして押さえておきましょう。

第3回 Flexboxを実践する 1

2回に渡って解説したFlexboxのプロパティを使って、実践的なレイアウト例を解説します。よく見かける、いわば普段の業務で頻出するレイアウトですので、これからの実装にも役立つでしょう。

第2回 仕様を知る 2

フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。

第1回 仕様を知る 1

この記事では、CSS Flexible Box Layout Moduleによるカラムレイアウトの仕様を解説します。フレックスコンテナと、フレックスアイテム、それぞれに設定できるプロパティを紹介します。