弹性盒布局案例

最新推荐文章于 2024-04-25 20:22:26 发布

终究是错付

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.2k

点赞数

文章标签： html flex

本文链接：https://blog.csdn.net/lizhipeng110/article/details/105036437

版权

在这里插入图片描述
1-6筛子布局

div{
width: 100px;
height: 100px;
background: #ccc;
margin: 100px;
border-radius:10px;
box-shadow:1px 1px 3px 1px #000;
}
p{
/background: yellow;/
}
span{
width: 20px;
height: 20px;
background: #000;
border-radius:10px;
}

        /*一个点*/
        .box1{
            display: flex;/*设置为弹性盒*/
            justify-content:center;/*设置在主轴上居中*/
            align-items:center;/*设置子元素在侧轴居中*/
        }
         
        /*两个点*/
        .box2{
            display:flex;/*设置为弹性盒*/
            justify-content:space-around;/*设置p标签在主轴两端对齐*/
            padding:10px;
            box-sizing:border-box;/*怪异盒模型*/
        }
        .box2 p{
            /*height:20px;
            width: 100px;*/
            /*background: yellow;*/
            display:flex;/*设置为弹性盒*/
        }
        .box2 p:nth-child(2){
            align-items:flex-end;/*span在侧轴上的终点位置*/
        }
         
        /*三个点*/
        .box3{
            display:flex;
            flex-direction: column;/*设置主轴为y轴*/
            justify-content:space-between;/*在主轴两端对齐*/
        }
        .box3 p{
            display:flex;
        }
        .box3 p:nth-child(2){
            justify-content:center;
        }
        .box3 p:nth-child(3){
            justify-content:flex-end;
        }
         
        /*四个点 方式一*/
        .box4{
            display:flex;/*设置为弹性盒*/
            flex-direction: column;/*设置主轴为垂直方向*/
            justify-content: space-between;
        }
        .box4 p{
            display:flex;/*设置为弹性盒*/
            justify-content:space-between;
        }
         
        /*四个点 方式二*/
        .box4-1{
            display:flex;/*设置为弹性盒*/
            justify-content:space-between;
        }
        .box4-1 p{
            display:flex;/*设置为弹性盒*/
            width:20px;
            flex-wrap:wrap;/*子元素换行*/
            align-content:space-between;/*多行子元素的对齐方式*/
        }
         
        /*五个点*/
        .box5{
            display:flex;
            flex-direction:column;/*设置主轴为y*/
            justify-content:space-between;
        }
        .box5 p{
            display:flex;
            /*justify-content:space-around;*/
            justify-content:space-between;
        }
        .box5 p:nth-child(2){
            justify-content: center;
        }
         
        /*六个点*/
        .box6{
            display:flex;
            justify-content:space-between;
        }
        .box6 p{
            display:flex;
            flex-direction:column;
            justify-content: space-between;
        }
         
        /*两个点 使用项目属性*/
        .box2-1{
            display:flex;
            justify-content:space-between;
        }
        .box2-1 span:nth-child(2){
            align-self: flex-end;/*给自己添加,改变自己在侧轴上的对齐方式*/
        }
         
         
         
    </style>
</head>
<body>
    <!--一点-->
    <div class="box1">
        <span></span>
    </div>
     
    <!--两个点-->
    <div class="box2">
        <p><span></span></p>
        <p><span></span></p>
    </div>
     
    <!--三个点-->
    <div class="box3">
        <p><span></span></p>
        <p><span></span></p>
        <p><span></span></p>
    </div>
     
    <!--四个点方式一-->
    <div class="box4">
        <p><span></span><span></span></p>
        <p><span></span><span></span></p>
    </div>
    <!--四个点方式二-->
    <div class="box4-1">
        <p><span></span><span></span></p>
        <p><span></span><span></span></p>
    </div>
     
    <!--五个点-->
    <div class="box5">
        <p><span></span><span></span></p>
        <p><span></span></p>
        <p><span></span><span></span></p>
    </div>
     
    <!--六个点-->
    <div class="box6">
        <p>
            <span></span>
            <span></span>
            <span></span>
        </p>
        <p>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
     
    <div class="box2-1">
        <span></span>
        <span></span>
    </div>
</body>

终究是错付

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
弹性盒布局案例

1-6筛子布局div{width: 100px;height: 100px;background: #ccc;margin: 100px;border-radius:10px;box-shadow:1px 1px 3px 1px #000;}p{/background: yellow;/}span{width: 20px;height: 20px;backgroun...
复制链接

扫一扫