flex实战

阮一峰的flex布局教程以前仔细看过，然而没有做过demo，又全部把知识交还给阮老师了！这篇文章，我将根据阮一峰老师的flex布局教程一一实现demo。

介绍

任何容器元素都可以指定为flex布局，指定flex布局后，float、clear、vertical-align属性都将失效。采用flex布局的元素称为flex容器，它的所有子元素称为flex item，即flex项目

容器默认存在两根轴，水平的主轴main axios和垂直的交叉轴cross axios，主轴的开始位置叫main start,结束位置main end,交叉轴的开始位置cross start,结束位置cross end.

容器属性

其中容器，有6个属性

flex-direction：决定主轴的方向，即子项目flex item的排列方向
- row（默认值）: 从左到右
- row-reverse: 从右到左
- column: 从上到下
- column-reverse：从下到上
flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
- nowrap （默认值）：不换行
- wrap: 换行
- wrap-reverse: 换行，第一行在下方，颠倒下顺序
flex-flow：flex-direction、flex-wrap的简写方式
justify-content：定义了子项目flex item在主轴上的对齐方式。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between（空格在中间）：两端对齐，项目之间的间隔都相等。
- space-around（空格环绕）：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items:定义子项目flex item在交叉轴上的对齐方式。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。多根轴线出现的场景是，flex item 很多，折成多行。即多轴
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

在上面的属性中，justify-content，align-items经常容易分不清楚，有道词典翻译如下

记住了么？属性介绍完，我们开始实战吧！！！

默认情况下

Flex-direction:row;

Flex-wrap:nowrap;

Justify-content:flex-start;

Align-items: strech;

即方向从左到右排列，不换行，主轴左对齐，交叉轴上高度延满整个容器高度

https://jsbin.com/repujob/10/edit?html,css,output

flex-direction

设置flex-direction:row-reverse;

设置 flex-direction:column;

设置flex-direction:column-reverse;

flex-direction 决定主轴的排列方向

flex-wrap

demo见https://jsbin.com/repujob/15/edit?html,css,output

默认值flex-wrap:nowrap,等比例压缩flex item，撑满flex容器

设置flex-wrap：wrap;原flex item尺寸不变，换行展示

设置flex-wrap:wrap-reverse;原flex item尺寸不变，颠倒换行展示

justify-content

默认值justify-content:flex-start;沿主轴start对齐

设置justify-content: flex-end; 沿主轴end对齐

设置justify-content: center; 沿主轴居中对齐

设置justify-content: space-between;两端对齐，项目之间的间隔都相等。

设置justify-content: space-around;每个项目两侧的间隔相等

align-items

默认值align-items:flex-start;沿交叉轴start对齐

Demo见 https://jsbin.com/repujob/24/edit?html,css,output

设置align-items: flex-end;沿交叉轴end对齐

设置align-items:center;沿交叉轴居中对齐

设置align-items:baseline项目的第一行文字基线对齐

demo见：https://jsbin.com/repujob/29/edit?html,css,output

设置align-items:strech;如果项目未设置高度或设为auto，将占满整个容器的高度

demo见：https://jsbin.com/repujob/30/edit?html,css,output

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

默认值align-content:strech;

Demo:https://jsbin.com/repujob/42/edit?html,css,output

设置align-content: flex-start;

设置align-content:flex-end;

设置align-content:center;

设置align-content:space-between;

设置align-content: space-around;

项目属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex``flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。