基本知识点

container样式items样式
container是一个容器，而items则是包含在容器里的项。

display：flex
将一个元素变成flex容器；

container样式

1.flex-direction:改变items的流动方向（主轴）

row 从左到右column 从上到下row-reverse 从右到左column-reverse 从下到上

2.flex-wrap：改变折行，默认值是nowrap
备注：当给container固定的宽度时，往容器里面添加宽度一定items时，当添加的items数量加起来的宽度大于container时，往后逐渐添加的items会由于要使items共处一行，而使得自己本身的宽度发生变化。

nowrapwrapwrap-reverse

3.jusify-content:规定主轴对齐方式（默认主轴就是横轴）默认值是flex-start

flex-start items往流动的始端顶flex-end items往流动的末端顶centerspace-betweenspace-around 在container容器还留有空白空间时，该属性的使用会将空白空间划分为多个部分围绕在各个items直接。space-evenly 各个items旁的空白空间宽度是一样的

4.align-items:规定次轴对齐方式 （默认次轴就是纵轴）默认值是stretch

flex-startflex-endcenterstretch 当各个items里面的内容大小不一样，从而导致各个items的高度不一致时，使用该属性会让其他items的高度与容器里面高度更高的items项保持一致。baseline

5.align-content:当有多行内容时

flex-start 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往上靠拢。将空白空间都留在下方flex-end 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往下靠拢。将空白空间都留在上方center 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往中靠拢。将空白空间平均分布在上下两边stretch 让空白空间在各个items之间平均分布space-betweenspace-around

items样式

1.order：默认值是0
规定container里面items的排列顺序，order由小到大排列

2.flex-grow 默认值是0
可以通过该属性扩大items的宽度

.item:first-child{
 flex-glow:1;
}
.item:nth-child{
 flex-glow:2;
}
.item:last-child{
 flex-glow:1;
}

备注：相当于将container容器的宽度平均分，个和最后一个获得一份宽度，中间那份获得两份的宽度。

3.flex-shrink 默认值是1
可以通过该属性将items的宽度进行缩放
属性值为0代表防止items被进行缩放

4.flex-basis
可以通过该属性控制基准宽度
默认值是auto

总体缩写：
flex:flex-grow flex-shrink flex-basis

5.align-self
可以通过该属性定制align-items
备注：align-items是用来规定纵轴对齐方式的，比如你规定align-items的值是flex-start，那么容器里的所有items都会往上顶，加入你想单独控制某一项的对齐方式，可以通过align-self属性来改变。只需要在某个items项的选择器中加入该属性就行了，比如align-self:flex-end.

需要注意的几个样式及属性

display:flex;flex-diection:row/column;flex-wrap:nowrap/wrap;justify-content:conter/space-between;align-items:conter;

使用flex等布局方式进行排版布局时，宽度不要写死

width:50%;min-width:100px;width:30vw; vw代表屏幕宽度的百分之1min-width:80%;

写死的例子：width:100px;

float布局是用于IE布局，如果不需要兼容IE，则都可以用flex布局