ホームページ > 記事 > ウェブフロントエンド > 「Div」などのコンテナに Flex 属性スタイルを追加する必要があるのはなぜですか? _html/css_WEB-ITnose
「Div」などのコンテナに Flex 属性スタイルを追加する必要があるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:02916ブラウズ
义 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: 列;