かんたんCSS3 flexを使ってコンテンツを自由に操ろう!

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
css3 image
イラストACの画像をもとに加工しています。

CSS3では、コンポーネントの配置を変える方法がたった数行でできるようになりました。

フレックスです。これで、ナビゲーション(メニュー、パンくずリスト)などはとてもかんたんに作ることができます。

Webアプリなど高度なコンポーネント配置の操作でも使えます。

まずは、フレックスの使い方からです。2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

display: flex フレックスを使う

.container {
  display: flex;
}

CSS3でdisplayプロパティに新しい機能が追加されました。フレックスもその一つです。displayプロパティは、

  • block
  • inline
  • inline-block
  • table
  • etc...

でおなじみのやつです。かんたんなサンプルを使って動かしていきます。まずは、HTMLから。

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

HTML
<div class="sample">
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>
</div>

このまま実行しても分かりづらいので、CSSも加えます。

CSS
.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  width: 30px;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
HTML結果
1
2
3
4
5
6
7
8
9
10

タテに数字のボックスが並びました。display: block(<div>)なのであたりまえですね?

これをヨコ並びにします。CSSにクラスを追加します。

CSS
.sample .flex {
  display: flex;
}

"display: flex"を追加しました。これをHTMLのクラスに追加します。

HTML
<div class="sample">
<div class="container flex"><!-- add flex -->
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>
</div>
HTML結果
1
2
3
4
5
6
7
8
9
10

ヨコに並びました。かんたんですね? floatプロパティでやっていたことが馬鹿みたいに思えます。

フレックスは、"display: flex"を書いた要素(htmlのタブ)の、すぐ下の子の要素を『アイテム』、"display: flex"を書いた要素を『コンテナ』と言います。

コンテナはアイテムの箱になります。コンテナは並び替えの対象になりません。

アイテムは並べられる要素です。コンテナのすぐ下の子の要素が自動的にアイテムになります。

アイテムになるのは子の要素だけです。子のさらに子(孫以下)の階層はアイテムになりません。

<div>, <li>, <ol>など、もともとコンテンツの親の役割をする要素にコンテナを指定するのが一般的です。

display: inline-flex コンテナをインライン化する

flexを使うと、コンテナはブロックになります。ブロックはタテ方向にコンテンツが並びます。<div>とかそうですね?

逆に<a>など、ヨコに並ぶものをインラインと言います。インラインはヨコに並ぶので文章の中に差し込むことができます。

ブロックは左右のコンテンツに影響を受けないのでデフォルトでは横幅いっぱいに広がります。

左右にコンテンツを置けないように『ブロック』します。

一方、インラインは左右のコンテンツに差し込めるため、デフォルトの横幅は中のコンテンツのサイズに影響されます。

(中身の長さによって横幅が変わります。)

ここで、『flexをdisplayで指定したらどうやってインライン化するんだ?』というお怒りが聞こえてきそうですが、フレックスにはインラインが用意されています。

.container {
  display: inline-flex;
}

コンテナがインラインになります。アイテムのdisplayプロパティはもとのままです。(flexを指定してもアイテムのdisplayプロパティは変わりません。)

じっさいにサンプルで見てみましょう。

CSSにクラスを追加します。

CSS
.sample .inline-flex {
  display: inline-flex;
}
HTML
<div class="sample">
<div class="container inline-flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>
<div class="container inline-flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>
</div>

HTML結果です。合わせてflexも表示します。

display: flex
1
2
3
4
5
1
2
3
4
5
display: inline-flex
1
2
3
4
5
1
2
3
4
5

flexの場合、アイテムはヨコにコンテナはタテに並びました。コンテナはブロックだということが分かります。

inline-flexの場合、コンテナもアイテムもヨコに並びました。コンテナがインライン化されています。

フレックスのしくみ

displayプロパティで"flex", "inline-flex"を指定したとき、コンテナとアイテムをつくることは説明しました。

フレックスは、コンテナとアイテムを作るとき次のようなしくみを作ります。

css3 flex image

フレックスは、配置などいろいろな変更ができるので、複雑なしくみを持っているように感じますが、じっさいはたったこれだけです。

(これにアイテム内の細かいしくみはありますが、ここでは省略します。)

このシンプルなしくみで、持っているデータの組み合わせで複雑な動きをコントロールしています。

ここでは、フレックスを使うことを目的にしているので、細かい設定や変更については説明しません。

フレックスの入れ子

フレックスは入れ子にすることができます。入れ子とは、

フレックスのアイテムにフレックスのコンテナを指定して、フレックスの中にフレックスを作る

ことです。

さっき、フレックスのインライン化のことろで、『アイテムのdisplayはそのまま』と言いました。

これがフレックスの入れ子ができる理由です。フレックスのアイテムのdisplayプロパティは自由に指定できます。もちろん、"flex", "inline-flex"も使えます。

サンプルを見ていきましょう。

まずはHTMLから。

HTML
<div class="sample">
<div class="container flex">
  <div class="box">1</div>
  <div class="container flex">
    <div class="box">1-1</div>
    <div class="box">1-2</div>
    <div class="box">1-3</div>
  </div>
  <div class="box">2</div>
  <div class="container flex">
    <div class="box">2-1</div>
    <div class="box">2-2</div>
    <div class="box">2-3</div>
  </div>
  <div class="box">3</div>
</div>
</div>

CSSはいままで作ってきたものをそのまま使います。

入れ子あり
1
1-1
1-2
1-3
2
2-1
2-2
2-3
3

 

比較のために、入れ子じゃない時はこんな感じです。

入れ子なし
1
1-1
1-2
1-3
2
2-1
2-2
2-3
3

flexの中にinline-flex、inline-flexの中にflexを入れることができます。また、入れ子は何層でも入れることができます。

入れ子は何層でも入れることができますが、Webページの表示速度に影響します。

『できても使えるかどうかは実装次第』ということに注意しましょう。

まとめ

フレックスを使ってコンテンツを簡単に並べる方法をご紹介しました。

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ただ、今回の目的が『フレックスを使おう』なので、細かいことは省略しました。

ここで説明すると長くなるのでとりあえずここまでにします。

前のページ
かんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方
かんたんCSS3 flex サクッと並びとその方向を変える方法
次のページ
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!