menu
menu

キーワード検索

display【CSS3リファレンス】

  • CSS

display

こんにちは(・∀・)

CSS3で新しく追加された値をご紹介します。今回ご紹介するのはdisplayプロパティの値boxです。

値boxは仕様変更によりbox(2009年) → flexbox(2011年) → flex(2015年) と変更されました。

概要

CSS3でdisplayプロパティに新しく値boxが追加されました。この値を指定したブロックレベルの子要素はすべて左から順に並べて配置されます。その際すべての子要素は親要素の高さに揃えて配置されます。​

横に並べるか縦に並べるかはbox-orientで設定できます。並べる順序を逆にしたい場合はbox-direction、順序を個別に指定したい場合はbox-ordinal-group使用して設定します。

子要素は初期値ではすべて親要素の高さに揃えられますが、個別に設定する事もできます。それら子要素の配置も中央、上下左右好きな側に揃えて配置する事もできます。また、子要素の幅が親要素よりも小さい場合は余った幅を任意の子要素に分配する事もできます。

上記値boxは仕様変更によりbox → flexbox → flexと変更されました。それにともないbox-orient → flex-direction、box-direction → flex-direction(box-orientとbox-directionはflex-directionに統合されました。)、box-ordinal-group → flexorder → orderに変更されました。


.sample {
	display: -webkit-flex;
	display: flex;
}
仕様変更箇所
displayプロパティの値
仕様1(2009年) 仕様2(2011年) 最新仕様
display: box display: flexbox display: flex
値box、flexbox、flexに関連するプロパティと値
仕様1(2009年) 仕様2(2011年) 最新仕様
box-orient: horizontal
box-direction: normal
box-orient: horizontal flex-direction: row
box-pack: start box-pack: start justify-content: flex-start
box-align: start box-align: start align-items: flex-start
box-ordinal-group: 1 flex-order: 1 order: 1
box-flex: 1 flex: 1 flex: 1

box-orientとbox-directionはflex-directionに統合されました。

適用要素

すべての要素

指定できる値
flex、inline-flex
この値を設定するとその子要素はフレキシブル・ボックス・レイアウトになります。
初期値

flex
inline-flex

サンプルデモ

サンプルデモ1

サンプルデモ2

サンプルデモ3

HTML

<div class="css3-demo">
<p class="demo1">サンプルデモ1</p>
<p class="demo2">サンプルデモ2</p>
<p class="demo3">サンプルデモ3</p>
<!--css3-demo--></div>
CSS

.css3-demo {
	display: -webkit-flex;
	display: flex;
}

サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

IEは11(10は要Vendor-Prefix)以上。

  • カテゴリー:CSS