flex修改主轴方向
在 Flexbox 布局中，可以通过 flex-direction 属性来修改主轴的方向，进而改变 Flex 项目的排列方向。以下为你详细介绍 flex-direction 属性的取值及示例。
flex-direction 属性取值
1. row
- 描述：这是
flex-direction的默认值，主轴为水平方向，Flex 项目从左到右排列。
2. row-reverse
- 描述：主轴同样为水平方向，但 Flex 项目从右到左排列。
3. column
- 描述：主轴变为垂直方向，Flex 项目从上到下排列。
4. column-reverse
- 描述：主轴为垂直方向，Flex 项目从下到上排列。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>.box {display: flex;/* 修改主轴方向 */flex-direction: column;/* 主轴在垂直，视觉效果：垂直居中 */justify-content: center;/* 侧轴在水平方向：水平居中 */align-items: center;width: 150px;height: 120px;background-color: pink;}img {width: 32px;height: 32px;}</style> </head> <body><div class="box"><img src="1.jpg"><span>周冬雨</span></div> </body> </html>
总结
通过修改 flex-direction 属性的值，你可以轻松控制 Flex 项目的排列方向，以满足不同的布局需求。不同的取值会改变主轴的方向，从而影响交叉轴的方向和 Flex 项目的排列顺序。