display:flex 的布局

display：flex是弹性布局，

优化了：浮动（float）带来的要清除浮动的困扰，宽度过窄时会被挤到下一行的困扰

用法

      <div style="width:200px;height:200px;display:flex">

           <div style="flex:1">左部分</div>

           <div style="flex:1">右部分</div> 

      </div>

结果就是中间的两个div左右平分外层div的宽度

布局1：2  则可以设置为 左边flex:1    右边 flex:2,同理    以此类推

 

以此为记录以便日后查阅起来方便