menu
menu

キーワード検索

 

最近の投稿

display:flexについて【CSS3リファレンス】

  • Labs

CSS3

こんにちは(・∀・)

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

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

displayプロパティの値

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

CSS3で追加された値boxの変更の流れ
仕様1(2009年) 仕様2(2011年) 最新仕様
display: box display: flexbox display: flex
値flexに関連するプロパティ

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

仕様1(2009年) 仕様2(2011年) 最新仕様
box-orient
box-direction
flex-direction flex-direction
*box-orientとbox-directionはflex-directionに統合されました。
box-pack flex-pack justify-content
box-align flex-align align-items
- flex-item-align align-self
- flex-line-pack align-content
box-lines flex-wrap flex-wrap
- flex-flow flex-flow
box-ordinal-group flex-order order
box-flex
box-flex-group
flex flex
flex-grow
flex-shrink
flex-basis
サンプル

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

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
子要素1
子要素2
子要素3

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


justify-contentプロパティ

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

CSS

.oya-youso2 {
  display: flex;
  justify-content: center;
}
Result
子要素1
子要素2
子要素3

flex-directionプロパティ

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

CSS

.oya-youso3 {
  display: flex;
  flex-direction: column;
}
Result
子要素1
子要素2
子要素3

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
子要素1
子要素2
子要素3

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
子要素1
子要素2
子要素3

関連リンク

display【CSSリファレンス】

  • カテゴリー:Labs