flex 布局更改横纵轴

在flex布局中，可以使用flex-direction属性来更改主轴的方向。这个属性可以接受四个值：row、row-reverse、column和column-reverse。默认情况下，主轴的方向是row，即水平方向。如果将flex-direction设置为row-reverse，则主轴的方向将反转。如果将flex-direction设置为column，则主轴的方向将变为垂直方向。同样地，如果将flex-direction设置为column-reverse，则主轴的方向将反转为垂直方向。在flex布局中，justify-content属性用于设置子元素在主轴上的对齐方式，align-items属性用于设置子元素在交叉轴上的对齐方式。默认情况下，主轴和交叉轴是分别处理子元素的横轴和纵轴对齐方式的。但是，如果我们修改了flex-direction为column，则justify-content处理的是纵轴对齐方式，align-items处理的是横轴对齐方式。换句话说，它们处理的轴向会交换。因此，通过更改flex-direction属性，我们可以灵活地修改flex布局的横纵轴。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [flex布局](https://blog.csdn.net/weixin_45842954/article/details/123096500)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Flex布局](https://blog.csdn.net/VibMike/article/details/122025046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]