Flex弹性布局使用说明

一、水平、垂直居中例子
方法一：

<style>.box {  display: flex;  display: -webkit-flex; /*Webkit内核的浏览器*/  height:500px;  justify-content: center;/*水平居中*/  align-items: center;/*垂直居中*/  background-color:red;}</style><div class="box">  <div class="item">    居中  </div></div>

方法二：

<style> .flex-container {    display: -webkit-flex;    display: flex;    width: 400px;    height: 250px;    background-color: lightgrey;}.flex-item {    background-color: cornflowerblue;    width: 75px;    height: 75px;    margin: auto;/*完美居中*/}</style><div class="flex-container">  <div class="flex-item">Perfect centering!</div></div>

二、左侧div宽度固定，右侧铺满屏幕

<div style="display:flex">   <div style="width:100px;background-color:grey;">left</div>   <div style="flex:1;background-color:yellow;">right</div></div>