CSS3 フレキシブルボックスレイアウト

display: flex

通常横並びさせるにはdisplay:inline-blockを子要素に対して指定しますが、display:flexでは親要素に指定することで子要素をフレキシブルに横並びにすることができます。

基本スタイル

ul {
  display: flex;
  padding: 1em;
  background-color: #000;
}

ul li {
  width: 100px;
  height: 50px;
  list-style-type: none;
  padding: 0.5em;
  background-color: #fff;
}

表示例
display: flex有り

• content
• content
• content
• content

display:flex無し

• content
• content
• content
• content

flex-directionプロパティ

子要素の並び方向を指定するプロパティです。ボックスの親要素(ul)に指定します。

• column 縦方向
• row 横方向

何故か逆なので注意

justify-contentプロパティ

ボックスの整列方法を指定するプロパティです。

• flex-start 左寄せ
• flex-end 右寄せ
• center センタリング
• space-between 均等に配置
• space-around 余白が全て同一になるように配置
• inherit 親要素から継承

• content
• content
• content
• content

• content
• content
• content
• content

• content
• content
• content
• content

• content
• content
• content
• content

• content
• content
• content
• content

flex-wrapプロパティ

はみ出したらどうするかを指定するプロパティです。

• nowrap 1行に収める
• wrap 1段落とす
• wrap-reverse wrapから順番を逆にする

align-itemsプロパティ

垂直方向に対してのレイアウト(↑揃えセンターか)を指定する方法です。

• flex-start
• flex-end
• center
• baseline
• stretch