码农教程 - 一技在手,衣食无忧! tools

目录

CSS flex-direction 属性

❮上一节 完整的CSS参考 下一节❯

示例

以相反的顺序设置 <div> 元素内灵活项目的方向：

div {
  display: flex;
  flex-direction: row-reverse;
}
亲自试一试 »

提示：下面有更多 "亲自试一试" 示例。

定义和用法

这个flex-direction属性指定灵活项目的方向。

笔记：如果该元素不是灵活项，则flex-direction属性没有影响。

展示演示❯

默认值： 排
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.flexDirection="column-reverse"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
flex-direction 29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0

CSS 语法

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性值

Value Description Play it
row Default value. The flexible items are displayed horizontally, as a row Demo ❯
row-reverse Same as row, but in reverse order Demo ❯
column The flexible items are displayed vertically, as a column Demo ❯
column-reverse Same as column, but in reverse order Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

使用flex-direction和...一起媒体查询为不同的屏幕尺寸/设备创建不同的布局：

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}
亲自试一试 »

相关页面

CSS 教程：CSS 灵活盒

CSS 参考：弹性流属性

CSS 参考：flex-wrap 属性

CSS 参考：弹性属性

CSS 参考：弹性增长属性

CSS 参考：伸缩收缩属性

CSS 参考：弹性基础属性

HTML DOM 参考：flexDirection 属性


❮上一节 完整的CSS参考 下一节❯