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

发布于：2023-01-10 ⋅ 阅读:(236) ⋅ 点赞:(0)

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

  • justify-content:flex-start
  • justify-content:flex-end
  • justify-content:center
  • justify-content:space-center
  • justify-content;space-around
  1. 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;
代码
在这里插入图片描述
运行结果

在这里插入图片描述

  1. justify-content:center
    代码
    在这里插入图片描述
    运行结果
    在这里插入图片描述
  2. 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>

在这里插入图片描述

  1. 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>

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

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布