CSS3新特性(06):Flex
Flex是Flexible Box的缩写,意为"弹性布局",Flex布局将会是未来布局的首选方案,因为非常便捷,有必要好好学习下。不过目前浏览器支持不是很好,IE11开始才支持。
网上写的各种Flex的文章都说IE10也支持的,我想说,我像你保证IE10不支持的,至少不支持Flex里面的所有属性,所以既然只有IE11开始的浏览器才支持,那么它的使用就可以缓一缓再说,现在只作为概念类项目的学习之用。
下面就来看一下各家浏览器的支持情况,“+”表示包括且大于的意思,先上图。
Flex里的新鲜概念剖析
Flex是个蛮复杂的布局,在学习之前,先来了解下有关Flex里的新鲜概念。假设我们看到下图的紫色html元素它是弹性布局的,我们就称其为Flex container,意思是弹性的容器。
它有两个直接的子元素,我们称之为Flex item,意思是弹性的元素。
我们把Flex item排列的方向称为main axis,意思是主轴。
而跟主轴垂直的方向,我们把它称为cross axis,意思是辅轴。
这些概念我们在下面会经常使用到,所以先要记住。
那么我们如何设置弹性布局呢,只要display:flex就搞定了,那么Flex item又是什么呢,即设置过display:flex的html元素它在文档流中的子元素就是Flex item了。
判断哪些是有效的Flex item
并不是设置过display:flex的html元素它里面的任何元素都是Flex item。而是它的在文档流中的子元素才是Flex item。两个条件,一是在文档流中,二是子元素。下面我们就来判断下哪些是有效的Flex item?
float元素是在文档流中的子元素,因此算Flex item,absolute绝对定位的元素是脱离文档流的,不能算,至于最后一个是孙元素,也不能算。
弹性布局的特性
接下来我们来讲讲弹性布局的特性,从三个方面来讲,分别是排列方向、弹性、对齐。
排列方向
排列方向有关的属性有这些:flex-direction(弹性的方向)、flex-wrap(弹性的换行)、flex-flow(flex-direction 和 flex-wrap 属性的复合属性)、order(顺序)。下面分别来介绍下。
(1)首先我们来看一下flex-direction(弹性的方向),它的语法如下:
flex-direction:row|row-reverse|column|column-reverse;
flex-direction是设置弹性布局的方向,默认是row。
285.jpg(2)接下来我们来看一下flex-wrap(弹性的换行),它的语法如下:
flex-wrap:nowrap|wrap|wrap-reverse;
flex-wrap是设置弹性布局的换行,默认是nowrap,即不换行。
(3)接下来我们来看一下flex-flow,它是flex-direction 和 flex-wrap 属性的复合属性,它的语法如下:
flex-flow:flex-direction||flex-wrap;
默认是row nowrap,即横方向排列且不换行。
287.jpg使用时建议使用复合属性flex-flow,非单独属性flex-direction 和 flex-wrap。
(4)再来看一下order(顺序),默认值为0。它的语法如下:
order:number;
order:1的元素大于order:0的另两个元素,于是顺序就调换了。order的值为整数,可负数。
弹性
弹性有关的属性有这些:flex-basis(设置flex-item的初始宽高)、flex-grow、flex-shrink。下面分别来介绍下。
(1)首先我们来看一下flex-basis(设置flex-item的初始宽高),它也会作为以后设置弹性的基础,它的语法:
flex-basis: number|auto|initial(默认)|inherit;
这里要提一下,如果设置默认值的话,若该弹性元素是横向排列的,即为主轴main axis的宽度,若是纵向排列的,即为辅轴cross axis,也就是高度了。
(2)接下来我们来看一下flex-grow,该属性用于设置弹性盒的能分配到的剩余空间的扩展比率。如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。默认值是0,它的语法:
flex-grow: number;
(3)接下来我们来看一下flex-shrink,它是设置弹性元素的能分配到的剩余空间的收缩比例,默认值是1,它的语法:
flex-shrink: number;
(4)接下来我们来讲讲flex这个复合属性,它的语法:
flex: flex-grow||flex-shrink||flex-basis;
使用时建议使用复合属性flex。
对齐
对齐有关的属性有这些:justify-content(设置主轴方向的对齐方式)、align-items(设置辅轴方向的对齐方式)、align-self、align-content。下面分别来介绍下。
(1)首先我们来看一下justify-content(设置主轴main-axis方向的对齐方式),它的语法:
justify-content: flex-start|flex-end|center|space-between|space-around;
(2)接下来我们来看一下align-items(设置辅轴cross-axis方向的对齐方式),它的语法:
align-items: flex-start|flex-end|center|baseline|stretch;
看的清楚么?看不清楚我们再换一张效果图:
(3)接下来我们来看一下align-self(设置单个flex item在cross-axis方向上的对齐方式),它的语法:
align-self: auto|flex-start|flex-end|center|baseline|stretch;
这个跟align-items差不多,所以效果图就不放了。
(4)接下来我们来看一下align-content(设置cross-axis方向上行的对齐方式),它的语法:
align-content: auto|flex-start|flex-end|center|space-between|space-around|stretch;
align-content是当出现多行时,多行如何对齐,可以看到上图有三行,图中显示就是三行的分别对齐方式。
总之:flex弹性布局的基础知识讲完了,以后有空会补充实例篇。