96

昨日、CSS 3 flexbox ステートメントを使用する学校の Web サイトを取得しました。私は前にそれを使用したことはありません。だから私はそれを少しグーグルで調べて、フレックスボックスステートメントのさまざまなスタイルをたくさん見つけました.

書く人もいればdisplay: box;、使う人display: flexbox;もいますdisplay: flex;。

違いは何ですか？どちらを使用する必要がありますか?

4

3 に答える 3

169

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

ポール・アイリッシュの引用

警告: Flexbox は大幅な改訂が行われたため、この記事は古くなっています。要約すると、この記事の基になっている古い標準 (Flexbox 2009)は、v4 以降の Chrome、v2 以降の Firefox、および IE10 ベータ版で実装されました。

それ以来、新しいフレックスボックス標準がデビューし、Chrome 17 でデビューし始めました。Stephan Hay は、新しいフレックスボックスの実装に関するガイドを書きました。それ以来、仕様の命名が変更され、Chrome 21 に導入されました。Chrome 22 では、最新の仕様が安定して実装されています。

この時点で、どちらを実装してもリスクがあるため、注意してください。

これは、さまざまなフレックスボックス ステートメントに関するブログです。
これは、さまざまなバージョンに関する css-tricks によるブログ エントリです。

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

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

編集:
まだ誰もがフレックスボックス レイアウトを表示できるブラウザー/デバイスを持っているわけではありません。したがって、フォールバック ソリューションまたは代替手段については、 flexbox を使用せずに flexbox を使用する方法に関する Kenan Yusuf による記事があります。

于 2013-04-29T13:38:58.483 に答える
10

仕様は何度も繰り返されてきました。2009年、2012 年、2013 年と値が変更されるたびに参照してください。display: flex;が最新です。

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

于 2013-04-29T13:42:17.340 に答える
3

表示: フレックス; 現在、コードで使用できる最新のより良いバージョンです。

だからそれに行きなさい。

于 2014-12-12T14:38:04.257 に答える