かんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

CSS3では、要素の配置を変える方法がたった数行でできるようになりました。

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

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

そのフレックスの全機能を解説します。

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

これを書く一番の理由は『自分の教科書』のためです。よく忘れるので、『ほかのサイトを毎回見るなら自分で書いてしまえ』になりました。

フレックスは、前はフレックスボックスと呼ばれました。実際に指定するときも"flexbox"を使っていたくらいです。

(プレフィックスの指定では残っています。)

でも、CSS3で勧告されたときに正式に『flex』になりました。『フレックスボックス』は、昔の言い方で非公式な名称だと思ってください。

フレックスを使う

まずはフレックスの使い方です。細かい設定は説明しません。『フレックスはどういうものか』『使うにはどうしたらいいのか』の基本編です。

ダイジェスト

フレックスを使う
.container {
  display: flex;
}
並びの方向を変える。行詰め・折り返しを切り替える
.container {
  flex-flow: row wrap;
}

フレックスのしくみ

css3 flex image

くわしい説明

基本編の各機能は大きく3つに分けました。上から順に優先度が高いです。また、学びやすい順序にもなっています。

フレックスの細かい調整や便利な機能

ダイジェスト

アイテムの順序を変える
.items {
  order: 1;
}
アイテムの拡大・縮小・サイズ指定
.items {
  flex: 0 1 auto;
}
並びの方向の上下左右・中央寄せ
.container {
  justify-content: center;
}
クロス方向の上下左右・中央寄せ
.container {
  aligin-items: center;
}
クロス方向の上下左右・中央寄せのアイテム個別指定
.items {
  aligin-self: center;
}
クロス方向の上下左右・中央寄せ(折り返し複数行バージョン)
.container {
  aligin-content: center;
}

くわしい説明

基本編だけでフレックスを使うということはまずありません。フレックスには細かい調整ができたり、便利な機能のプロパティがたくさんあります。

それらを使うと、今まで複雑な高度なテクニックが必要だったことが、サクッとかんたんにできるようになります。

まとめ

フレックスは、CSSの難しいものの1つだった、コンテンツを上下左右に自由に並び替える作業をかんたんに解決しました。

Webページ作成ではあまり恩恵を受けないかもしれませんが(それでも大きく改善された)、Webアプリを作成する人にとってはありがたい機能です。

CSS3を学ぶ人にとっては必ず身につけておいた方がよい機能です。というか、フレックスはCSS3の新機能の代表格で必ず耳にします。これを身につけていないWebのエンジニアはいません。

かんたんCSS3 flexを使ってコンテンツを自由に操ろう!
次のページ
HTML&CSSの本
post-cta-image

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

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


HTML&CSSの本2選

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

*

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

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