CSS3 之 flexbox 响应式的未来

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;}

以上DEMO预览:

See the Pen azPNZv by LT (@togglelt) on CodePen.

. 以上内容做为css3 flex 学习的一个补充，有时候很多东西当时看了，但是没有运用，时间长了总会忘记。

. css3的新特性很我还未普及，不过对未来的展望还是充满信心的，在css3真正红火之前正好加强学习，以备不时之需。

以上参考自大漠的博客文章 终极Flexbox属性查询列表