DigitalOcean 为您旅程的每个阶段提供云产品。开始使用 200 美元的免费积分!
flex-direction
属性是 弹性盒子布局模块 的子属性。它建立了主轴,从而定义了弹性容器中弹性项目排列的方向。
.element {
flex-direction: column-reverse;
}
提醒:弹性容器的主轴是弹性项目沿其布局的主要轴线。注意,它不一定是水平的;它取决于 flex-direction
属性。
flex-direction
属性接受四个可能的值
row
:与文本方向相同(默认)row-reverse
:与文本方向相反column
:与row
相同,但从上到下column-reverse
:与row-reverse
相同,从上到下
请注意,row
和 row-reverse
受弹性容器的方向性影响。如果其文本方向为 ltr
,则 row
表示从左到右方向的水平轴,row-reverse
表示从右到左方向;如果方向为 rtl
,则相反。
语法
flex-direction: row | row-reverse | column | column-reverse
演示
在下面的演示中
- 红色列表设置为
row
- 黄色列表设置为
row-reverse
- 蓝色列表设置为
column
- 绿色列表设置为
column-reverse
注意:文本方向没有被编辑。
所以基本上,您将在大多数情况下使用 row
,或者在某些情况下使用 column
。否则,反转方向顺序的情况非常少见。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10 1 11 | 全部 | 20-48 2 49+ 3 | 21-28 4 29+ | 7-8 4 9+ | 12.1+ |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
7-8.4 4 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 使用前缀
-ms
支持 - 2 部分支持
- 3 使用前缀
-moz-
支持 - 4 使用前缀
-webkit-
支持
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用 Flexbox” 和 DevOpera 的这篇文章。
更多信息
相关帖子
使用 Flexbox 在支点上平衡
填充高度(或更多)且不压缩的盒子
CSS 中的居中指南
使用 Flexbox 设计产品页面布局
使用 Flexbox 实现等宽列:比您想象的更复杂
grid-auto-flow:CSS Grid :: flex-direction:Flexbox
如何创建无需媒体查询的响应式卡片组件
Flexbox 布局背后的思考过程
相关
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
flex
.element { flex: 1 1 100px; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-content
.element { justify-content: center; }
justify-items
.element { justify-items: center; }
order
place-content
place-items
.element { place-items: center; }
嗨,我最近在使用弹性盒子模型时遇到了麻烦,因为我无法弄清楚如何在 6.1 之前的 Safari 中使
flex-direction: column
工作。-webkit-flex-direction: column
不受支持,简写形式-webkit-flex-flow: column wrap
也不受支持。我在这里发现,为了使用旧的
box-*
语法在 WebKit 浏览器中实现column
方向,我们必须使用-webkit-box-orient: vertical
.我很难找到这些信息,所以我想留下一个评论来帮助任何试图实现真正的跨浏览器弹性支持的人。还有其他人遇到过这个问题吗?
谢谢 Colin!你节省了我很多时间。
真的非常感谢你,Colin :D
我带着完全相同的这个问题来到这篇文章,并在你的评论中找到了解决方案。谢谢!
你太棒了,Colin,这解决了我的确切问题。
哇,Colin,救星!太爱你了!
谢谢,Colin!我在找到你的评论之前,一整天都在试图弄清楚 Safari 哪里出了问题。
嗨
也许我发现它有点晚了,Colin 的发现正是旧版 Safari(3 及我认为最高到 5.1.7 或类似版本)的良药。
非常感谢
Colin,我想我爱死你了!!!! 你救了我 :)))))
该死,谢谢 Colin!也帮我修复了 Chrome。
抱歉,不,毕竟 Chrome 中不起作用了。。
这真的很有帮助。非常感谢!作为 Web 开发人员,我们确实需要更频繁地使用 flex。
CodePan 上的来源在这里
我正在尝试使用 flex box 在视口较小时将页脚固定在视口底部。使用 Colin 的建议,也没有效果。我将 body 样式设置为
body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
display: flex;
flex-direction: column;
min-height: 100vh;
}
并将主要容器设置为
.cont {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Safari 让我感到惊讶。
有谁知道如何解决这个问题吗?
我通常不会在与编程相关的博客中发帖(只在 StackOverflow 上发帖),但 Colin 值得我花时间:谢谢,伙计!
谢谢 Colin,你的解决方案部分有效。我也借鉴了这两篇文章
http://elikirkriser.com/flexbox-css-cross-browser-issues/
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
Ayy,Colin 真是太给力了
我只是想说,谢谢!你帮我摆脱了困境。我尝试在一个使用 flexbox 的模板上修复列,但结果却使用了 Bootstrap 命令。我花了好几个小时才弄明白。感谢你的快速提示!<3
大家好,我遇到了同样的问题。在尝试了很多方法后,我发现了一个对我有效的解决方案。
如果你使用“flex-basis”属性,它会影响“flex-direction”。
如果你可以避免使用“flex-basis”,它就会起作用。
天哪!我不敢相信已经是 2018 年了,我还在使用更新版本的 Google Chrome 遇到这个问题。非常感谢 Collin。这帮我解决了问题!