首页 > 代码库 > CSS3伸缩布局Flex学习笔记

CSS3伸缩布局Flex学习笔记

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些还好,关键移动端竟然不支持这个属性,移动端支持的还是老版本的display:-webki-box;不过对于学习来说,也不管它支持不支持了,学了再说吧,更何况Chrome已经把flex的前缀去了,说明flex多少还是有些稳定的。


下面列出了关于CSS与flex一起使用的一些属性


    •     display 显示方式

    •     flex-direction 设置flex模型的方向

    •     justify-content 设置水平方向的对齐

    •     align-items 设置垂直方向的对齐

    •     flex-wrap 是否换行

    •     align-content 设置换行后的对齐方式

    •     flex-flow 简写flex-direction和flex-wrap

    •     order 指定顺序

    •     align-self 覆盖容器的对齐项目属性

    •     flex 指定长度


CSS3伸缩布局Flex学习笔记