flex弹性布局

最新推荐文章于 2024-08-15 18:19:19 发布

衔钰

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量72

点赞数

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

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

版权

css基础知识专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了Flex布局中的主轴对齐方式（justify-content）和侧轴对齐方式（align-items），包括各种对齐选项的含义和效果，并提供了一个实际案例，展示了如何使用Flex布局实现盒子居中对齐。通过这些内容，读者可以更好地掌握弹性布局在网页设计中的应用。

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

结构:display:flex;

把父元素当弹性容器,通过父元素,操作子元素,弹性布局

主轴对齐方式:

/*起点开始依次排序从左到右默认值*/

justify-content: flex-start;

/*终点开始依次排序从右到左 */

justify-content: flex-end;

/* 主轴居中重点*/

justify-content: center;

/* 盒子平均分,比例1:2 */

justify-content: space-around;

/* 盒子平均分,2边要靠边,中间平均分距离重点*/

justify-content: space-between;

/* 盒子平均分,比例为1:1 */

justify-content: space-evenly;

侧轴对齐方式:

/* 侧轴对齐方式子元素默认和父元素高度一样拉伸*/

align-items: stretch;

/* 从上边开始排列默认起点开始排列在上面 */

align-items: flex-start;

/* 从下边开始排列终点开始排列 */

align-items: flex-end;

/* 侧轴居中 ,垂直居中重点*/

align-items: center;

侧轴单独对齐: /* align-self 单独控制子元素 ,取值和align-items一致*/

写一个案例:使用弹性布局让盒子居中

示意图:

代码:

<style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐 */
            justify-content: center;
            /* 侧轴对齐 */
            align-items: center;
        }

        /* 子盒子是弹性盒子 */
        .box .son {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

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

衔钰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局

*align-self单独控制子元素,取值和align-items一致*//*盒子平均分,2边要靠边,中间平均分距离重点*//*从上边开始排列默认起点开始排列在上面*//*从下边开始排列终点开始排列*//*侧轴居中,垂直居中重点*//*终点开始依次排序从右到左*//*盒子平均分,比例为11*//*盒子平均分,比例12*//*侧轴对齐方式子元素默认和父元素高度一样拉伸*//*主轴居中重点*//*起点开始依次排序从左到右默认值*/...
复制链接

扫一扫