简单好用的FLEX布局
2018/5/22 22:59:00

以下内容是整理了阮一峰的一篇文章 Flex 布局教程:语法篇,之后本人进行总结


根据我们每个人使用的浏览器或者设备的不同,会出现一些样式无法生效,宽度高度的值不一样,这种情况我们就需要做兼容性处理,首先我们首先来讲一下各个浏览器的前缀:

-webkit-代表chrome、safari私有属性 -moz-代表firefox浏览器私有属性 -ms-代表IE浏览器私有属性 -o-代表Operai私有属性


如果想要某个css样式兼容各个浏览器就加上前缀,例如我们要一个过渡时间并且兼容所有浏览器就写成:

-webkit-transition:1s; -moz-transition:1s; -ms-transition:1s; -o-transition:1s; transition:1s;


下面我们来讲一下常用的Flex布局方法及兼容性的写法

NO.1 设置成弹性盒子
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  
NO.2 定义元素排列方向


flex-direction: row | row-reverse | column | column-reverse

row 默认值,子元素会排列在一行 从主轴左侧开始

row-reverse 子元素会排列在一行。不过是从右侧开始

column 子元素垂直显示,从侧轴起始点开始

column-reverse 垂直显示,不过从结束点开始


-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;
NO.3 水平居中


justify-content: flex-start | flex-end | center | space-between | space-around

flex-start(默认值):左对齐

flex-end:右对齐

center: 居中

space-between:两端对齐,项目之间的间隔都相等

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍


-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;
NO.4 垂直居中


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

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度


-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
NO.5 子元素占满剩余空间


-moz-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1;
NO.6 是否换行


flex-wrap: nowrap | wrap | wrap-reverse

nowrap 所有的元素被摆在一行 默认值

wrap 当一行元素过多,则允许元素换行

wrap-reverse 将侧轴起点和终点颠倒


-webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
上一条:没有了
下一条:没有了

猜你喜欢

全部评论: 1

加载中...

    发表评论

    标签云
    返回顶部图片