关于弹性盒模型

Posted 2020-10-10 学如逆水行舟

思想:通过给父容器设置属性(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