【Labs】display:flexについて

こんにちは（・∀・）

displayプロパティにCSS3で追加された値boxですが、その後何度かの仕様変更を経てflexという値に変更されました。

boxの頃はIEがまったく対応しておりませんでしたので使うに使えない値でしたが、box → flexbox → flexへと変更になりIEでも使用することが出来るようになりました(IE11以上)。自動で高さを他のカラムに揃えるなどとても使い勝手が良い値なので今後floatに代わってレイアウトで使用することになるのは確実ですね。

displayプロパティの値

CSS3で新しく追加されたdisplayプロパティの値boxが変更になっております。

CSS3で追加された値boxの変更の流れ

値flexに関連するプロパティ

displayプロパティの値の変更に伴い関連するプロパティも変更になっております。

サンプルを使用して実際にどうなるのか見てみましょう。

display:flex

横並びにしたい要素の親要素にdisplay:flexを記述すると...

HTML

<div class="oya-youso">
<div class="ko-youso1">子要素1</div>
<div class="ko-youso2">子要素2</div>
<div class="ko-youso3">子要素3</div>
</div>

CSS

.oya-youso {
  display: flex;
}

Result

子要素は横並びになります。

justify-contentプロパティ

display:flexで横並びが簡単にできました。justify-contentプロパティを使用して子要素を右寄せや中央寄せにすることができます。次に子要素を中央寄せで横並びにしてみましょう。display:flexとjustify-content:centerで中央寄せの横並びになります。

CSS

.oya-youso2 {
  display: flex;
  justify-content: center;
}

Result

flex-directionプロパティ

flex-directionプロパティを使用して子要素を表示する方向を指定します。縦横と並び順を指定することができます。次に値columnを指定して子要素を縦並びにしてみます。display:flexとflex-direction:columnで子要素が縦並びになります。

CSS

.oya-youso3 {
  display: flex;
  flex-direction: column;
}

Result

orderプロパティ

orderプロパティを使用すれば表示するカラムの順番を指定することができます。親要素にdisplay:flex、子要素にorderプロパティを指定して表示する順番を指定します。

CSS

.oya-youso4 {
  display: flex;
  justify-content: center;
}
.oya-youso4 .ko-youso1 {
  order: 2;
}
.oya-youso4 .ko-youso2 {
  order: 1;
}
.oya-youso4 .ko-youso3 {
  order: 3;
}

Result

flexプロパティ

子要素にflexプロパティを指定すると、flexプロパティを指定された子要素は親要素の範囲内で伸縮するようになります。親要素にdisplay:flex、伸縮させたい子要素にflex:1を指定します。

CSS

.oya-youso5 {
  display: flex;
  justify-content: center;
}
.oya-youso5 .ko-youso1 {
  width: 50px;
}
.oya-youso5 .ko-youso2 {
  flex: 1;
}
.oya-youso5 .ko-youso3 {
  width: 70px;
}

Result

関連リンク

【CSS3リファレンス】display