felx弹性盒子布局原理：通过给父元素添加display:felx属性，来控制子元素的位置和排列方式；
常见的父项属性（以下6个属性是对父元素设置的）
-
flex-direction:设置主轴的方向； flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴y轴。 默认主轴方向就是X轴方向，水平向右。 默认侧轴方向就是y轴方向，水平向下。属性值 说明 row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从上到下 -
justify-content:设置主轴上子元素排列方式；注意：确定主轴方向，此属性是设置主轴上子元素排列方式的；
属性值 说明 flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右排列 flex-end 从尾部开始排列 center 在主轴居中对齐（如果主轴是X轴则水平居中） space-around 平分剩余空间 space-between 先两边贴边 在平分剩余空间（重要） -
flex-wrap:设置子元素是否换行 no-wrap；属性值 说明 nowrap 默认值子元素不会换行，如果装不下会自动缩小子元素的大小 wrap 换行 -
align-content:设置侧轴的子元素排列方式（多行）;注意：设置子元素在侧轴上的排列方式并且是能用于子项出现换行的情况（多行），在单行下是没有效果的。
属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子元素在侧轴平分剩余空间 space-between 子元素在侧轴先分布在两头，再平分剩余空间 stretch 设置子元素高度平分父元素高度 -
align-items:设置侧轴上的子元素排列方式（单行）;注意：align-items 适用于单行的情况下使用；
属性值 说明 felx-start 默认值 从上到下 felx-end 从下到上 center 挤在一起居中对齐（垂直居中） stretch 拉伸，如果子元素没有设置高度，设置stretch后会拉伸到和父元素一样的高度，注意如果子元素设置了高度则不会生效； -
flex-flow:复合属性，相当于同时设置了flex-direction 和felx-wrap;flex-flow:column wrap； 设置主轴方向为y，设置自动换行；
felx布局中子元素常见属性
- flex子元素占的份数(flex:0 1 auto)；
- flex-grow(所有子项宽度小于flex容器的时候分配剩余空间的系数) 剩余空间分配比例，值为数字，默认值0；
- flex-shrink(所有子项宽度大于flex容器的时候收缩空间的系数) 溢出空间收缩比例，值为数字，默认值1；
- flex-basis(子项基础宽度大小，单位为px) flex项目的基础宽度，默认值未auto;
- flex属性定义子元素分配剩余空间，用flex来表示占多少份数。
- align-self控制子元素自己在侧轴的排列方式；
-
align-self属性允许单个子元素与其他子元素不一样的对齐方式，可覆盖align-items属性的样式。
-
默认值为auto,表示继承父元素align-items属性；
-
它的属性值和align-items是一样的；
-
order属性定义子元素的排列顺序（前后顺序）；
属性值是一个数值，数值越小排列越靠前，可以设置负数；
给对应的子元素设置 order：-1；
