CSS3新特性(06):Flex

作者: 荷小音 | 来源:发表于2016-09-12 16:39 被阅读211次

    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弹性布局的基础知识讲完了,以后有空会补充实例篇。

    相关文章

      网友评论

      本文标题:CSS3新特性(06):Flex

      本文链接:https://www.haomeiwen.com/subject/eovpettx.html