Flexbox布局
一、什么是Flexbox布局？
1、Flexbox 布局是 CSS 3 新增的布局模式，在 display 中的值是 display: flex; display: inline-flex; 。
2、Flexbox是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。能很好支持不同视口尺寸和设备。
3、flex 具有很好的适应性，在电脑浏览器和手机浏览器中都有很好的表现。为 display: flex/inline-box 的元素可以改变子元素的高度和/或宽度，来适应不同大小的浏览器尺寸和显示设备类型，是响应式布局的一种技术。
4、声明 display: flex;或者 display: inline-flex;的元素的子 flex 条目会充满父元素的所有空间。
弹性框布局的好处，例如：
1、构建这样一种布局—即使屏幕和浏览器窗口大小发生改变也可灵活调整—，但包含彼此的相对位置和大小保持不变的元素（如图像或控件）。
2、指定如何沿着一系列元素的水平轴或垂直轴重新分配多余空间，从而增加给定元素的大小。
3、指定如何沿着一系列元素的布局轴将多余空间重新分配到一系列元素之前、之后或之间。
4、指定如何将某个元素布局轴垂直方向的多余空间（例如，已并排布局的按钮上方或下方的多余空间）移动到该元素的周围。
5、控制元素在页面上的视觉方向—（例如，从上到下、从左到右、从右到左或从下到上）—，而无需调整指定的 writing-mode。
6、按照不同于文档对象模型 (DOM) 所指定的排序方式，对屏幕上的元素重新排序。
Flexbox通常能让我们更好的操作他的子元素布局，例如：
如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
可以快速让他们布局在一列；
可以方便让他们对齐容器的左、右、中间等；
无需修改结构就可以改变他们的显示顺序；
如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例
flexbox的术语了解：
伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素 伸缩项目：伸缩容器的子元素 主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。 主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。 主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。 侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。 侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。 侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。
下图是一个row伸缩容器中各种方向与大小术语的示意图：
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
1、flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）组成。
2、以容器（flex container）定义，有主坐标（main axis）以及纵坐标（cross axis），
主坐标为默认横向，默认从左到右，纵坐标默认为纵向，默认从上到下（当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化）
子元素（flex item）在main axis方向的尺寸为main size，在cross axis方向的尺寸为cross size
【换句话说：容器默认存在两根轴——水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。】
任何一个容器都可以指定为Flex布局。
.box{ display:flex; }
行内元素也可以使用Flex布局。
.box{ display:inline-flex; }
Webkit内核的浏览器，必须加上 -webkit 前缀。
.box{ display:-webkit-flex; /* Safari*/ display: flex; }
注意：设为Flex布局后，子元素的float、clear和vertical-align属性将失效。
二、属性介绍
将Flex盒子模型拆分为容器（flex container）和子项（flex item）来分别介绍其拥有的属性
容器(flex container):
display:
该属性定义定义了容器是以块状（flex）还是行内元素（inline-flex）的方式显示，改属性的设置能让其子项具有弹性上下文的属性
示例：
.container{ display:flex; /* or inline-flex*/ }
以下6个属性设置在容器上
1、 flex-direction属性
该属性主要决定子项(flex item)在容器内的排列方式：
.container{ flex-direction:row | row-reverse | column | column-reverse; }
row，表示 flex items 以横向且从左到右的方式排列( ltr )
row-reverse，表示 flex items 以横向且从右到左的方式排列( rtl )
column，表示flex items 以纵向且从上到下的方式排列
column-reverse，表示以纵向且从下到上的方式排列
2、flex-wrap属性
默认情况下会让容器内的子项（ flex item ）保持在一行内，但你可以通过这个属性来设置让容器内的子项是否换行（/列），这个属性结合着 flex-direction 属性可以决定换行后新的一行或一列的排序方式。
.container{ flex-wrap:nowrap | wrap | wrap-reverse; }
这个属性对应属性值跟文本是否换行的属性值一致（但这里对应的是换行后新的一行跟上一行的排序方式）：
nowrap，表示容器内的子项（flex items）保持在一行或一列（当flex-direction为column或column-reverse的时候）不换行（/列）
wrap，跟nowrap相反，表示flex items换行或换列，但以默认（左到右或上到下）的方式排列
wrap-reverse，表示flex items换行且反向排列（右到左或下到上）
图解：
nowrap
wrap
wrap-reverse
3、 flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式：
flex-flow: < flex-direction > || < flex-wrap> /*默认值为 row nowrap*/
4、justify-content属性（主轴对齐伸缩项目）
这个属性定义了子项（flex item）在横轴方向的对齐方式，
当flex item的尺寸在横轴方向都是不变的或者达到最大尺寸的情况下，
用来分配额外剩余的可用空间，或者当flex item在横轴排布要超出容器的时候，
进行压缩控制：
.container{ justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start(默认值)， 子项（flex items）在main轴开始方向对齐
flex-end, 子项（flex items）在main轴结尾方向对齐
center, 子项（flex items）在main轴居中对齐
space-between, 子项（flex items）始终保持在一行，main轴两端对齐
space-around, 子项（flex items）等间距对齐，但第一个元素距离容器左边的间隔是跟下一个元素间隔的二分之一，因为第一个元素右边有一个单元的间隔，第二个元素左边也有一个单元的间隔
五种「justify-content」关键字的效果展示：
注意：
这里的开始结尾方向，
如果你设置的justify-content值为flex-start，但你的flex-direction值为row-reverse的话，
因为子项（flex item）是从右到左排列的，所以开始方向是在右边，所以flex-start的对齐方式应该是右对齐。
flex-end的结尾方向也一样，受flex-direction值的影响。
结合着flex-wrap属性的话，换行后的元素对齐方式跟第一行一致。
5、align-items属性(侧轴对齐伸缩项目)
该属性定义了子项（flex item）在纵轴方向的对齐方式，
可以把它想象为justify-content在纵轴方向的定义：
.container{ align-items: flex-start | flex-end | center | baseline | stretch; }
-
flex-start，子项（flex item）在cross轴方向以开始方向对齐；
-
flex-end，子项（flex item）在cross轴方向以结尾方向对齐；
-
center，子项（flex item）在cross轴方向居中对齐（该属性值能很方便地让元素在容器内垂直居中对齐）
-
baseline，子项（flex item）在cross轴方向以其文本的基准线对齐
-
stretch（默认值），子项（flex item）在cross轴方向填满整个容器（当固定尺寸的时候该属性不生效）
为了更形像的理解"align-items"各个属性值对应在侧轴上的效果，可以参考下图：
6、align-content属性(伸缩项目堆栈伸缩行)
该属性定义的是多行（/多列）的情况下，
所有行/列在cross axis方向的对齐方式，跟justify-content（或align-items）对子项（flex item）对齐方式的定义类似，
不过justify-content（或align-items）是针对子项（flex item）对齐，而该属性对应的是多行/多列的对齐方式。
.container{ align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
align-content各关键字对多行的伸缩容器的效果。
注意：
这里justify-content属性跟align-items属性的时候，
没有直接说justify-content是flex items在横轴方向的对齐方式，
而是在main axis方向的对齐方向，
也没有说align-items是flex items在纵轴方向的对齐方式（或align-content是对多行元素在纵轴方向的对齐方式），
同样也是说是在cross axis方向的对齐方式。
这是因为当flex-direction是row的时候，main axis是横向的，而当该值为cloumn的时候，main axis则是纵向的。
所以justify-content和align-items以及align-content属性对flex items对齐方式的也同样受flex-direction值的影响。
项目的属性( flex item ):
以下6个属性设置在项目上
1、order属性
order属性是用来设置伸缩项的显示顺序，
默认状态下，用户代理会用伸缩项目出现在源文档的次序配置这些伸缩项目。
order属性透过将元素分到有序号的组以控制元素出现的顺序。
在伸缩布局中，order属性控制伸缩项目在伸缩容器里的顺序。
order取值越大，越排在后面。并且order可以取负值。
.item{ order : <integer>; }
图解：
2、flex-grow属性
该属性定义了子项（flex item）在有需要的时候进行尺寸扩展，即如果存在剩余空间，也不放大。
接收一个无单位的数值作为比例（负数值无效），
他决定了该子项占用多少容器内可用的空间。
如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的 flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
.item{ flex-grow : <number>; /* 默认值 0 */ }
图解：
3、 flex-shrink属性
该属性定义了该子项（flex item）在必要时候的收缩属性，即如果空间不足，该项目将缩小。
跟flex-grow的效果相反，使用方法一致，负数值无效
.item{ flex-shrink : <number>; /* 默认值 1 */ }
4、flex-basis属性
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。
它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。
.flex-item{ -webkit-flex-basis: auto | <width>; /*Safari*/ flex-basis: auto | <width>; }
5、flex属性
该属性是flex-grow,，flex-shrink，flex-basis三个值的简写方式，
默认值为0 1 auto，其中第二三个属性flex-shrink和flex-basis值是可选的。
该属性有两个快捷值： auto (1 1 auto) 和 none (0 0 auto) 。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
.item{ flex:none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] }
6、align-self属性
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
.item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; }
想了解更多可以参考：
http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
浙公网安备 33010602011771号