web-dev-qa-db-ja.com

CSS3 Flexbox：ディスプレイ：box vs. flexbox vs. flex

昨日、学校にCSS 3 flexboxステートメントを使用するWebサイトがありました。私はそれを使用したことがありません。それで、私はそれを少しグーグルで調べて、多くの異なるスタイルのflexboxステートメントを見つけました。

ある人はdisplay: box;を書き、ある人はdisplay: flexbox;を使い、他のdisplay: flex;を使います。

それで、違いは何ですか？どちらを使うべきですか？

cssflexbox
66
user1722486

これらは異なるスタイルです。
display: box;は2009年のバージョンです。
display: flexbox;は2011のバージョンです。
display: flex;は実際のバージョンです。

Paul Irishの名言

警告：Flexboxにはいくつかの大きな改訂が加えられているため、この記事は古くなっています。要約すると、この記事の基になっている 古い標準（Flexbox 2009） は、v4以降のFirefox、v2以降のFirefox、およびIE10ベータでChromeに実装されました。

それ以来、 新しいflexbox標準がデビュー され、Chrome 17でデビューし始めました。StephanHayは 新しいガイドを作成しましたflexbox implementation 。それ以来、仕様の名前が変更され、Chrome 21に上陸し始めました。Chrome 22には、最新の仕様が安定して実装されています。

この時点で、 の実装にはリスク があるため、注意してください。

Here は、さまざまなflexboxステートメントに関するブログです。
This は、css-tricksによるさまざまなバージョンに関するブログエントリです。

フレックスボックスを使用するときは、常に次のように記述します。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

編集：
それでも、flexboxレイアウトを表示できるブラウザー/デバイスを持っているわけではありません。フォールバックソリューションまたは代替案については、 この記事 ケナンユスフによるflexboxを使用せずにflexboxを使用する方法があります。 。

127
Michael Schmidt

仕様は多くの反復を経てきました。 2009 、 2012 、 201 、および値が変更されるたびに参照してください。 display: flex;は最新です。

まだドラフト仕様なので、現在の実装は変更される可能性があります。

9
andyb

ディスプレイ：flex;現在、最新のより良いバージョンであり、コードで使用できます。

そのために行きます。

1
johnie