コーディング

便利なcss3レイアウト、Flexboxでできること

2016.04.14

2017.05.24

カラフルなチョーク

Flexboxとは、正式にはフレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)といわれるもので、CSS3で採用されたボックスレイアウトの進化系とでも言うべきものです。 今まで様々なプロパティーを組み合わせたりJavaScriptを使って実現していたようなレイアウトも、Flexboxで手軽に実装できます。

Flexboxの基本構造

Flexboxは、「flexコンテナ」という親要素と、その中にある「flexアイテム」と呼ばれる子要素で構成されます。それぞれに独自のプロパティを持ち、レイアウトの制御を行います。
CSSで「display:flex」と指定した要素がflexコンテナに、その子要素が自動的にflexアイテムと定義されます。

160413_img01

Flexboxでできる便利なこと一例

要素を並べる方向を指定できる。

flortやdisplay:tableと各種プロパティを組み合わせて実現していた要素の並び順の操作を、1つのプロパティで制御できます。

160413_img02

横並びにした子要素の高さが揃えられる。

従来では実現が難しかったですが、これも1つのプロパティで制御できます。

要素の上下中央揃えを指定できる。

従来では実現が複雑でしたが、1つのプロパティで制御できます。

要素間のスペースの調整ができる。

子要素の横幅を指定したまま要素間を均等に空けて整列、と、画像編集ソフトのような制御が行えます。

ボックス内の要素の並ぶ順番を指定できる。

htmlの記述順に関わらず、子要素の見た目の順番を制御することができます。

160413_img03

レスポンシブレイアウトとの親和性が高いので、有効に活用していきましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。