私は混乱しています。この CSS プロパティを発見しました: display:box; display: block、inline、inline-block ではまだ実現できなかった CSS への影響がわかりません。
誰でもこれについて教えてもらえますか?前もって感謝します。
私は混乱しています。この CSS プロパティを発見しました: display:box; display: block、inline、inline-block ではまだ実現できなかった CSS への影響がわかりません。
誰でもこれについて教えてもらえますか?前もって感謝します。
これは、新しい flexbox モジュールの一部です。ワーキングドラフトから:
フレックスボックス レイアウト モデルでは、フレックスボックスの子は任意の方向にレイアウトでき、未使用のスペースを埋めるために拡大するか、親からオーバーフローしないように縮小してサイズを「変更」できます。子の水平方向と垂直方向の配置は、簡単に操作できます。これらのボックスのネスト (垂直内の水平、または水平内の垂直) を使用して、2 次元のレイアウトを構築できます。
これはまだ草案の仕様ですが、ブラウザで完全に実装されるまで試す価値があります。おそらく多くの場合、フロートを取り除くことができます!
display:box
は を支持してすでに廃止されていることに注意してくださいdisplay:flexbox
。
最後になりましたが、 w3schools に依存しないでください。
詳細については、こちらを参照してください。
簡単な要約:
CSS 3 では、CSS 1 および 2 の従来のボックス モデルに加えて、まったく新しいボックス モデルが導入されています。柔軟なボックス モデルは、ボックスが他のボックス内に分散される方法と、使用可能なスペースを共有する方法を決定します。
このボックス モデルは、XUL (Firefox で使用されるユーザー インターフェイス言語) で使用されるものと似ています。他の一部の言語では、XAML や GladeXML など、同様のボックス モデルが使用されています。
通常、フレキシブル ボックス モデルは、ブラウザ ウィンドウのサイズに適応する柔軟なレイアウトや、フォント サイズに適応する伸縮自在なレイアウトを作成する場合に必要なものです。
...
デフォルトでは、従来の CSS ボックス モデルは、HTML フローに応じてボックスを垂直に配置します。フレキシブル ボックス モデルでは、順序を明示的に指定できます。逆にすることもできます。フレキシブル ボックス モデルに切り替えるには、子ボックスを持つボックスのプロパティ表示を値ボックス (またはインライン ボックス) に設定します。
MDNのドキュメントをご覧ください。
CSS
box-orient
プロパティは、要素がコンテンツを水平または垂直にレイアウトするかどうかを指定します。たとえば、XUL
box
とhbox
要素はデフォルトでコンテンツを水平にレイアウトしますが、XULvbox
要素はデフォルトでコンテンツを垂直にレイアウトします。HTML DOM 要素は、デフォルトでインライン軸に沿ってコンテンツをレイアウトします。この CSS プロパティは、またはの CSS
display
値を持つ HTML 要素にのみ適用されます。box
inline-box
表示:ボックスは次のことを可能にします:
新しいボックスモデルは、追加のJavaScript計算なしでは古いモデルではできないことを実行できますが、それほど多くはありません