标签：flex 盒子 紧靠 交叉 模型 元素 弹性 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。