flex布局之设置主轴方向

最新推荐文章于 2024-07-15 18:55:46 发布

dream_of_forget

最新推荐文章于 2024-07-15 18:55:46 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： css html css3

本文链接：https://blog.csdn.net/dream_of_forget/article/details/125919558

本文介绍了CSS3的flex布局，重点讨论了如何改变主轴方向以及设置侧轴对齐方式。主轴默认为水平方向，通过`flex-direction`属性可以调整为主轴为垂直方向。当设置`flex-wrap`为`wrap`时，子元素会在一行内显示，不自动换行。此外，文章还提到了`align-items`和`align-content`用于侧轴的单行和多行垂直对齐方式。

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

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

flex-direction：column;

 .box {
            width: 400px;
            height: 400px;
            background-color: rebeccapurple;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

修改完毕，主轴是Y轴，侧轴是X轴

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

        .box {
            width: 900px;
            height: 450px;
            background-color: aqua;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            /* align-items: center; */
        }

        .box>div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box>div:nth-child(2n) {
            background-color: red;
        }

flex-wrap: wrap;