📌 相关文章
- CSS Flexbox(1)
- flexbox 3 列 - CSS (1)
- flexbox - CSS (1)
- flexbox css (1)
- flexbox css 代码示例
- css 代码示例中的 flexbox
- flexbox - CSS 代码示例
- flexbox 3 列 - CSS 代码示例
- flexbox 元素 - CSS (1)
- flexbox (1)
- 如何使用 css flexbox - CSS (1)
- flexbox 元素 - CSS 代码示例
- 在 flexbox 中显示 - CSS (1)
- 如何使用 css flexbox - CSS 代码示例
- 在 flexbox 中显示 - CSS 代码示例
- CSS Flexbox 简介
- CSS Flexbox 简介(1)
- CSS Flexbox 简介(1)
- CSS Flexbox 简介
- css flexbox 语法 - CSS (1)
- css 中的响应式 flexbox(1)
- css flexbox 语法 - CSS 代码示例
- css 代码示例中的响应式 flexbox
- flexbox 之间的空间 - CSS (1)
- flexbox - 任何代码示例
- flexbox 之间的空间 - CSS 代码示例
- CSS Flexbox 及其属性(1)
- CSS Flexbox 及其属性
- CSS Flexbox 及其属性(1)
📜 CSS Flexbox
📅 最后修改于: 2020-11-05 05:52:07 🧑 作者: Mango
CSS Flexbox
CSS3柔性框也称为CSS Flexbox，是CSS3中的一种新的布局模式。
CSS3 flexbox用于使元素在不同屏幕尺寸和不同显示设备上使用时具有可预测的行为。它提供了一种更有效的方式来布局，对齐和分配容器中各个项目之间的空间。
它主要用于使CSS3能够更改其项目的宽度和高度，以最适合所有可用空间。它优于块模型。
CSS3 flexbox包含flex容器和flex项目。
Flex容器：flex容器指定父级的属性。通过将元素的显示属性设置为flex或inline-flex来声明。
弹性项目：弹性项目指定子项的属性。一个伸缩容器内可能有一个或多个伸缩项目。
注意：Flexbox指定如何在flex容器内设置flex项目。它沿着弹性线在弹性容器内设置弹性项目。默认情况下，每个伸缩容器只有一条伸缩线。在伸缩容器外部和伸缩项目内部的所有内容均视为正常情况。
让我们以一个示例显示一个flex容器中的三个flex项目。默认情况下，它们沿着水平伸缩线从左到右设置：
请参阅以下示例：
flex item 1
flex item 2
flex item 3
您还可以通过使用direction属性来更改柔线的方向。如果要从右到左设置方向线，则将direction属性设置为rtl。
请参阅以下示例：
flex item 1
flex item 2
flex item 3
CSS3 Flexbox属性
以下是CSS3 Flexbox属性的列表：
| property | description |
|---|---|
| display | it is used to specify the type of box used for an html element. |
| flex-direction | it is used to specify the direction of the flexible items inside a flex container. |
| justify-content | it is used to align the flex items horizontally when the items do not use all available space on the main-axis. |
| align-items | it is used to align the flex items vertically when the items do not use all available space on the cross-axis. |
| flex-wrap | it specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. |
| align-content | it is used to modify the behavior of the flex-wrap property. it is similar to align-items, but instead of aligning flex items, it aligns flex lines. |
| flex-flow | it specifies a shorthand property for flex-direction and flex-wrap. |
| order | it specifies the order of a flexible item relative to the rest of the flex items inside the same container. |
| align-self | it is used on flex items. it overrides the container’s align-items property. |
| flex | it specifies the length of a flex item, relative to the rest of the flex items inside the same container. |
支持的浏览器
| Property |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
|---|---|---|---|---|---|
| basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
12.1 -webkit- | 6.1 -webkit- |
| multi-line flexbox | 29.021.0 -webkit | 11.0 | 28.0 | 17.0 15.0 -webkit- 12.1 |
6.1 -webkit- |