CSS3之flex布局

flex是Flexible Box的缩写，意为“弹性布局”，flex布局是w3c提出一种新的布局方案，它可以简便、完整、响应式的实现各种页面布局。现在所有的浏览器都支持flex。
CSS3 的 flex 布局解决了传统布局中一些比较棘手的问题，如各种居中问题。传统布局中需要多行代码才能解决的问题，flex 可能只需要一两行代码就解决了。

1. flex 布局原理：

通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

2. flex 布局父元素常见属性

主轴与侧轴
想象有两条轴，x轴和y轴。 默认的主轴是 x 轴（行）,元素是跟着主轴来排列的。也可以把主轴设置为 y 轴，那么 x 轴就是侧轴

主轴属性及其值
重点是要了解flex-container的属性：flex-direction,flex-wrap.justify-cotent,align-items,align-content。
1.flex-direction属性决定主轴的方向：
flex-direction: row/row-reverse/column/column-reverse

• row（默认值）：主轴为 x 轴，从左到右。

• row-reverse：主轴为 x 轴，从右到左。

• column：主轴为 y 轴，从上倒下。

• column-reverse：主轴为 y 轴， 从下到上。

2. justify-content定义项目在主轴上的对齐方式：
justify-content: flex-start/flex-end/center/space-around/space-between

使用时要注意一定要确定哪个是主轴

• flex-start：（默认值），左对齐 flex-end：右对齐

• center：居中（常用）

• space-between：两端对齐，项目之间的间隔都相等。（常用）

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

3. flex-wrap（一条轴线排不下如何换行）：
flex 布局中默认的子元素是不换行的，如果子元素太多装不下，就会缩小每个子元素的宽度，放到父元素里
flex-wrap: nowrap/wrap

• nowrap：不换行，在一行显示
• wrap：内容超过后换行，第一行在上方

侧轴属性及其值
1 .align-items设置侧轴上的（单行）子元素排列方式
align-items: flex-start/flex-end/center/stretch(拉伸，子元素不设置高度)

• stretch;

• flex-start（start侧开始，上对齐）

• flex-end（end侧开始，下对齐）

• :center (中心对齐)

2.align-content置侧轴（多行，用在子元素设置换行的情况下），此属性在单行下，是没有效果的

• stretch (拉伸)

• flex-start (start侧开始，上对齐)

• flex-end（end侧开始，下对齐）

• center (中心对齐)

• space-between（上下没有间距，中间各子元素间距相同）

• space-around (上下间距之和等于中间各个间距)

总结：单行找 align-items,多行找 align-content

2. flex 布局子元素常见属性

• flex：1/n% 属性：定义子元素分配剩余空间，用数值表示占多少份数，1表示子元素平均分配父元素空间。也可以写百分值，相对于父元素来说，20%就是父元素宽度的20%。(注意，在没有给子元素设定宽度的情况下，如果设置 flex:1 即使设置了换行，子元素也不会换行。这时 flex 的值就要设置为 百分数值，才会换行)
• align-self: 控制某个子元素在侧轴上的排列方式
• order: 定义子元素的排列顺序 ，数值越小，排列越靠前 order: -1

注意： flex 布局里， 父元素设置了 display: flex 属性，则子元素即使是行内元素也不需要转化为块级或行内块级元素，可以直接设置宽高，如 a, span 这样的标签