CSS3 之 flexbox 响应式的未来

flexbox 伸缩盒模型

. flex: CSS3中一个重要的而且非常有用的属性，用来制作弹性布局是非常的方便而又强大。

. flex布局：旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。

兼容性

最新flex兼容一览表:

显示成行 和 显示成列

/*display row*/  flex-direction:row;  /*display column*/  flex-direction:column;  

设置对齐方式

/*行显示时的 左 中 右 对齐*/  justify-content:[flex-start | center | flex-end];	/*列显示时的 左 中 右 对齐*/  align-items:[flex-start | center | flex-end];  

设置自动伸缩

这里的值是相对于父窗口的百分比

.left { flex:2;}/*占父容器的2/3宽度*/  .right { flex:1;}/*占父容器的1/3宽度*/

多行与多列显示

多行与多列显示要设置flexbox 的排列方式，flex-flow的值为row wrap时为多行显示，为column wrap时为多列显示

align-content: flex-start | flex-end | center | stretch | space-around | space-between指定多行伸缩容器的对齐,这里指定stretch是以拉伸的方式占据整个Y轴的长度

按多列显示时需要指定高度

.demo8 {   	flex-direction:row; justify-content:center; align-items:center;  align-content:flex-end;  	flex-flow:row wrap;  }  .demo9 {   	flex-direction:column; justify-content:center; align-items:center; align-content:stretch; max-height:30rem;  	flex-flow:column wrap;  }

调整多行与多列的间距

这里就是 align-content 的运用

设置align-content:center 可以简单的移除多列之间的空间

 .demo10 {	flex-direction:column; justify-content:center; align-items:center; flex-flow:column wrap; max-height:30rem;	align-content:center;   }

行列混合布局

align-self: flex-start | flex-end | center | stretch | baseline

可以为flex布局中的单个元素指定对齐方式

.demo11 {min-height:50rem; flex-direction:column;align-items:center;}  .demo11 .left {align-self:flex-start;}  .demo11 .right {align-self:flex-end;}

在线预览:

未经允许不得转载：爱前端网 » CSS3 之 flexbox 响应式的未来