一. 什么是flex 布局
flex布局全称是 Flexible Box 。意为弹性盒子。为盒模型提供最大的灵活性。 它有两个特别重要的概念。分别为弹性容器和弹性项目。
二. 弹性容器
上图中如果给类名为box的div设置css样式 display:flex; 那么这个div就称为弹性容器。他的每个子元素被称为弹性项目。
1. 弹性容器的6个属性
-
flex-direction： 指定弹性容器的主轴方向，默认值为 row 即横向。
可取的值有： row ， row-reverse， column， column-reverse。row： 弹性项目横向按顺序从左到右依次排列，
row-reverse： 弹性项目横向按顺序从右到左依次排列，
column： 弹性项目纵向按顺序从上到下依次排列，
column-reverse： 弹性项目纵向按顺序从下到上依次排列。 -
flex-wrap： 默认情况下，所有弹性项目排列在一条线（轴线）上，该属性指定，如果一条线排列不下，弹性项目如何换行。
默认值为 no-wrap 即不换行。
可取的值有: wrap , no-wrap , wrap-reverse。
wrap： 换行，第一行在上方。
no-wrap: 不换行。
wrap-reverse: 换行，第一行在下方。 -
flex-flow: 为flex-direction 和 flex-wrap 的简写形式。默认值为 row no-wrap。
-
justify-content: 指定弹性项目在主轴的对齐方式。默认值为： flex-start 即左对齐。
可取值：
flex-start: 左对齐。
flex-end： 右对齐。
space-between： 两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔都相等。这样会导致项目之间的间隔是项目与边框的间隔的两倍。
center： 居中。
5.align-items: 指定项目在交叉轴的对齐方式。默认值为 stretch。 可取值：
flex-start： 交叉轴的顶点对齐。
flex-end： 交叉轴的终点对齐。
center： 居中。 stretch： 如果项目未设置高度或设为auto，那么项目会撑满交叉轴方向。 baseline： 项目第一行文字的基线对齐。
6.align-content： 指定主轴有多条轴线时，轴线的对齐方式。默认值为 flex-start。
flex-start： 交叉轴的顶点对齐。
flex-end： 交叉轴的终点对齐。
center： 居中。 space-between： 同justify-content。 space-around： 同justify-content。
三. 弹性项目
1.弹性项目的6个属性
1.flex-grow： 定义项目的放大比例。 默认值为 0 即如果存在剩余空间，也不放大。
取值可以是 正数数字值。
如果所有项目的flex-grow 值都为1。即如果存在剩余空间时，所有项目等比例放大。
如果一个项目的flex-grow 的值为3，则它的占的剩余空间为flex-grow的值为1的三倍。
2.flex-shrink： 定义项目的缩小比例。 默认值为 1 即空间不足时，项目收缩。 取值可以是 正数数字值。 值为 0 ，即不收缩。 如果所有项目的flex-shrink 值都为1。即如果空间不足时，所有项目等比例缩小。
3.flex-basis： 指定项目在分配剩余空间之前，项目占据的主轴空间。 默认值为 auto 即设定的大小。
可取值为 数字或auto。
如果所有项目的flex-grow 值都为1。即如果存在剩余空间时，所有项目等比例放大。
4.flex： 为flex-grow ， flex-shrink ， flex-basis 的缩写。
快捷值：
flex：none; === flex: 0 0 auto;
flex: auto; === flex: 1 1 auto;
5.order: 指定项目在主轴上的排列顺序。 默认值 为 1。
取值不能取负数值，数值越小排列越靠前。
6.align-self: 指定项目在交叉轴的对齐方式。 默认是为 auto。即继承弹性容器的align-items的值。 可取值同 align-items
