ホームページ  >  記事  >  ウェブフロントエンド  >  「Div」などのコンテナに Flex 属性スタイルを追加する必要があるのはなぜですか? _html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:41:02937ブラウズ

义 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: 列;

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。