您的位置：首页 > Web前端 > CSS

CSS3 之 flexbox 响应式的未来

2015-03-19 22:10 686 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

CSS3 之 flexbox 响应式的未来