弹性盒模型基础使用

弹性盒模型

需要一种更加简单,有效的方式来对一个元素的子元素进行排列,布局,对齐,分配空间
主要用 手机 移动端布局 网页也可以是使用

开启弹性盒模型 display:flex;

会将所有的子元素并排成一行,自动分配空间,
子元素宽的不写为零,高不写继承父元素的高度100%

弹性盒模型:

浏览器元素显示的宽 = 元素的设置宽度/所有子元素之和*父元的宽度

主轴控制方向

	flex-direction:row;         主轴向右
	flex-direction:row-reverse;      向左
	flex-direction:column;          向下
	flex-direction:column-reverse;     向上

交叉轴换行

换行 子元素之和大于父元素的宽度

	flex-wrap:nowrap;  不换行
	flex-wrap:wrap;    向下换行
	flex-wrap:wrap-reverse;  向上换行

flex-flow: row wrap;复合写法

主轴多行样式控制

  所有子元素对齐样式
      justify-content: flex-start; 子元素起点对齐
      justify-content: flex-end;  终点对齐
      justify-content: center;    居中 是往中间靠拢

     justify-content:space-between;   两端对齐 中间留有空隙
        子元素之间的间隙= (父元素的宽度- 一行子元素之和)/( 一行元素的个数-1) 
      
     justify-content:space-around;   子元素到父元素之间有空隙  子元素与子元素之间有空隙
        子元素与父元素宽度间隙 = (父元素的宽度- 一行子元素的宽度之和)/(2*一行元素的个数)

        子元素与子元素的间隙 = (父元素的宽度- 一行子元素的宽度之和) / 一行元素的个数
                 
        子元素与父元素宽度间隙是  =子元素与子元素/2

交叉轴 样式

单行属性控制

align-items:flex-start;  起点对齐
align-items:flex-end;    终点位置对齐
	        center       居中
	       baseline      以文本基线对齐
      

交叉轴单行单个个元素的控制

   align-self:flex-start;  起点对齐
             :flex-end;    终点位置对齐
             center       居中

交叉轴多行对其央视

     align-content:flex-start;  起点对齐
     align-content:flex-end;    终点位置对齐
      align-content:center       居中
     align-content:space-between  两端对齐 中间留有空隙
     align-content:space-around   子元素到父元素之间有空隙  子元素与子元素之间有空隙

     子元素与父元素宽度间隙 = (父元素的宽度- 一行子元素的宽度之和)/(2*一行元素的个数)

    子元素与子元素的间隙 = (父元素的宽度- 一行子元素的宽度之和) / 一行元素的个数
                    25
    子元素与父元素宽度间隙是  =子元素与子元素/2

弹性元素的布局 位置改变

在弹性布局元素里才能使用
order: 0; 默认为零 数字越大弹性元素 排序在最后 数字越小弹性元素排序越前

弹性增长因子。

一行必须有剩余空间
flex-grow:0; 默认不扩充
一行都没有弹性增长因子的时候 有一个元素设置增长因子 或占有所有的剩余空间;
元素1的实际 = 元素1的宽度() + (父元素宽度-一行子元素之和)*元素1的弹性增长因子/子元素弹性因子和

弹性缩放因子

一行必须有子元素的宽度之和 大于父元素
flex-shrink: 1; 默认值 不进行缩放
一行都没有弹性缩放因子的时候 就是原本的样式
有一个元素设置缩放因子 该元素就会进行缩小,让出自身元素的空间
计算缩放因子的元素大小=设置元素的宽度-(一行子元素宽度之和-父元素的宽度)*元素缩放因子/元素缩放因子之和

因子复合写法

flex:atuo; 一行剩余空间 就扩大 一行没有剩余空间 就缩小
flex:none; 设置多少就是多少 不扩张 不缩小