Flex布局的基本概念

1.声明Flex容器

父容器display:flex； 此时子容器的块状元素消失变成inline-block ，成为flex项目

flex-container  和flex-items

2.Flex容器的属性

flex-direction ：row   || row-reverse ||center ||column ||column-reverse

让你决定Flex项目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向(使项目整体排列)

flex-direction: row-reverse;

flex-direction: row;

flex-direction: column; /*竖直排列*/

flex-direction: column-reverse;/*反向竖直排列*/

flex-wrap 当项目充满容器是否换行

wrap 换行（默认）

nowrap 不换行

flex-flow：flex-direction flex-wrap的简写

justify-content :flex-start||flex-end||center||space-between||space-around

每个项目水平排列的样式

justify-content: flex-end; /*右边对齐*/

justify-content: flex-start; /*左边对齐*/

justify-content: center; /*居中对齐*/

justify-content: space-between; /*两端对齐 让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）*/

justify-content: space-around; /*让每个Flex项目具有相同的空间。*/

align-items：flex-start||flex-end||center||stretch||baseline

每个项目竖直排列的样式

align-items: flex-end; /*底部*/

align-items: flex-start; /*顶部*/

align-items: center; /*中间*/

align-items: baseline;

height: 500px; /*使用align-items时注意给容器加上高度*/

align-content：和align-items相似

3.flex项目的属性

order || flex-grow || flex-shrink ||flex-basis ||align-self

order：显示的顺序数值越大越往后面显示

li:first-child{

order: 1;

}

li:nth-child(2){

order: 2;

}

flex-grow 控制有多余空间变大

0 代表关   

  1   开

flex-shrink 控制没有多余空间缩小

0 代表关

1   开

有两个弹性项目。一个的 flex-grow 属性值是 1，另一个是 2，那么会出现啥情况呢？

两个项目上的伸展开关都打开了。不过，伸展度是不同的，1 和 2。

二者都会填满可用空间，不过是按比例的。

它是这样工作的：前一个占 1/3 的可用空间，后一个占 2/3 的可用空间。

flex: 1 1 auto; /*能伸能缩*/

flex: 1 0 auto; /*能伸不能缩*/

flex: 0 0 auto; /*不能伸不能缩  固定宽度*/

flex: 0 1 auto; /*不能伸能缩*/

flex: 1 1 auto 根据内容决定大小

flex: 1 1 0  相同宽度

当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间

align-self:/*和align-iteams相似只是这个对于单个项目*/