弹性盒

一、Flex布局是什么?
给父元素添加的属性
1.设置弹性盒

任何元素都可以设置
display:flex;
display:inline-flex //给行内元素设置弹性盒子
display:-webkit-flex; //webkit(是浏览器的内核，是谷歌浏览器和safari(苹果浏览器)的内核)
display:-webkit-flex //谷歌浏览器和safari(苹果浏览器)的内核
display:-moz-flex 火狐浏览器的内核
display:-ms-flex IE浏览器的内核
display:-o-flex 欧朋浏览器的内核
2.设置Flex布局以后，子元素的float、clear、vertical-align属性将失效

二、给容器设置的属性(6个)
1.flex-direction 设置弹性盒里面子元素的方向，默认是水平排列的

row(默认值:水平) row-reverse（水平方向的翻转） column(垂直) column-reverse（垂直方向的翻转）
2.flex-wrap //设置换行

nowrap(默认值:不换行) wrap wrap-reverse
3.flex-flow //复合属性

包括direction,wrap 默认值:row nowrap

4.justify-content //水平方向的排列方式

flex-start(默认值 左对齐)
flex-end右对齐
center居中
space-between两端对齐
space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
5.align-items //交叉轴的对齐方式（垂直方向的排列方式）

flex-start 交叉轴的起点对齐 flex-end 交叉轴的终点对齐 center 交叉轴的中点对齐 baseline 项目的第一行文字的基线对齐 stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

6.align-content //定义多根轴线的对齐方式

配合着（flex-wrap）一起使用， stretch(默认值) 轴线占满整个交叉轴 flex-start 交叉轴的起点对齐 flex-end 交叉轴的终点对齐 center 交叉轴的中点对齐 space-between 两端对齐
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 强制让文字在一行显示 white-space:nowrap; 设为 Flex 布局以后，子元素的（）、（）和（）属性将失效？ float clear vertical-align 所有网站内容在一屏高度显示，页面中不出现滚动条的页面形式叫做 单屏网页

三、项目的属性（子元素）
1.order

定义每一个项目的排列顺序,数值越小，排列越靠前，默认为0

2.flex-grow

定义项目的放大比例,默认为0 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink

定义项目的缩小比列，默认为1 负值对该属性无效 如果所有项目的flex-shrink属性都为1，当空间不足时，都将比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.flex-basis

是否有剩余空间。默认值auto,即项目的本来大小 定义了在分配多余空间之前，项目占据的主轴空间（main size）

5.flex

复合属性(flex-grow,flex-shrink,flex-basis) 建议优先使用这个属性 默认值:0 1 auto 该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto) 建议优先使用这个属性，而不是单独写三个分离的属性

6.align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items属性。默认值为auto， 表示继承父元素的align-items属性， 如果没有父元素，则等同于stretch。 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 auto flex-start flex-end center baseline stretch