ホームページ > 記事 > ウェブフロントエンド > CSS学習(21)-フレックスボックスモデル2_html/css_WEB-ITnose
CSS学習(21)-フレックスボックスモデル2_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:241013ブラウズ
1. 理論:
1.flex-flow
a.flex-direction フレックス コンテナのフレックス フロー方向を設定します。
b.flex-wrap フレックス コンテナに十分ながない場合に、フレックス コンテナ内のフレックス アイテムを設定します。スペースに配置すると、フレックス アイテムがコンテナ内でラップされるかどうかを指定します。
2.flex-pack
a. box-pack 属性と同じパラメーターを持ちます。
b.distribute フレックス アイテムは同じコンテナ内に均等に分散されます。行
c.start フレックス コンテナ内の最初のフレックス アイテム 開始エッジはフレックス コンテナの主軸の先頭に配置され、次のフレックス アイテムの開始エッジは最初のフレックス アイテムの終了エッジの隣にあります。およびその他のフレックス項目が主軸に沿って順番に配置されます。フレックス コンテナのレイアウト軸に沿った余分なスペースはすべて、レイアウト軸の最後に配置されます
d.end は start の逆の効果があります
e.center すべての flex 項目は並べて配置されます
f.justify すべての flex 項目は行間で均等に分散され、フレックス コンテナのレイアウト軸に沿った余分なスペースは、フレックス アイテム間で均等に分散されます。
3.flex-align
a box-align のすべてのプロパティを持ちます。フレックスコンテナ。
2. 練習:
1.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container >div{ width: 100%; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size:20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container > div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container > div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container > div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container > div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container > div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container > div:nth-child(6){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container{ display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-flow:row; } </style></head><body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div></body></html>2. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container>div{ width: 50px; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size: 20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container>div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container>div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container>div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container>div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container>div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container>div:nth-child(6){ background-color: hsla(320,80%,80%,0.8); } .flexbox-container{ display: -ms-flexbox; -ms-flex-flow:row; } </style></head><body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div></body></body></html>3. 上記の 3 つはいずれも成果を上げませんでした。理由を知っていてアドバイスをくれる友人がいるかどうかはわかりません。ありがとうございました:)