css--弹性盒子flexbox layout，display定义弹性容器-一维布局

弹性：元素可以拉大填充额外的空间

        收缩，适应更小的空间------------------移动 相应式布局

间隙的平均分配。垂直居中，自动占据剩余位置排列分布

可以水平布局、可以垂直布局

两个组成部分：外层弹性容器（flex container） 内层子元素弹性元素（flex item---也可以作为容器进行下一层的嵌套） 

flex container的属性有：

display:flex  让当前盒子成为弹性容器-里面的一些元素自动成为弹性容器

flex-direction 设置按照水平布局还是垂直布局 主轴辅轴

flex-warp 设置元素多的时候是否可以换行：默认不换行 压缩 wrap 

flex-flow 设置所有元素的排布方式 包括（flex-direction flex-warp ）

对齐的方式：

如果前面设置flex-direction为row水平,则主轴为左start 右end

justify-content ：元素在主轴上的对齐方式为start 就是左对齐end center

                space-between两端对齐   space-around拉手对齐（两边一个手臂的距离 中间两个手臂的距离）

如果前面设置flex-direction为row水平,则辅轴为上start 下end

align-items：元素在辅轴上的对齐方式 

        stretch 拉伸当前元素在辅轴上的高度 完整占据弹性容器的高度--如果设置弹性元素高度 此属性值不起作用

align-content：设置多行元素在容器中的整体对齐方式(当行不起左营)

 flex item的属性

flex-grow:每个元素怎样拉大，拉大的比例1容器里面的几等分的几份

flex-shrink 每个元素怎样缩小，0 不压缩 1压缩比例是1

 

flex-basis 基础的宽度：元素在主轴上的默认的尺寸，优先级高于width

flex:组合flex-grow:flex-shrink flex-basis

order 每个元素设定先后的顺序：默认是按照在html中的顺序。值越小越靠前显示

align-self 每个元素单独的设置自己的对齐方式 单个元素在辅轴上的对齐方式