flex布局container:justify-content属性

最新推荐文章于 2024-03-08 09:02:48 发布

leigangg

最新推荐文章于 2024-03-08 09:02:48 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/leigangg/article/details/104376657

版权

flex布局container:justify-content属性;

justify-content:

justify-content是决定idems在主轴的对齐方式

        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
            /* justify-content: center; 居中对齐*/
            /* justify-content: flex-start;已start为开始位置进行排列 */
            justify-content: flex-end;/*已end为开始位置进行排列*/
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
        }
        .box2{
            background-color: #0f0;
        }
        .box3{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
    </div>
</body>

代码效果:
在这里插入图片描述
justify-content也可以设置items的中间的排列方式

在这里插   <style>
        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
            /* justify-content: space-between;把主轴的空隙等分在items中间 */
            /* justify-content: space-evenly; 把主轴的空隙等分在items的两边,*/
            justify-content: space-around;/* 把主轴的空隙等分在items的两边,但中间比最两边大两倍*/
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
        }
        .box2{
            background-color: #0f0;
        }
        .box3{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
    </div>
</body>入代码片