flexレイアウトインスタンス(二)

詳細
【前言】
まずflexの出現はよくある問題を解決するためですか?
一、ページ行配列レイアウト
二、div上下左右中央
 
【詳細】
一、ページ行配列レイアウト
左右2つのdivを並べて表示するのが一般的で、フローティングレイアウトで処理できます

    这种布局有两个缺点

   1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

   2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

   解决方案：用display:flex布局，可以解决这两个缺点

親要素定義display:flex、子要素幅はflexで定義され、flex:1は親要素を均等に分割します.占める割合は同じ
同じように、二等分の時、二つに分けます.三等分の場合、flexの数に応じて分布します
flexは占める割合で、レイアウトも便利です
 
(二)div上下左右中央
親要素のdisplay:flexを除く.サブエレメントが中央に配置されるようにプロパティを設定します.
サブエレメントの内容を相関中心に配置するには、サブエレメントに対してdisplay:flexを行うことができます.属性の設定
ケース:

未知のdiv幅の高さでは,この方法が便利である.
これはflexレイアウトを使用するときによく使われる2つの例です.
 
 
 
 
 
.