【Webデザイン CSS】レイアウト・モジュールflexboxを使いましょう

【Webデザイン CSS】レイアウト・モジュールflexboxを使いましょう

flexbox。
CSS3になって初の一次元レイアウト用のモジュールとして登場しました。
それまではレイアウト用モジュールが無かったので変遷としては<frame>や<table>などのタグをを使ったレイアウトから始まりました。
個人的には<table>は直感的で使い易くW3Cの「タグをレイアウト・モジュールとして使うのは目的では無くやめましょう。」というのがなければ今でも使いたいところです。
そしてfloatを使ったレイアウトになって使い始めは「なんで、これができんのや！！」と独り言を飲み込んでいましたが、なんとか使いこなすことが出来ました。

flexbox登場

そんな中flexboxが登場しました。
当然、flexboxは使い易く、一番シンプルに感動したのは簡単に上下を揃えることが出来たことです。
良いことだらけのflexboxで唯一のウィークポイントが対応しているブラウザが少ないということでした。
これが一番歯軋りするところで、せっかくflexboxで組んでも表示しなければ、ただの英語です。
やっと対応ブラウザが大半を占め、現在ではこのブログを含めほぼflexboxでレイアウトを組んでいます。

flexboxを実践

それではflexboxを使ってタイトル、メニューの横一線のレイアウトをやってみます。
下記のHTMLを用意しました。

HTML

<header>
  <h2>ページタイトル</h2>
  <nav>
    <ul>
      <li><a href="#">メニューA</a></li>
      <li><a href="#">メニューB</a></li>
      <li><a href="#">メニューC</a></li>
      <li><a href="#">メニューD</a></li>
    </ul>
  </nav>
</header>

そして<h2>と<nav>をflexboxを使って横並びにしてみます。
flexboxはモジュールの名称で正式に記述する場合はdisplayプロパティを使います。
値はflexです。
flexの特徴ですが横に並べたい要素の親要素に設定します。
横に並ぶのは子要素にになります。
ちなみに孫要素やひ孫要素は並びません。
それではCSSです。

CSS

header{
  display: flex;
  justify-content: space-between;
}

justify-content: space-between;は両端揃えの設定です。
最初から値として用意されています。
横に並ぶのは<h2>と<nav>だけなのでメニューの<li>をflexを使って横に並べてみます。

CSS

header ul{
  display: flex;
  list-style-type: none;
}