flex调整主轴/多行排列

最新推荐文章于 2024-06-07 17:39:43 发布

衔钰

最新推荐文章于 2024-06-07 17:39:43 发布

阅读量531

点赞数

分类专栏： css基础知识文章标签： css html css3 青少年编程前端

本文链接：https://blog.csdn.net/luzixi/article/details/125963496

版权

本文介绍了如何使用CSS3的flex-direction属性将元素的主轴从水平切换为垂直，以及通过设置flex-wrap为wrap实现多行排列。通过示例代码展示了具体的实现方法。

摘要由CSDN通过智能技术生成

调整主轴:flex-direction: column;

就是把横着的X轴变成竖着

不写了,直接上代码

 <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴默认是X轴 */
            /* flex-direction: row; */
            /* 主轴反方向排列 */
            /* flex-direction: row-reverse; */
            /* 调整主轴,换成Y轴 */
            flex-direction: column;
            /* 调整主轴,换成Y轴反方向排列 */
            /* flex-direction: column-reverse; */
            /* 侧轴居中 */
            align-items: center;
            /* 主轴居中 */
            justify-content: center;
        }

        .box>div {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">老大</div>