CSS3新特性(06):Flex

2016/09/03 855
目录
[隐藏]

Flex是Flexible Box的缩写,意为”弹性布局”,Flex布局将会是未来布局的首选方案,因为非常便捷,有必要好好学习下。不过目前浏览器支持不是很好,IE11开始才支持。

网上写的各种Flex的文章都说IE10也支持的,我想说,我像你保证IE10不支持的,至少不支持Flex里面的所有属性,所以既然只有IE11开始的浏览器才支持,那么它的使用就可以缓一缓再说,现在只作为概念类项目的学习之用。

下面就来看一下各家浏览器的支持情况,“+”表示包括且大于的意思,先上图。

Flex01

Flex里的新鲜概念剖析

Flex是个蛮复杂的布局,在学习之前,先来了解下有关Flex里的新鲜概念。假设我们看到下图的紫色html元素它是弹性布局的,我们就称其为Flex container,意思是弹性的容器。

Flex02

它有两个直接的子元素,我们称之为Flex item,意思是弹性的元素。

Flex03

我们把Flex item排列的方向称为main axis,意思是主轴。

Flex04

而跟主轴垂直的方向,我们把它称为cross axis,意思是辅轴。

Flex05

这些概念我们在下面会经常使用到,所以先要记住。

那么我们如何设置弹性布局呢,只要display:flex就搞定了,那么Flex item又是什么呢,即设置过display:flex的html元素它在文档流中的子元素就是Flex item了。

判断哪些是有效的Flex item

并不是设置过display:flex的html元素它里面的任何元素都是Flex item。而是它的在文档流中的子元素才是Flex item。两个条件,一是在文档流中,二是子元素。下面我们就来判断下哪些是有效的Flex item?

Flex06

float元素是在文档流中的子元素,因此算Flex item,absolute绝对定位的元素是脱离文档流的,不能算,至于最后一个是孙元素,也不能算。

弹性布局的特性

接下来我们来讲讲弹性布局的特性,从三个方面来讲,分别是排列方向、弹性、对齐。

排列方向

排列方向有关的属性有这些:flex-direction(弹性的方向)、flex-wrap(弹性的换行)、flex-flow(flex-direction 和 flex-wrap 属性的复合属性)、order(顺序)。下面分别来介绍下。

(1)首先我们来看一下flex-direction(弹性的方向),它的语法如下:

flex-direction是设置弹性布局的方向,默认是row。

Flex07

(2)接下来我们来看一下flex-wrap(弹性的换行),它的语法如下:

flex-wrap是设置弹性布局的换行,默认是nowrap,即不换行。

Flex08

(3)接下来我们来看一下flex-flow,它是flex-direction 和 flex-wrap 属性的复合属性,它的语法如下:

默认是row nowrap,即横方向排列且不换行。

Flex09

使用时建议使用复合属性flex-flow,非单独属性flex-direction 和 flex-wrap。

(4)再来看一下order(顺序),默认值为0。它的语法如下:

Flex10

order:1的元素大于order:0的另两个元素,于是顺序就调换了。order的值为整数,可负数。

弹性

弹性有关的属性有这些:flex-basis(设置flex-item的初始宽高)、flex-grow、flex-shrink。下面分别来介绍下。

(1)首先我们来看一下flex-basis(设置flex-item的初始宽高),它也会作为以后设置弹性的基础,它的语法:

这里要提一下,如果设置默认值的话,若该弹性元素是横向排列的,即为主轴main axis的宽度,若是纵向排列的,即为辅轴cross axis,也就是高度了。

(2)接下来我们来看一下flex-grow,该属性用于设置弹性盒的能分配到的剩余空间的扩展比率。如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。默认值是0,它的语法:

Flex11

(3)接下来我们来看一下flex-shrink,它是设置弹性元素的能分配到的剩余空间的收缩比例,默认值是1,它的语法:

Flex12

(4)接下来我们来讲讲flex这个复合属性,它的语法:

使用时建议使用复合属性flex。

对齐

对齐有关的属性有这些:justify-content(设置主轴方向的对齐方式)、align-items(设置辅轴方向的对齐方式)、align-self、align-content。下面分别来介绍下。

(1)首先我们来看一下justify-content(设置主轴main-axis方向的对齐方式),它的语法:

Flex13

(2)接下来我们来看一下align-items(设置辅轴cross-axis方向的对齐方式),它的语法:

Flex14

看的清楚么?看不清楚我们再换一张效果图:

Flex15

(3)接下来我们来看一下align-self(设置单个flex item在cross-axis方向上的对齐方式),它的语法:

这个跟align-items差不多,所以效果图就不放了。

(4)接下来我们来看一下align-content(设置cross-axis方向上行的对齐方式),它的语法:

Flex16

align-content是当出现多行时,多行如何对齐,可以看到上图有三行,图中显示就是三行的分别对齐方式。

总之:flex弹性布局的基础知识讲完了,以后有空会补充实例篇。

分享本文: