关于弹性盒模型

思想:经过给父容器设置属性(display:flex || inline-flex),让父容器有能力来改变子元素的宽度或者高度,以填满可用空间,(可自适应不一样尺寸设备,故多用于移动端布局)

           弹性盒模型布局在改变子元素排列方向,缩放,拉伸,收缩等方面,较传统布局方式有优点.

ps:1.css3 列在弹性盒模型中不起做用   2.float,clear,vertical-align在flex项目中,不起做用

基础: 首先肯定弹性盒模型分为主轴和侧轴,如上图所示

         flex-direction:做用于父容器元素,肯定主轴的方向,(从而规定子元素的排列方式),属性值有:row(默认方向,由左到右,如上图所示)  row-reverse   column  column-reverse

         flex-wrap :做用于父容器元素,设置或检索子元素超出父元素容器时是否换行, 属性值有: wrap no-wrap(默认) wrap-reverse    

        ( flex-flow=flex-direction+flex-wrap   做用于父容器元素,上面两个属性的二合一,设置或检索子元素的排列方式)

         justify-content: 做用于父容器元素,设置或检索子元素在父元素主轴方向上的对齐方式,属性值有: flex-start flex-end  center space-between space-round 

        align-items: 做用于父容器元素,设置或检索子元素在父元素侧轴方向上的对齐方式,属性值有:flex-start   flex-end   center   baseline   stretch

        align-content:   做用于父容器元素,设置或检索弹性盒堆叠伸缩行(子元素不止一行)的对齐方式,即当弹性盒有多根轴线的时候,属性值:flex-start flex-end center space-                                            between  space-round stretch

         下面的属性都是关于子元素的:

          order:  用整数值来定义排列顺序，数值小的排在前面。能够为负值。

           flex:设置或检索伸缩盒对象的子元素如何分配空间。

          align-self:设置或检索弹性盒对象的子元素自身在侧轴（纵轴）方向上的对齐方式,  auto | flex-start | flex-end | center | baseline | stretch