CSS3では、要素の配置を変える方法がたった数行でできるようになりました。
フレックスです。これで、ナビゲーション（メニュー、パンくずリスト）などはとてもかんたんに作れます。
Webアプリなど高度なコンポーネント配置の操作でも使えます。
そのフレックスの全機能を解説します。
2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
これを書く一番の理由は『自分の教科書』のためです。よく忘れるので、『ほかのサイトを毎回見るなら自分で書いてしまえ』になりました。
フレックスは、前はフレックスボックスと呼ばれました。実際に指定するときも"flexbox"を使っていたくらいです。
（プレフィックスの指定では残っています。）
でも、CSS3で勧告されたときに正式に『flex』になりました。『フレックスボックス』は、昔の言い方で非公式な名称だと思ってください。
フレックスを使う
まずはフレックスの使い方です。細かい設定は説明しません。『フレックスはどういうものか』『使うにはどうしたらいいのか』の基本編です。
ダイジェスト
.container {
display: flex;
}.container {
flex-flow: row wrap;
}
くわしい説明
基本編の各機能は大きく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のむずかしいもののひとつだった、コンテンツを上下左右に自由に並び替える作業をかんたんにしました。
Webページ作成ではあまり恩恵を受けないかもしれませんが（それでも大きく改善された）、Webアプリを作成する人にとってはありがたい機能です。
CSS3を学ぶ人にとっては必ず身につけたい機能です。というか、フレックスはCSS3の新機能の代表格で必ず耳にします。これを身につけていないWebのエンジニアはいません。
