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

结果

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


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

相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
西西西仓鼠6 小时前
python学习打卡:DAY 40 训练和测试的规范写法
学习
Magnetic_h6 小时前
【iOS】方法与消息底层分析
笔记·学习·macos·ios·objective-c·cocoa
今天背单词了吗9806 小时前
算法学习笔记:19.牛顿迭代法——从原理到实战,涵盖 LeetCode 与考研 408 例题
笔记·学习·算法·牛顿迭代法
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
DKPT8 小时前
Java设计模式之行为型模式(观察者模式)介绍与说明
java·笔记·学习·观察者模式·设计模式
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript