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

结果

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


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

相关推荐
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
茯苓gao7 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
是誰萆微了承諾7 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
gnip7 小时前
JavaScript事件流
前端·javascript
赵得C8 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG8 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904278 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
DKPT8 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
资深前端之路8 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架