flex-direction: row/column
2025-04-15
15
参考资料
flex-direction: row
默认值:子元素水平排列,从左到右。
示例:
.container { display: flex; flex-direction: row; }
<div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
效果:Item 1、Item 2、Item 3 从左到右水平排列。
用法:
适用于需要水平布局的场景(如导航栏、按钮组)。
与
justify-content
和align-items
配合控制对齐方式。
flex-direction: column
作用:子元素垂直排列,从上到下。
示例:
.container { display: flex; flex-direction: column; }
<div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
效果:Item 1、Item 2、Item 3 从上到下垂直排列。
用法:
适用于需要垂直布局的场景(如表单、卡片列表)。
通常与
align-items
控制水平对齐。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。