关于justify-content属性的再学习（区分三个属性）

justify-content属性：

用来表示可伸缩项目在主轴方向上的对齐方式；

取值范围为flex-start,flex-end,center,space-between,space-around；

其中flex-start,flex-end,表示相对于主轴起点和终点对齐，center表示居中对齐，space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配，space-around表示居中对齐然后在主轴方向上将剩余空间平均分配。

<!DOCTYPE html>
<html>

<head>
    <title>justify-content几个属性的学习</title>
</head>

<style>
    .flex-container1 {
        display: flex;
        width: 600px;
        height: 230px;
        background-color: #ccc;
        justify-content: space-between;
    }
    
    .flex-container2 {
        display: flex;
        width: 600px;
        height: 230px;
        background-color: #ccc;
        justify-content: center;
    }
    
    .flex-container3 {
        display: flex;
        width: 600px;
        height: 230px;
        background-color: #ccc;
        justify-content: space-around;
    }
    
    .flex-item {
        background-color: red;
        width: 100px;
        margin: 5px;
        color: #fff;
    }
</style>

<body>
    <p>space-between模式（space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配）</p>
    <p> 两端的模块靠边，然后将剩余空间平分 </p>
    <div class="flex-container1">
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
    </div>
    <p>center模式(全部居中显示，但是元素之间不重叠)</p>
    <div class="flex-container2">
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
    </div>
    <p>space-around模式（space-around表示居中对齐然后在主轴方向上将剩余空间平均分配）</p>
    <p> 每个模块均分剩余空间 </p>
    <div class="flex-container3">
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
        <div class="flex-item ">学编程</div>
        <div class="flex-item ">上w3cschool</div>
    </div>
</body>

</html>

posted on 2019-08-13 16:45 qqhfeng16 阅读(638) 评论(0) 编辑收藏举报