CSS3 flex-direction 属性

flex-direction

该属性用于规划元素的排版方向。

<!-- flex-direction: column; 设置成垂直方向排版 -->

<div style="width:300px; height:200px; display: flex; flex-direction: column;"> 
 <div style="background: red; flex-grow:1;">头部</div> 
 <div style="background: green; flex-grow:3;">内容</div> 
 <div style="background: blue; flex-grow:1;">尾部</div>
</div>

显示效果

头部

内容

尾部

属性值

flex-direction方向设置的一些属性值。

属性	含义
row	默认值，水平方向
row-reverse	水平反转
column	垂直方向
column-reverse	垂直反转

☞ 返回 publish: 8/11/2018, 11:44:15 AM / by: jmjc.tech

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 度量单位 CSS3 文本 CSS3 盒子模型 CSS3 边框 CSS3 背景 CSS3 表格 CSS3 列表 CSS3 变形效果 CSS3 过渡效果 CSS3 动画效果 CSS3 媒体查询 CSS3 浮动布局 CSS3 定位布局 CSS3 多列布局 CSS3 Flex布局 @精简版 - CSS3教程