CSS3 之 flexbox 响应式的未来

CSS3 之 flexbox 响应式的未来

flexbox 伸缩盒模型

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

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

兼容性

最新flex兼容一览表:

显示成行 和 显示成列

CSS3 之 flexbox 响应式的未来

CSS3 之 flexbox 响应式的未来

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

设置对齐方式

CSS3 之 flexbox 响应式的未来

CSS3 之 flexbox 响应式的未来

CSS3 之 flexbox 响应式的未来

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

设置自动伸缩

CSS3 之 flexbox 响应式的未来

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

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

多行与多列显示

CSS3 之 flexbox 响应式的未来

CSS3 之 flexbox 响应式的未来

多行与多列显示要设置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;
}

调整多行与多列的间距

CSS3 之 flexbox 响应式的未来

这里就是 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;
}

行列混合布局

CSS3 之 flexbox 响应式的未来

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属性查询列表

上一篇:tomcat关闭后线程依然运行解决办法


下一篇:java中元注解有四个