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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
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のタブ)を『コンテナ』、すぐ下の子要素を『アイテム』と言います。

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

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

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

<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
この記事を気に入ったらぜひシェアも!!