web-dev-qa-db-ja.com

webkitボックスとboxflex

私は最近、インストラクターがこの構文を使用したチュートリアルに出くわしました。

display: -webkit-box;

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2:30（2012年8月作成）

私はこれを前に見たことがなく、それに関するいくつかの情報を見つけようとし始めました。 CSS3にはflexboxと呼ばれるものがあるようです。しかし、上記の構文の参照は見つかりませんでした。

この記事では http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/ 、上記のチュートリアルの1年前（2011年9月）に書かれました。次の構文を使用します。

display: box;

上記のボックスはフレックスボックスに置き換えられます。

flexboxまたはboxの利点が何であるかはまだわかりません。それを使用している人は見当たりません。誰かがそれの基本的な要約を与えることができますか？

また、チュートリアルで-webkit-boxを使用するのはなぜですか？ boxWebkit固有ですか？なぜ彼は使わなかったのですか

ディスプレイ：ボックス;

-webkit-boxは、SafariとChromeでのみ機能することを意味しますか？

クロスブラウザ互換の場合、どのブラウザとバージョンで動作しますか？

box（非Webkit）はクロスブラウザ互換のようです。

htmlcsswebkitflexbox
11
4thSpace

このトピックはそれを最もよく要約していると思います： http://css-tricks.com/old-flexbox-and-new-flexbox/

基本的にFlexboxには、マークアップの3つの異なる「反復」があります。古い2009マークアップ、まだ古い2011マークアップ、およびまだ正式にリリースまたはサポートされていない「新しい」マークアップです。重要です。リンクしたビデオが2012年にアップロードされたにもかかわらず、ビデオを作成した人は、非常に古い2009年のflexboxの実装を使用していることに注意してください。そのチュートリアルには従わないことをお勧めします。

その他のリソースは次のとおりです。 http://www.w3.org/TR/css3-flexbox/http://dev.w3.org/csswg/css-flexbox/

そして、私はそれを使用できますか？ http://caniuse.com/#search=flexbox

9
Michael