「Div」などのコンテナに Flex 属性スタイルを追加する必要があるのはなぜですか? _html/css

「Div」などのコンテナに Flex 属性スタイルを追加する必要があるのはなぜですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:02

オリジナル

948 人が閲覧しました

义 Flex 属性定義 x .Flexbox {

ディスプレイ: -webkit-Box;
ディスプレイ: -MS-FLEXBOX;

one Flexbox レイアウトは、フレックスコンテナ (フレックスコンテナ) と、このコンテナ内のフレックスアイテム (フレックスアイテム) で構成されます。
Flex コンテナは HTML タグ要素であり、「display」属性は「flex」属性値を明示的に設定します。フレックスコンテナ内のすべての子要素は、自動的にフレックスアイテムになります。
シンプルなスケーラブルなコンテナを設定するのは簡単です。コードは次のとおりです: .container { display: flex;}

説明は次のようになりますが、なぜ「Div と他のコンテナ」に Flex 属性を追加する必要があるのでしょうか。 " 具体的には？ ? ?この属性を追加した後、Div 要素はどうなりましたか? ? ?

この属性を追加しないと、Div 要素や内部要素も取り消すことができますか? ? ?

Flexを追加した場合とFlexを追加しない場合で解析できるものはありますか？ ? ?

支店はお譲りしますのでポストはすぐに閉めさせていただきます。

ディスカッション (解決策) への返信

これを参照してください:

http://www.w3school.com.cn/cssref/pr_box-flex.asp

には属性があります:

<!DOCTYPE html><html><head><style> div{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;}#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;}#p2{-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari and Chrome */box-flex:2.0;border:1px solid blue;}</style></head><body><div><p id="p1">Hello</p><p id="p2">W3School</p></div><p><b>注释：</b>IE 不支持 box-flex 属性。</p></body></html>

ログイン後にコピー

属性なし:

<!DOCTYPE html><html><head><style> div{display:box;width:300px;border:1px solid black;}#p1{box-flex:1.0;border:1px solid red;}#p2{box-flex:2.0;border:1px solid blue;}</style></head><body><div><p id="p1">Hello</p><p id="p2">W3School</p></div><p><b>注释：</b>IE 不支持 box-flex 属性。</p></body></html>

ログイン後にコピー

Flexbox レイアウトは、フレックスコンテナ (フレックスコンテナ) と、このコンテナ内のフレックスアイテム (フレックスアイテム) で構成されます。

Flex コンテナ (フレックスコンテナ) は HTML タグ要素であり、「display」属性によって明示的に「flex」属性値が設定されます。フレックスコンテナ内のすべての子要素は、自動的にフレックスアイテムになります。シンプルなフレックスコンテナをセットアップするのは簡単です。コードは次のとおりです。 .container { display: flex;}

内部要素は、親要素全体を埋めるように自動的に拡大縮小されます。内部要素では、内部要素の割合を設定するために Flex 属性も設定する必要があります。

http://www.w3cplus.com/css3/flexbox-basics.html

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-wrap.html
内部要素 Flex 定義：.flex { -webkit-box-flex: 1; -ms-flex: 1; }
親要素 Flex 定義:ディスプレイ: -webkit-box; ディスプレイ: -ms-flexbox; ディスプレイ: -webkit-flex;
親要素の方向の定義: -webkit-box-orient: 垂直; -moz-box-orient: 垂直方向; -webkit-flex-direction: 列;