フレキシブルボックスを使用すれば、floatを使用せずに横並びにできます。
今まで難しかった、ブロック内での子要素の「上下左右の中央揃え」「下揃え」「均等揃え」などが安易にできるようになります。
まだ正式な物ではないので、講義用のサンプルサイトは、chrome or safariで確認しましょう。
■参考サイト
・フレキシブルボックスレイアウト
・CSS3プロパティ一覧（モジュール別）
◆display: flex（値）
【旧記述】display: box;
【新記述】display: flex;
指定された要素内のブロック要素（div や dl や p など）は、自動的に横並びになり、
かつ最大の高さを持つ要素に高さを揃えてくれる。
◆box-sizingプロパティ
ボックスサイズ(width, height) の算出方法を指定することができる。
[値]
・content-box
・border-box
・inherit
◆box-orient【旧】／flex-direction【新】プロパティ
box-orient プロパティは、ボックスの子要素を水平または垂直にレイアウトするかどうかを指定する。
[旧値]
・horizontal
・vertical
・inline-axis
・block-axis
・inherit
[新値]
・row
・row-reverse
・column
・column-reverse
◆box-ordinal-group【旧】／order【新】プロパティ
【読み】ボックス-オーディナル-グループ【旧】/オーダー【新】
box-ordinal-groupプロパティは、ボックス内の子要素に並び順を割り当てる際に使用する。
[値]
・自然数（0を含まない正の整数）で子要素の並び順を指定できる。
※初期値は1
◆box-pack【旧】／justify-content【新】プロパティ
ボックス内の子要素の横方向の配置を指定する際に使用。
ボックス内にスペースが余った場合に、そのスペースをどのように要素間に割り付けるかを
指定することが出来る。
[旧値]
・start：
・end
・center
・justify(ジャスティファイ)/均等揃え
[新値]
| flex-start | 内部のボックスを、フレキシブルボックスの先頭に詰めて配置します。（初期値） |
| flex-end | 内部のボックスを、フレキシブルボックスの末尾に詰めて配置します。 |
| center | 内部のボックスを、フレキシブルボックスの中央に詰めて配置します。 |
| space-between | 内部のボックスを、フレキシブルボックス全体へ均等に配置します。先頭と末尾は詰めて配置されます。 |
| space-around | 内部のボックスを、フレキシブルボックス全体へ均等に配置します。先頭と末尾にはスペースが入ります。 |
◆box-align【旧】／align-items【新】プロパティ
box-alignプロパティは、ボックス内の子要素の縦方向の揃え位置を指定する際に使用する。
[旧値]
・start
・end
・center
・baseline
・stretch（初期値）
[新値]
| flex-start | ボックスの先頭をフレックスボックスの斜め軸に沿った先頭位置に揃えます。 |
| flex-end | ボックスの末尾をフレックスボックスの斜め軸に沿った末尾位置に揃えます。 |
| center | ボックスをフレックスボックスの斜め軸に沿って中央で揃えます。 |
| baseline | ボックスを基準となるフレックスボックスの斜め軸のベースラインに揃えて配置します。 |
| stretch | ボックスをフレックスボックスの斜め軸に沿って自動的に揃えます。（初期値） |
displayプロパティ値は①box、②flexbox、③flexの順で変わってきました。そして、この3時代に応じて、他のプロパティも、名称が変更されています。
| 現在のプロパティ③ | 過去のプロパティ① | 概要 |
|---|---|---|
| 過去のプロパティ② | ||
|
||
| フレックス コンテナ側の指定（親要素） | ||
| display:flex | display:box | ブロックレベル表示のコンテナを生成（displayプロパティ値） |
| display:flexbox | ||
| display:inline-flex | 該当なし | インライン表示のコンテナを生成（displayプロパティ値） |
| 該当なし | ||
| flex-direction | box-direction | アイテムの並び順を軸方向に従って正順、逆順で指定 |
| flex-direction | ||
| flex-wrap | 該当なし | コンテナのサイズを越えたアイテムの改行方法を指定 |
| flex-wrap | ||
| flex-flow | 該当なし | コンテナのサイズを越えたアイテムの改行方法を指定 |
| 該当なし | ||
| justify-content | box-pack | アイテムの主軸方向の整列方法を指定 |
| flex-pack | ||
| align-items | box-align | アイテムの、交差軸方向の整列方法を指定 |
| flex-align | ||
| align-content | 該当なし | 複数行にわたるアイテムの、交差軸方向の整列方法を指定 |
| 該当なし | ||
| フレックス アイテム側の指定（子要素） | ||
| order | box-ordinal-group | アイテムの並び順を数値で指定 |
| flex-order | ||
| flex | box-flex | アイテムに割り当てる幅を指定 |
| flex | ||
| flex-grow | 該当なし | アイテム内の余白の取り方を指定 |
| 該当なし | ||
| flex-shrink | 該当なし | アイテム内の余白の取り方を指定 |
| 該当なし | ||
| flex-basis | 該当なし | アイテム内の余白の取り方を指定 |
| 該当なし | ||
| align-self | 該当なし | アイテムの、交差軸方向の整列方法を指定 |
| 該当なし | ||