[flex]flex-direction: column；

阿珊和她的猫

已于 2024-09-11 22:07:35 修改

阅读量3.2w

点赞数 24

CC 4.0 BY-SA版权

文章标签：前端 css3 css flex

于 2020-11-27 17:43:03 首次发布

本文链接：https://blog.csdn.net/weixin_42554191/article/details/110238661

本文介绍Flex布局中flex-direction属性的使用方法，包括不同属性值的效果展示，并特别指出Safari浏览器的支持情况以及Internet Explorer的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
    width: 400px;
    height: 400px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: column;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-direction 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-direction 属性支持该属性。</p>

</body>
</html>