仿卢松松博客wordpressseo优化课程
CSS Flexbox（Flexible Box Layout）是一种用于页面布局的CSS3规范，它提供了一种更加高效的方式来布置、对齐和分配容器内元素的空间，即使它们的大小是未知或者动态变化的。Flexbox很容易处理一维布局，即在一个方向上（水平或垂直）。
Flexbox的主要属性
容器属性
display：
-
display: flex;声明一个容器为Flex容器，默认元素横向排列。 -
display: inline-flex;声明一个容器为内联Flex容器。
flex-direction：
-
决定主轴的方向（即元素的排列方向），默认为水平方向。
-
值：
row（水平，从左到右，默认值）、row-reverse（水平，从右到左）、column（垂直，从上到下）、column-reverse（垂直，从下到上）。
flex-wrap：
-
决定元素的换行方式，默认为不换行。
-
值：
nowrap（不换行，默认值）、wrap（自动换行）、wrap-reverse（反向换行）。
justify-content：
-
定义了元素在主轴上的对齐方式。
-
值：
flex-start（左对齐，默认值）、flex-end（右对齐）、center（居中）、space-between（两端对齐，元素之间的空间相等）、space-around（两端等分对齐）、space-evenly（所有元素之间的空间相等）。
align-items：
-
定义元素在交叉轴上的对齐方式。
-
值：
flex-start、flex-end、center、baseline、stretch。
align-content：
-
当有多行时，定义了行在交叉轴上的对齐方式。
-
值：
flex-start、flex-end、center、space-between、space-around、stretch。
元素属性
order：
-
定义元素的排列顺序。
-
数值越小越靠前，默认值为0。
flex-grow：
-
定义元素的放大比例。
-
数值越大，元素占据的空间越大。
flex-shrink：
-
定义元素的缩小比例。
-
数值越大，元素在空间不足时缩小得越多。
flex-basis：
-
定义元素在分配多余空间之前的默认大小。
flex：
-
是
flex-grow、flex-shrink和flex-basis的简写。 -
语法：
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]即flex: 0 0 10px。
align-self：
-
允许单个元素有与其他元素不同的交叉轴对齐方式。
-
值：
auto（继承父容器的align-items值）、flex-start、flex-end、center、baseline、stretch。
注意事项
兼容性：大多数现代浏览器都支持Flexbox，但在一些旧版浏览器中可能需要厂商前缀。
调试：在开发过程中，可以使用浏览器的开发者工具来检查和调试Flexbox布局。
过度约束：Flexbox布局可能会因为多个属性的组合使用而导致“过度约束”，这可能会导致不可预见的布局结果。
性能：Flexbox通常性能很好，但在某些复杂布局或旧版浏览器中可能会导致性能问题。
Flexbox提供了一种更加强大和灵活的方式来创建响应式布局，使得开发者可以轻松地创建复杂的UI界面。