子项分组布局的实现方法

最新推荐文章于 2024-08-07 17:18:04 发布

花殇

最新推荐文章于 2024-08-07 17:18:04 发布

阅读量50

点赞数

分类专栏：移动端 css 文章标签： css css3 html

本文链接：https://blog.csdn.net/2302_76953773/article/details/129843954

版权

移动端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

 /* 弹性盒 */
/*         .main{
    height: 200px;
    background-color: skyblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main div:nth-of-type(2){
    display: flex;
    margin-left: 10px;
}
.main .box{
    width: 50px;
    height: 100px;
    background-color: blue;
} */
结构：
 <div class="main">
        <div class="box">1</div>
        <div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </div>

第二种方式
.main{
            height: 200px;
            background-color: aquamarine;
            display: flex;
            align-items: center;
        }
        .main div{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            margin-right: 10px;
        }
        .main div:nth-of-type(3){
            margin-right: auto;
        }
        .main div:nth-of-type(6){
            margin-right: auto;
        }
结构：
<div class="main">
        <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>