本文介绍了CSS3的flex布局，一种用于处理未知或动态尺寸内容的现代布局方式。flex布局允许容器灵活调整项目的位置和大小，适用于各种设备和屏幕尺寸。主要属性包括flex-direction、flex-wrap、justify-content、align-items等，可以实现项目排列、换行和对齐。此外，还讨论了order、align-self等项目属性，以及flex属性的简写形式。虽然flex布局的浏览器兼容性有待提高，但其易用性和灵活性使其成为构建组件和小规模布局的理想选择。
css 快速入门之 flex 布局教程
flex 简称弹性布局，是2009年W3C提出的 css3 新属性。
弹性布局（flexible box）模块旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。 最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。 注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。
元素设置为 flex 或者 inline-flex 后，称为容器，不能被继承。容器直接子元素称为项目。 项目的 float、clear 和 vertical-align 属性也无效。
优点在于其容易上手，根据 flex 规则很容易达到某个布局效果。
缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。
| 属性 | 描述 |
| 设置在容器上 | |
| flex-direction | 设置项目的排列方向 |
| flex-wrap | 设置项目换行 |
| flex-flow | 简写：<flex-direction> <flex-wrap> |
| justify-content | 设置项目在主轴方向的对齐方式 |
| align-items | 设置项目在交叉轴的对齐方式 |
| align-content | 设置多根轴线的对齐方式 |
| 设置在项目上 | |
| order | 设置项目的排列顺序 |
| align-self | 设置单个项目的对齐方式 |
| flex-grow | 设置项目的放大比例 |
| flex-shrink | 设置项目的缩小比例 |
| flex-basis | 设置项目的基准值 |
| flex | 简写：<flex-grow> <flex-shrink> <flex-basis> |
扫一扫
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
