flex布局改变主轴
时间: 2023-10-12 13:04:12 浏览: 103
Flex布局中,可以通过设置flex-direction属性来改变主轴的方向。默认情况下,主轴方向是水平的,即从左往右排列。如果想要改变主轴方向,可以使用以下几种取值:
1. row: 将主轴方向设置为水平方向,即从左往右排列(默认值)。
2. row-reverse: 将主轴方向设置为水平方向,但从右往左排列。
3. column: 将主轴方向设置为垂直方向,即从上往下排列。
4. column-reverse: 将主轴方向设置为垂直方向,但从下往上排列。
通过设置flex-direction属性,可以实现对伸缩容器内伸缩项的排列顺序进行改变,从而实现不同的布局效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [关于Flex布局的主轴方向与对齐方式](https://blog.csdn.net/qq_57804294/article/details/129893659)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [CSS篇-03 Flex布局基础讲解(一、主轴与侧轴的改变和对齐)](https://blog.csdn.net/weixin_44552302/article/details/103610372)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]