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

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,564评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,957评论 0 26
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,291评论 1 91
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 2,841评论 3 55
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,084评论 0 1
  • 如果真的有这样的技术,我最先想换到霍金的大脑去了解一下。 他的很多理论关于人类,关于未来,关于宇宙。 但是如大家都...
    小二火火阅读 237评论 0 1
  • 那年夏天接近秋天,我搬到二毛家的房子住,和阿基一起。同学们在观看过我和阿基的房子后,纷纷表示后悔没有租。都说,哇,...
    乱乱310阅读 83评论 0 0
  • 第十三节 测试 记录学习点点滴滴。有兴趣的关注我一起。
    Linary_L阅读 64评论 0 0
  • 最近看到报道,蔡依林前男友在接受采访时拿身高暗讽蔡依林,不禁感慨:果真是分手见人品呀,不怀念曾经的情分不说,说好的...
    小淑文阅读 99评论 0 0
  • 文/叶老巫 (119/160,每天更文3000,连续160天) 本文关键词:书写、分段、开头、结尾、限时 1、 上...
    叶两步阅读 480评论 12 19