弹性盒-flex布局

伸缩布局=弹性布局=flex布局

任何元素都可以指定为flex布局，在移动端应用更广泛。

display:flex
justify-content:space-around //自适应

布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父盒子为flex布局后，子元素的float、clear和vertical-align属性将失效。

1. flex布局父项常见属性

flex-direction: 设置主轴方向

justify-content: 设置主轴上子元素排列方式

        space-around : 平分剩余空间

        space-between: 先贴两边，再平分剩余空间

flex-wrap：设置子元素是否换行

        默认nowrap不换行，如果装不开，会缩小子盒子元素宽度，放到父元素里

        wrap：换行

align-items: 设置侧轴上的子元素排列方式（单行）

        Stretch：拉伸,子盒子不要给高度

align-content：设置侧轴上的子元素排列方式（多行） 

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

        column wrap

2. flex布局子项常见元素

flex容器，子元素自动成为容器成员，称为flex项目。简称项目

        flex：定义子项目分配剩余空间，用flex来表示占多少份数

align-self: 控制子项在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-item属性

order: 可以定义项目的排列顺序，数值越小，排列越靠前，默认为0

position：fixed固定定位，固定盒子应该有宽度，与父盒子无关，以屏幕为准

3.        flex:1

指的是 flex: 1 1 auto

flex三个参数分别代表flex-grow、flex-shrink和flex-basis。