flex布局

最新推荐文章于 2024-07-26 15:05:55 发布

究极无敌暴龙战神X

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量49

点赞数

分类专栏： Web前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_56101688/article/details/131883709

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

使用flex布局就不需要再像之前一样使用float布局

对父元素添加属性display:flex

默认/flex-start

center：居中

space-between：间距在弹性盒子(子级)之间

space-evenly：所有地方的间距都相等

space-around：子级之间的距离是父级两头距离的2倍

test code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 居中 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;
            
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

align-items: center;居中

align-items: stretch;拉伸,默认值(现有状态,测试的时候去掉子级的高度,否则没有效果) 下图展示去掉子集盒子高度后的效果

单独控制某个盒子

找到想要控制的第几个盒子，添加属性align-self

/* 单独设置某个弹性盒子的侧轴对齐方式 */

.box div:nth-child(2) {

align-self: center;

}

注意：如果子集盒子没给高。默认和父集容器高度一样。（默认stretch，体现出弹性）

如果单独设置某个弹性盒子的侧轴对齐方式，则这个盒子高度和内容一样高

如果不给宽度，则和内容宽度一致

3份 1份

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

究极无敌暴龙战神X

关注

0
点赞
踩
0

收藏

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

拉伸,默认值(现有状态,测试的时候去掉子级的高度,否则没有效果) 下图展示去掉子集盒子高度后的效果。注意：如果子集盒子没给高。如果单独设置某个弹性盒子的侧轴对齐方式，则这个盒子高度和内容一样高。space-around：子级之间的距离是父级两头距离的2倍。space-between：间距在弹性盒子(子级)之间。找到想要控制的第几个盒子，添加属性align-self。space-evenly：所有地方的间距都相等。/* 单独设置某个弹性盒子的侧轴对齐方式 */align-items: center;
复制链接

扫一扫

专栏目录