HTML——弹性布局系列属性

 父元素

          1.display: flex  弹性盒子

          2.flex-direction: row  主轴方向 | column 侧轴

          3.flex-wrap: wrap | nowrap  设置换行

          4.设置元素在主轴方向的位置   justify-content:

   1）flex-start  处于开始位置

   2） flex-end  处于末尾位置

   3）center  处于居中位置

   4）space-between（物品均匀分布在行中；第一项在起始行，最后一项在结束行）

   5）space-around(项目均匀分布在行中，周围空间相等)

   6）space-evenly（项目分布使得任何两个项目之间的间距（以及边缘的空间）相等

          设置元素在侧轴方向的位置）

         5. align-items: flex-start | center | flex-end | stretch (拉伸)

         6.设置元素在侧轴方向的位置(和换行一起使用)  align-content:

  1）flex-start

  2） center

  3） flex-end  

         

      子元素

          flex-grow   扩大

          flex-shrink  收缩

          flex-basis   设置尺寸

          flex: 1 2 3;（按比例进行1:1:1,按比例进行2:2:2,按比例进行3:3:3）

          flex: 

          1）lex-grow 扩大、增加

          2) flex-shrink  收缩、减少

          3）flex-basis 基础值、 通过这个属性可以控制元素的尺寸（可以是宽度、也可以是高度具体由flex-direction属性决定。）

          order  设置元素渲染的先后顺序

          align-self 设置元素在侧轴方向的位置