弹性盒模型
需要一种更加简单,有效的方式来对一个元素的子元素进行排列,布局,对齐,分配空间
主要用 手机 移动端布局 网页也可以是使用
开启弹性盒模型 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; 设置多少就是多少 不扩张 不缩小