flex-direction:
时间: 2024-06-21 11:04:03 浏览: 143
flex教程
`flex-direction` 是 CSS 布局属性之一,用于定义 Flex 容器中项目的排列方向。它控制了子元素(Flex 项目)如何沿着容器的主要轴进行放置。这个属性主要有以下几个值:
1. `row` (默认值): 项目按从左到右的顺序依次排列,主轴为水平轴。
2. `row-reverse`: 项目从右到左排列,主轴仍然是水平轴。
3. `column`: 项目按从上到下的顺序排列,主轴变为垂直轴。
4. `column-reverse`: 项目从下到上排列,但主轴还是垂直轴。
使用 `flex-direction` 可以轻松实现单列、多列布局,或者在响应式设计中切换布局方向。例如,将一个容器设置为 `flex-direction: column` 会在窄屏幕设备上自动调整为垂直布局。
阅读全文