弹性盒模型

弹性盒模型详述

flex 可以让元素具有弹性, 可以随着页面大小改变 ; 由弹性容器和弹性元素组成

当某盒子设置display:flex时便成为弹性容器，里面的子元素注意是子元素是弹性元素

1. 弹性元素不会脱离文档流
2. 弹性元素会强制转换成不会占据一行的特殊块元素(不是行内块)
3. 会生成主轴侧轴 无论主轴位置如何变化 侧轴永远垂直主轴 弹性元素会沿着主轴排列

弹性容器相关属性

1.设置主轴方向 flex-direction: row ;

// row 主轴水平方向排列 默认值
// column 主轴垂直方向排列      
// row-reverse 主轴反向排列
// column-reverse 垂直方向反向排列
flex-direction: row-reverse;

最好使用flex-start /flex-end 避免使用start end 如下所示二者不完全相同

2.弹性元素在主轴上的排列方式 justify-content: start;

// 默认值是flex-start 还可以设置为 center  flex-end 
// 设置上述三个属性时可以把多个元素看成整体 , 位于主轴起点 位于主轴中间 位于主轴终点

// 设置下面两属性未生效 可能是弹性父元素的宽度或高度不够
// space-between 第一个和最后一个弹性元素位于主轴起点终点 剩余空间平分
// space-around 剩余空间平分 
justify-content: start;

3.弹性元素的换行方式 flex-wrap:nowrap;

// 默认值是nowrap 不换行弹性元素会等比例压缩
// 可以设置为wrap 不压缩进行换行(会均分侧轴空间)

4.弹性元素在侧轴上的排列方式

align-items: stretch 控制一行侧轴的排列方式(推荐一个侧轴时使用)

// flex-start 位于侧轴起点
// flex-end 位于侧轴终点
// center 位于侧轴中间
// stretch 默认值 在未设置弹性元素高度/宽度时 会占满整个侧轴空间

align-content 控制多行侧轴的排列方式(推荐多个侧轴时使用)

// flex-start flex-end center space-around space-between

弹性元素相关属性

1.flex-shrink: 当容器宽度缩小时 , 弹性元素按照比例进行缩放 值越大缩小的越多 默认值是1

如三个元素分别设置 1 1 2
当弹性父元素大小大于该三个元素大小时不会缩小
当弹性父元素大小等于三个元素大小再缩小40px时 分别缩小 10 10 20

2.flex-grow: 当容器扩大时 , 弹性元素按照设置的比例进行扩大 值越大扩大越多 默认值是0

3.flex-basis : 弹性元素在主轴方向上的默认大小 优先级比设置的宽度/高度高 默认值auto

4.order 弹性元素排列优先级 值越小越靠前 默认值是0

5.align-self : 单独设置某个元素在侧轴上的排列方式 单条侧轴生效 多条侧轴不设置align-content时生效

最后有一个复合写法 flex: grow shrink basis