Flex 布局属性详解：从容器到元素的完整指南

Flex 布局是一种强大的工具，可以帮助你创建灵活且响应式的网页布局。Flex 布局的强大之处在于它提供了一套丰富的属性，可以控制容器和元素的排列方式、大小和对齐方式。

Flex 布局属性详解

Flex 布局属性可以分为两类：容器属性和元素属性。

容器属性

display: flex;: 将一个元素设置为 Flex 容器，开启 Flex 布局模式。
flex-direction: row | row-reverse | column | column-reverse;: 设置 Flex 容器内元素的排列方向。
- row: 默认值，元素水平排列，从左到右。
- row-reverse: 元素水平排列，从右到左。
- column: 元素垂直排列，从上到下。
- column-reverse: 元素垂直排列，从下到上。
flex-wrap: nowrap | wrap | wrap-reverse;: 设置 Flex 容器内元素的换行方式。
- nowrap: 默认值，元素不换行，超出容器宽度则溢出。
- wrap: 元素自动换行，从上到下排列。
- wrap-reverse: 元素自动换行，从下到上排列。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;: 设置 Flex 容器内元素在主轴上的对齐方式。
- flex-start: 默认值，元素排列在主轴的起点。
- flex-end: 元素排列在主轴的终点。
- center: 元素排列在主轴的中心。
- space-between: 元素排列在主轴上，两端对齐，剩余空间平均分配。
- space-around: 元素排列在主轴上，两端对齐，剩余空间平均分配，并在每个元素周围留出相同的间隙。
- space-evenly: 元素排列在主轴上，所有元素之间的间隙都相等，包括第一个元素与容器开始之间的间隙和最后一个元素与容器结束之间的间隙。
align-items: flex-start | flex-end | center | baseline | stretch;: 设置 Flex 容器内元素在交叉轴上的对齐方式。
- flex-start: 默认值，元素排列在交叉轴的起点。
- flex-end: 元素排列在交叉轴的终点。
- center: 元素排列在交叉轴的中心。
- baseline: 元素排列在交叉轴的基线。
- stretch: 元素高度拉伸以填满容器高度。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;: 设置多行 Flex 容器内元素在交叉轴上的对齐方式。仅适用于多行 Flex 容器。
- flex-start: 默认值，元素排列在交叉轴的起点。
- flex-end: 元素排列在交叉轴的终点。
- center: 元素排列在交叉轴的中心。
- space-between: 元素排列在交叉轴上，两端对齐，剩余空间平均分配。
- space-around: 元素排列在交叉轴上，两端对齐，剩余空间平均分配，并在每个元素周围留出相同的间隙。
- stretch: 元素高度拉伸以填满容器高度。

元素属性

flex-grow: <number>;: 设置 Flex 容器内元素的放大比例。默认值为 0，表示元素不会放大。
flex-shrink: <number>;: 设置 Flex 容器内元素的缩小比例。默认值为 1，表示元素可以缩小以适应容器。
flex-basis: <length> | auto;: 设置 Flex 容器内元素的基准大小。默认值为 auto，表示元素的基准大小由其内容决定。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]: 设置 Flex 容器内元素的综合属性。
- none: 元素不放大也不缩小，大小由 flex-basis 属性决定。
- [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]: 指定元素的放大比例、缩小比例和基准大小。例如：flex: 1 1 100px 表示元素可以放大、可以缩小，基准大小为 100px。
order: <integer>;: 设置 Flex 容器内元素的显示顺序。数值越小，元素越靠前。默认值为 0。

总结

掌握 Flex 布局属性，可以让你轻松创建灵活且响应式的网页布局。通过组合使用这些属性，你可以实现各种各样的布局效果，满足不同场景的需求。