flex弹性盒布局

今天整理了一下弹性盒布局，希望给我们的小白童鞋一点帮助。
既然要用这种布局，就不得不考虑它的兼容性，不要慌can i use能帮助你参看浏览器的兼容；
相信大家试一试就会爱上can i use，我们可以查到flex布局是不支持ie8，9的，所以建议，如果要做兼容ie8的pc端项目，还是老老实实用浮动布局吧~！但是现在是H5的时代，移动端我们还是放心大胆用吧，请抛弃恶心的清除浮动！这篇文章只帮助整理记忆；话不多说讲重点：

---

1、display:flex

说明：设置为弹性盒（父元素添加）

2、flex-direction (主轴排列方向)

说明：顺序指定了弹性子元素在父容器中的排列方向

row 默认在一行内排列主轴为X轴（横向排列）；
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column：主轴为Y轴（纵向排列）。
column-reverse：反转纵向排列，（从下往上排，最后一项排在最上面。）

3、justify-content(主轴对齐方式)

说明：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

flex-start默认，顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐，中间自动分配
space-around自动分配距离

4、align-items（侧轴对齐方式）

说明：侧轴对齐方式

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5、flex-wrap（控制flex容器内容是单行或者多行）

说明：该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。

6、align-content（行与行之间对齐方式）

说明：当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离

7、align-self（被选中项目的对齐方式）

说明：align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。

auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则 为 "stretch"。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。

8、order

说明：number排序优先级，数字越大越往后排，默认为0，支持负数。

9、flex

说明：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

10、flex三个属性值介绍

flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis：项目的长度

好了flex布局的属性基本就没有了；只要掌握好了这些属性；移动端布局so easy！上个图：

flex布局移动端页面.png

这样的一个页面用flex布局炒鸡快；
可以收藏，用到的时候把这篇文章找出来；看一看就拾起来了；最后给大家个福利：针对小白的免费公开课；这是千锋给大家的福利：公开课链接 免费报名后即可听课。
如果想讨论一下前端知识和自己遇到的问题；加入我们的零基础入门学习群（QQ：673883249）和群里的小伙伴们交流；
在最后给大家推荐一个小游戏；只要玩通关这个小游戏就掌握了flex布局：青蛙游戏;如果大家想要答案的话可以加群一起讨论；