前端学习之css弹性盒子布局

板栗妖怪2024-03-26 8:46
弹性盒子布局

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        .a{
            /* flex弹性盒子 */
            display :flex;
            width: 600px;
            height: 400px;
            background-color: lawngreen;
            /* 设置排列方向，默认按行排列,column按列排列，可以逆序排列只需要在属性后面加reverse例子cilumn-reverse */
            flex-direction:column ;
            /*当前是横向排列就调整横向布局，纵向就调整纵向布局 
            控制对其，下面是居中，
            flex-start左对其，
            flex-end右对齐，
            space-between将每个标签间的空隙均匀分配
            space-around是将每个标间的周围空隙变得一样
            */
            justify-content: center;
            /* 和justift-content相反
            strecth如果子元素没有高度自动填满父容器
            baseline默认项由子元素内容决定子元素高度
            */
            align-items: stretch;
            /* 控制子元素换行逻辑，wrap赛不下的时候就会换行，默认不换行
            wrap-reverse换行并逆序
            */
            flex-wrap: wrap;
            /* 调整换行后的空间布局，默认均匀分配stretch，flexstart空间往上挪，
            space-between两边占满中间均匀分配
            space-around两边空隙均匀分配*/
            align-content: flex-start;
        }
        .b{
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
        <div class="b">10</div>
        <div class="b">11</div>
        <div class="b">12</div>
    </div>
</body>
</html>
结果

（仅展示部分属性测试结果）
不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚