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

弹性盒子布局

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>

结果

(仅展示部分属性测试结果)


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

相关推荐
贵沫末3 分钟前
React——基础
前端·react.js·前端框架
每天开心8 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry15 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9322 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子23 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982423 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug26 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo26 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
软件黑马王子31 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html