前端学习之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>

结果

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


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

相关推荐
新手村领路人9 小时前
Firefox自定义备忘
前端·firefox
普蓝机器人9 小时前
AutoTrack-IR-DR200仿真导航实验详解:为高校打造的机器人学习实践平台
人工智能·学习·机器人·移动机器人·三维仿真导航
乖女子@@@9 小时前
css3新增-网格Grid布局
前端·css·css3
伐尘10 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e10 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost10 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
m0_5782678610 小时前
从零开始的python学习(九)P142+P143+P144+P145+P146
笔记·python·学习
UrbanJazzerati10 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪10 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme10 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试