弹性盒子和响应式

1.弹性盒子

是一种新的布局模式，能够有能力控制子元素的排列。

1.语法：

display:inline-flex   |  flex

inline-flex项目多宽容器就多宽

flex容器的宽度占父元素的整行

【弹性容器、伸缩盒子】

2.专业术语：

容器：被设置成弹性盒子的元素

项目：容器的子元素

主轴：项目排列的方向所在的轴

侧轴/交叉轴：与主轴垂直的轴

3.容器身上的属性

1.设置主轴的方向

flex-direction:row（默认） | column | row-reverse | column-reverse;

2.设置项目是否换行

flex-wrap:nowrap（默认） | wrap换行 | wrap-reverse换行且反向;

3.设置项目在主轴上的排列

justify-content:flex-start | center | flex-end | space-between间隔在之间 | space-around周围 | space-evenly均分;

4.设置项目在侧轴方向的排列

align-items:stretch拉升铺满（默认） | flex-start | center | flex-end | baseline;

stretch是默认值，但是如果项目设置了高度，就以项目高度为准！

5.设置多根轴线，项目的排列

align-content：stretch拉升铺满 | flex-start | center | flex-end | space-between间隔在之间 | space-around周围 | space-evenly;

注意：单根轴无效哦！！

6.同时设置主轴方向和项目换行

flex-flow:方向 是否换行；

2.项目身上的属性

1.放大项目

flex-grow:0 | 数字；

说明：默认为0，不放大，如果为其他数字代表要放大的份数。（刚好占满剩余盒子空间）

2.缩小项目

flex-shrink:1 | 0 | 数字；

说明：默认为1 会缩小，设置为0不缩小，为其他数字则代表缩小的份数。

3.放缩的复合属性

flex:flex-grow  flex-shrink  flex-basis
默认值： 0             1           auto

flex:1; 	对应含义：	1 1 auto ,
但是在新版本浏览器中对应的是1 1 0%

意味着容器宽度不够的时候，该项目的宽度会只有内容撑大的那么宽

4.项目单独的对齐方式

align-self:stretch | flex-start | center | flex-end |baseline;

5.项目的基准尺寸==width

flex-basis:auto;

6.项目的排序

order:数字;
默认为0 ，排序从小到大，可正可负

注意：弹性盒子中float,clear,vertical-align都将失效