(弹性布局)justify-content的属性案例

莪假裝堅強

已于 2022-08-20 19:32:14 修改

阅读量1.1k

点赞数

分类专栏： # 前端基础文章标签： css css3 html

于 2022-03-12 14:53:30 首次发布

本文链接：https://blog.csdn.net/weixin_47994845/article/details/123443586

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

justify-content一共有五个属性，如下

justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-center
justify-content;space-around

justify-content: flex-start;

<!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>justify-content(主轴方向的排列方式)</title>
    <!-- 一定要用控制变量的方式进行分析 -->
    <style>
        .cont{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 20px auto;

            /* 弹性布局 */
            display: flex;
           /* 弹性方向的变化 */
            justify-content: flex-start;
        }
        
        .cont div{
            width: 30px;
            height: 100px;            
            font-size: 30px;

            /* 小盒子内部的文字居中 */
            line-height: 100px;
            text-align: center;

            background-color: pink;
            margin-left: 5px;
        }
        /* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */
        .cont div:nth-child(1){
            height: 200px;
        }
        .cont div:nth-child(3){
            height: 250px;
        }
        .cont div:nth-child(6){
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

运行结果
在这里插入图片描述 2. justify-content: flex-end;
代码

运行结果

在这里插入图片描述

justify-content:center
代码

运行结果
justofy-content:space-around

<!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>justify-content(主轴方向的排列方式)</title>
    <!-- 一定要用控制变量的方式进行分析 -->
    <style>
        .cont{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 20px auto;

            /* 弹性布局 */
            display: flex;
           /* 弹性方向的变化 */
           /* 相同的下面的会覆盖上面的 */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;  
        }
        
        .cont div{
            width: 30px;
            height: 100px;            
            font-size: 30px;
            /* 小盒子内部的文字居中 */
            line-height: 100px;
            text-align: center;
            background-color: pink;
        }
        /* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */
        .cont div:nth-child(1){
            height: 200px;
        }
        .cont div:nth-child(3){
            height: 250px;
        }
        .cont div:nth-child(6){
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

在这里插入图片描述

justify-content:space-between

<!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>justify-content(主轴方向的排列方式)</title>
    <!-- 一定要用控制变量的方式进行分析 -->
    <style>
        .cont{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 20px auto;

            /* 弹性布局 */
            display: flex;
           /* 弹性方向的变化 */
           /* 相同的下面的会覆盖上面的 */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around; 
            justify-content: space-between; 
        }
        
        .cont div{
            width: 30px;
            height: 100px;            
            font-size: 30px;
            /* 小盒子内部的文字居中 */
            line-height: 100px;
            text-align: center;
            background-color: pink;
        }
        /* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */
        .cont div:nth-child(1){
            height: 200px;
        }
        .cont div:nth-child(3){
            height: 250px;
        }
        .cont div:nth-child(6){
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

运行结果
在这里插入图片描述

莪假裝堅強

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
(弹性布局)justify-content的属性案例

* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 *//* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 *//* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 *//* 相同的下面的会覆盖上面的 *//* 相同的下面的会覆盖上面的 *//* 小盒子内部的文字居中 *//* 小盒子内部的文字居中 *//* 小盒子内部的文字居中 *//* 弹性方向的变化 *//* 弹性方向的变化 *//* 弹性方向的变化 *//* 弹性布局 *//* 弹性布局 */
复制链接

扫一扫