超级会员免费看
Flexbox是CSS3的一种布局模式，能自动调整元素尺寸适应不同屏幕，避免内容溢出。它简化了复杂的布局实现，支持子元素的排列、顺序调整和对齐。Flexbox布局与传统块级和行内元素布局不同，是方向无关的，适用于各种方向和大小调整的场景。主要概念包括主轴、交叉轴、主轴起点和终点、交叉轴起点和终点。在编写Flexbox代码时，需要注意兼容旧版浏览器。虽然它可以与其他布局系统配合，但需要抛弃旧的布局思维。了解和掌握最新规范至关重要。
Flexbox布局概念
Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，例如对齐方式，排列方向，排列顺序（这也是Flexbox布局的核心能力所在），弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。
不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局，弹性盒布局的算法是方向无关的。 虽然块级元素布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更
订阅专栏 解锁全文
扫一扫
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
