3.31_弹性盒模型
作者：互联网
弹性盒模型
2009年，W3C提出了一个新的盒模型，弹性盒模型（flex），用于解决网页布局中的一些问题。
flex的优势
flex布局的子元素不会脱标。- 属性非常丰富，可以灵活使用，更加便捷的为页面布局。
- IE低版本不支持，IE10-11支持度不高。标准浏览器完全支持。
- 移动端支持性也比较高。
弹性盒子
声明定义
使用display:flex或者inline-flex声明一个元素为弹性盒子。此时，该元素中的子元素就会遵循弹性布局。
【注意】
弹性盒子中的子级块级元素会并排显示。
flex与inline-flex的区别
flex：如果没有设置宽高，宽默认为100%，高度为内容的高。
inline-flex：如果没有设置宽高，宽高为内容的宽高。使用的比较少。
弹性盒子的属性
flex-direction
控制子元素排列的方向。
- row 从左到右水平排列子元素（默认值）
- row-reverse 从右到左水平排列子元素
- column 从上到下垂直排列子元素
- column-reverse 从下往上垂直排列子元素
flex-wrap
规定flex容器是单行或者多行。
- nowrap 默认值，元素不会换行。
- wrap 子元素的宽/高总和超出父容器的宽/高时，子元素会换行
- wrap-reverse 容器换行时，以相反的方向。
flex-flow
是flex-direction与flex-wrap的组合简写。
flex-flow：flex-direction flex-wrap
主轴与侧轴（交叉轴）
- 主轴：flex子元素的排列方向。默认是水平方向，从左到右。
- 交叉轴：与主轴垂直，方向是换行的方向。
justify-content
用于控制子元素在主轴上的排列方式。
- flex-start：第一个元素紧靠主轴的起点。
- flex-end：元素紧靠主轴的终点
- center：元素居中
- space-between：第一个元素紧靠起点，最后一个元素紧靠终点，余下元素平均分配剩余空间。
- space-around：每个元素两侧都有一个相同的距离，所以元素间的间隔要比元素与容器之间的间隔大一倍。
- space-evenly：元素间的距离平均分配。
align-items
设置子元素在交叉轴上的对齐方式。
- flex-start:元素紧靠交叉轴的起点
- flex-end：元素紧靠交叉轴的终点。
- center 元素在交叉轴方向居中
- stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。
align-content
设置子元素在交叉轴上的对齐方式。只适用多行。需要配合flex-wrap。
- flex-start:元素紧靠交叉轴的起点
- flex-end：元素紧靠交叉轴的终点。
- center 元素在交叉轴方向居中
- stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。
- space-between：两端对齐，第一行紧靠起点，最后一行紧靠终点，剩余空间平均分配
- space-around：每一个元素都有一个相等的距离，两个元素之间的距离不会重合。元素间的间隔要比元素与容器之间的间隔大一倍。
- space-evenly：元素间的距离平均分配。
弹性元素（项目）
align-self
用于控制单个元素在交叉轴上的排列方式。
- flex-start:元素紧靠交叉轴的起点
- flex-end：元素紧靠交叉轴的终点。
- center 元素在交叉轴方向居中
- stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。
flex-grow
用于将弹性盒子的可用空间，按照比例，分配给弹性元素。
eg：三个盒子的宽相等，总和为600px，父盒子宽为900px，剩下有300px。
设置每个盒子的flex-grow的值分别为：1:2:3， 则将300px分为6份，第一个盒子占1份，第二个盒子2份，第三个盒子占三份。
flex-shrink
弹性盒子的宽小于子元素的总宽时，按照flex-shrink设置的值进行比例收缩。
步骤
- 计算缺少的值。
- 计算每一个盒子的缩小的比例（(元素的宽shrink值)/（元素1的宽shrink值）+（元素2的宽*shrink值）+…）
- 计算每一个盒子应该减少的值。缺少的值*缩小的比例。
- 实际的宽：设置的宽-应该减少的值。
flex-basis
该属性定义了在子元素分配空间之前，占据的主轴空间。
如果盒子需要进行缩放，没有设置flex-basis时，缩放的计算会按照宽高进行计算。如果设置了flex-basis，会按照flex-basis进行计算，而忽略掉设置的宽高。
flex
flex是flex-grow，flex-shrink，flex-basis的缩写。
flex：flex-grow的值 flex-shrink的值 flex-basis的值；
默认值：0 1 auto（主轴的长度）
order
用于控制弹性元素的位置。默认为0，数值越小越在前面。
【注意点】
1.行内元素也会受到弹性盒子的影响。
2.绝对定位的元素会脱离弹性盒子的控制
3.弹性元素设置浮动会无效。
标签：flex,盒子,紧靠,交叉,模型,元素,弹性,3.31 来源： https://blog.csdn.net/m0_56232007/article/details/115361337