flex布局

 

　　称为"弹性盒模型"，当父容器设置了display：flex时，子元素自动成为其成员，容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。

 

　　flex容器(父容器)的一些属性：

 

　　flex-direction：决定主轴的方向（即项目的排列方向）

 

　　flex-wrap：如果一条轴线排不下，如何换行

 

　　flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap

 

　　justify-content：定义了项目在主轴上的对齐方式

 

　　align-items：定义项目在交叉轴上如何对齐

 

　　align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

 

　　实例

 

　　flex实现水平垂直居中

 

　　

 

　　*{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　html{

 

　　width:100%;

 

　　height:100%;

 

　　}

 

　　body{

 

　　display:flex;

 

　　width:100%;

 

　　height:100%;

 

　　background:#eee;

 

　　justify-content:center;

 

　　align-items:center;

 

　　}

 

　　.box{

 

　　width:200px;

 

　　height:200px;

 

　　background:pink;

 

　　}

 

　　效果图：

 

　　两列等高布局：

 

　　左边固定宽度，右边占据剩余宽度：

 

　　

 

　　<style>

 

　　*{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　.grid{

 

　　display:flex;

 

　　border:1pxsolid#ccc;

 

　　}

 

　　.left{

 

　　background-color:pink;

 

　　flex-basis:200px;

 

　　}

 

　　.right{

 

　　background-color:skyblue;

 

　　flex-basis:calc(100%-200px);

 

　　}

 

　　</style>