現代Webデザインの基本!CSS Flexboxの使い方を徹底解説 Part1-基本編- | 株式会社Esolab

ARTICLE

記事ページ

記事ページ

現代Webデザインの基本!CSS Flexboxの使い方を徹底解説 Part1-基本編-

DESIGN

CSS Flexbox(Flexible Box Layout Module)とはCSS3から導入された柔軟なレイアウトを実現できるCSSの新しいレイアウトモジュールです。

近年、モバイルデバイスの普及により様々な画面サイズにWebサイトを適応させなくてはいけなくなり、レスポンシブデザインへの対応は必須です。

以前であれば、要素の横並びにfloatやinline-blockなどを使用していたかもしれませんが、正直時代遅れであるといっていいでしょう。

そんな面倒なことはしなくても、このFlexboxを使えば簡単に、しかも少ないコードで実現させることができます!

では実際にFlexboxの使い方を複数パートに分けてみていきましょう。

Flexboxの基本

Flexboxは2つの要素によって構成されています。

それが

  • Flexコンテナ(親要素)
  • Flexアイテム(子要素)

です。

まずはこのイメージを持っておきましょう。

次に例として、以下のようなHTMLを用意しましょう。

See the Pen flexbox base by akiraman786 (@akiraman786) on CodePen.

すると子要素が縦に並んでいると思います。

ではこの親要素であるcontainerクラスに display: flex;を指定してみましょう。

See the Pen flexbox base by akiraman786 (@akiraman786) on CodePen.

すると要素が横並びになりましたね!

こんなに簡単に要素を横並びにすることができました。便利ですよね!

これでFlexboxの基本は把握できたかと思います。

次回のPart2からは、Flexboxの様々なプロパティについて説明していこうと思います。

では、また次回!

この記事を書いた人

田川烈

開発部 フロントエンジニア

アーカイブ

カテゴリー

  • TECH (13)
  • DESIGN (6)
  • SEO (3)
  • MARKETING (3)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ