4

私は混乱しています。この CSS プロパティを発見しました: display:box; display: block、inline、inline-block ではまだ実現できなかった CSS への影響がわかりません。

誰でもこれについて教えてもらえますか？前もって感謝します。

4

4 に答える 4

10

これは、新しい flexbox モジュールの一部です。ワーキングドラフトから：

フレックスボックス レイアウト モデルでは、フレックスボックスの子は任意の方向にレイアウトでき、未使用のスペースを埋めるために拡大するか、親からオーバーフローしないように縮小してサイズを「変更」できます。子の水平方向と垂直方向の配置は、簡単に操作できます。これらのボックスのネスト (垂直内の水平、または水平内の垂直) を使用して、2 次元のレイアウトを構築できます。

これはまだ草案の仕様ですが、ブラウザで完全に実装されるまで試す価値があります。おそらく多くの場合、フロートを取り除くことができます!

display:boxは を支持してすでに廃止されていることに注意してくださいdisplay:flexbox。

最後になりましたが、 w3schools に依存しないでください。

于 2012-04-21T02:38:29.277 に答える
3

詳細については、こちらを参照してください。

簡単な要約:

CSS 3 では、CSS 1 および 2 の従来のボックス モデルに加えて、まったく新しいボックス モデルが導入されています。柔軟なボックス モデルは、ボックスが他のボックス内に分散される方法と、使用可能なスペースを共有する方法を決定します。

このボックス モデルは、XUL (Firefox で使用されるユーザー インターフェイス言語) で使用されるものと似ています。他の一部の言語では、XAML や GladeXML など、同様のボックス モデルが使用されています。

通常、フレキシブル ボックス モデルは、ブラウザ ウィンドウのサイズに適応する柔軟なレイアウトや、フォント サイズに適応する伸縮自在なレイアウトを作成する場合に必要なものです。

...

デフォルトでは、従来の CSS ボックス モデルは、HTML フローに応じてボックスを垂直に配置します。フレキシブル ボックス モデルでは、順序を明示的に指定できます。逆にすることもできます。フレキシブル ボックス モデルに切り替えるには、子ボックスを持つボックスのプロパティ表示を値ボックス (またはインライン ボックス) に設定します。

于 2012-04-21T02:25:29.130 に答える
2

MDNのドキュメントをご覧ください。

CSSbox-orientプロパティは、要素がコンテンツを水平または垂直にレイアウトするかどうかを指定します。

たとえば、XULboxとhbox要素はデフォルトでコンテンツを水平にレイアウトしますが、XULvbox要素はデフォルトでコンテンツを垂直にレイアウトします。

HTML DOM 要素は、デフォルトでインライン軸に沿ってコンテンツをレイアウトします。この CSS プロパティは、またはの CSSdisplay値を持つ HTML 要素にのみ適用されます。boxinline-box

于 2012-04-21T02:23:46.790 に答える
1

表示:ボックスは次のことを可能にします:

  • box-orient、box-direction、box-ordinal-group によるボックスの柔軟な分布... 垂直から水平へだけでなく、別のボックス内のボックスの正規分布を変更できます (インライン、インライン ブロック、またはブロックによって達成できます)。いくつかのフロート トリックを使用) だけでなく、逆の順序 (水平方向の逆の順序は、いくつかのフロート トリックによって達成できます) であり、明示的な順序でもあります。
  • 柔軟なサイズ設定: ボックスのサイズは、明示的なサイズ (高さ、幅、最大高さ、最大幅などを使用)、または親ボックスと使用可能なスペースのサイズ (box-flex を使用) として計算できます。
  • box-align、box-pack、box-lines を使用して使用可能なスペースを処理します...

新しいボックスモデルは、追加のJavaScript計算なしでは古いモデルではできないことを実行できますが、それほど多くはありません

于 2012-04-21T02:50:18.920 に答える