AI 助理
备案控制台
开发者社区 云原生 文章 正文

（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！

2025-10-09 17
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可观测监控 Prometheus 版，每月50GB免费额度
任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格
Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月
简介： （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！

HTML文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=0"> 
    <title>flex demo</title>
    <link rel="stylesheet" href="css/flexcss.css">
    <style>
    </style>
</head>

<body>
    <div class="container">
        <!--第一个骰子-->
        <div class="row1">
            <span></span>
        </div>
        <!--二个骰子-->
        <div class="row2_0">
            <span></span>
            <span></span>
        </div>
        <div class="row2_1">
            <span></span>
            <span></span>
        </div>
        <div class="row2_2">
            <span></span>
            <span></span>
        </div>
        <div class="row2_3">
            <span></span>
            <span></span>
        </div>
        <!--三个骰子-->
        <div class="row3_0">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row3_1">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row3_2">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row3_3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row3_4">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!--四个骰子-->
        <div class="row4_0">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row4_1">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <!--五个骰子-->
        <div class="row5_0">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <!--六个骰子-->
        <div class="row6_0">
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row6_0">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <!--七个骰子-->
        <div class="row7_0">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row7_1">
            <div class="box">
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!--八个骰子-->
        <div class="row8_0">
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row8_0">
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row8_0">
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="box">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>

CSS文件

@charset "utf-8";
/* CSS Document */
span{
   
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
}
.box{
   
    display: inline-flex;
}
.container{
   
    display: flex;
    flex-wrap: wrap;
    height: 800px;
    background: #fafafa;

}
.container>div{
   
    width: 200px;
    height: 200px;
    margin: 5px;
    background: #EBACAD;
    display: inline-flex;
}
.row1{
   
    justify-content: center;
    align-items: center;
}
.row2_0{
   
    justify-content: space-between;
}
.row2_1{
   
    flex-direction: column;
    justify-content: space-between;
}
.row2_2 {
   
    justify-content: space-between;
}
.row2_2 span:nth-child(2){
   
    align-self: flex-end;
}
.row2_3{
   
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.row3_0{
   
    justify-content: space-between;
}
.row3_1{
   
    justify-content: space-between;
    flex-direction: column;
}
.row3_2{
   
    align-items: flex-end;
    justify-content: space-between;
}
.row3_3{
   
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}
.row3_4{
   
    justify-content: space-between;
}
.row3_4 span:nth-child(2){
   
    align-self: center;
}
.row3_4 span:nth-child(3){
   
    align-self: flex-end;
}
.row4_0{
   
    justify-content: space-between;
    flex-direction: column;
}
.row4_0>div{
   
    justify-content: space-between;
}
.row4_1{
   
    justify-content: flex-start;
    flex-direction: column;
}
.row5_0{
   
    flex-direction: column;
    justify-content: space-between;
}
.row5_0 div{
   
    justify-content: space-between;
}
.row5_0 div:nth-child(2){
   
    align-self: center;
}
.row6_0{
   
    flex-direction: column;
    justify-content: space-between;
}
.row6_0>div{
   
    justify-content: space-between;
}
.row7_0{
   
    flex-direction: column;
    justify-content: space-between;
}
.row7_0>div{
   
    justify-content: space-between;
}
.row7_1{
   
    flex-direction: column;
    justify-content: space-between;
}
.row7_1>div{
   
    justify-content: space-between;
}
.row7_1>div:first-child{
   
    align-self: center;
}
.row8_0{
   
    flex-direction: column;
    justify-content: space-between;
}
.row8_0>div{
   
    justify-content: space-between;
}

💕👉博客专栏

文章标签：
前端开发
Java
容器
Docker
算法
凉凉心.
目录
相关文章
飞云觅宙
|
云栖大会 开发者
收到阿里云【乘风者计划】博主证书和奖励
收到阿里云【乘风者计划】博主证书和奖励 2023年2月对我来说是一个很好的开端，因为我在1号就收到了阿里云寄给我的【乘风者计划】博主证书和奖励。好兆头啊！ 我收到的是我获得的【技术博主】【星级博主】【专家博主】三个的奖品和证书，一快给我寄过来哒！
飞云觅宙
3040 2
收到阿里云【乘风者计划】博主证书和奖励
阿里云开发者
|
29天前
|
SQL 存储 分布式计算
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
本文旨在帮助非专业数据研发但是有高频ODPS使用需求的同学们（如数分、算法、产品等）能够快速上手ODPS查询优化，实现高性能查数看数，避免日常工作中因SQL任务卡壳、失败等情况造成的工作产出delay甚至集群资源稳定性问题。
阿里云开发者
697 33
【万字长文，建议收藏】《高性能ODPS SQL章法》——用古人智慧驾驭大数据战场
凉凉心.
|
23小时前
|
存储 JavaScript Java
（Python基础）新时代语言！一起学习Python吧！（四）：dict字典和set类型；切片类型、列表生成式；map和reduce迭代器；filter过滤函数、sorted排序函数；lambda函数
dict字典 Python内置了字典：dict的支持，dict全称dictionary，在其他语言中也称为map，使用键-值（key-value）存储，具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
凉凉心.
19 0
凉凉心.
|
21小时前
|
JavaScript 前端开发 Java
【GoWails】Go做桌面应用开发？本篇文章带你上手Wails框架！一步步带你玩明白前后端双端的数据绑定！
wails是一个可以让你使用Go和Web技术编写桌面应用的项目 可以将它看作Go的快并且轻量级的Electron替代品。可以使用Go的功能，并结合现代化UI完成桌面应用程序的开发
凉凉心.
22 4
凉凉心.
|
23小时前
|
算法 Java Docker
（Python基础）新时代语言！一起学习Python吧！（三）：IF条件判断和match匹配；Python中的循环：for...in、while循环；循环操作关键字；Python函数使用方法
IF 条件判断 使用if语句，对条件进行判断 true则执行代码块缩进语句 false则不执行代码块缩进语句，如果有else 或 elif 则进入相应的规则中执行
凉凉心.
15 0
凉凉心.
|
21小时前
|
存储 安全 Java
【Golang】（4）Go里面的指针如何？函数与方法怎么不一样？带你了解Go不同于其他高级语言的语法
结构体可以存储一组不同类型的数据，是一种符合类型。Go抛弃了类与继承，同时也抛弃了构造方法，刻意弱化了面向对象的功能，Go并非是一个传统OOP的语言，但是Go依旧有着OOP的影子，通过结构体和方法也可以模拟出一个类。
凉凉心.
14 1
凉凉心.
|
21小时前
|
JSON JavaScript Java
【GoGin】（4）会话控制与参数验证：Cookie使用、Sessions使用、结构体验证参数、自定义验证参数
1. Cookie介绍 HTTP是无状态协议，服务器不能记录浏览器的访问状态，也就是说服务器不能区分两次请求是否由同一个客户端发出 Cookie就是解决HTTP协议无状态的方案之一，中文是小甜饼的意思 Cookie实际上就是服务器保存在浏览器上的一段信息。浏览器有了Cookie之后，每次向服务器发送请求时都会同时将该信息发送给服务器，服务器收到请求后，就可以根据该信息处理请求 Cookie由服务器创建，并发送给浏览器，最终由浏览器保存
凉凉心.
18 5
凉凉心.
|
21小时前
|
开发框架 前端开发 Go
【GoGin】（0）基于Go的WEB开发框架，GO Gin是什么？怎么启动？本文给你答案
Gin：Go语言编写的Web框架，以更好的性能实现类似Martini框架的APInet/http、Beego：开源的高性能Go语言Web框架、Iris：最快的Go语言Web框架，完备的MVC支持。
凉凉心.
15 1
凉凉心.
|
23小时前
|
存储 Java 索引
（Python基础）新时代语言！一起学习Python吧！（二）：字符编码由来；Python字符串、字符串格式化；list集合和tuple元组区别
字符编码 我们要清楚，计算机最开始的表达都是由二进制而来 我们要想通过二进制来表示我们熟知的字符看看以下的变化 例如： 1 的二进制编码为 0000 0001 我们通过A这个字符，让其在计算机内部存储（现如今，A 字符在地址通常表示为65） 现在拿A举例： 在计算机内部 A字符，它本身表示为 65这个数，在计算机底层会转为二进制码 也意味着A字符在底层表示为 1000001 通过这样的字符表示进行转换，逐步发展为拥有127个字符的编码存储到计算机中，这个编码表也被称为ASCII编码。 但随时代变迁，ASCII编码逐渐暴露短板，全球有上百种语言，光是ASCII编码并不能够满足需求
凉凉心.
16 0
凉凉心.
|
21小时前
|
存储 Java Go
【Golang】（3）条件判断与循环？切片和数组的关系？映射表与Map？三组关系傻傻分不清？本文带你了解基本的复杂类型与执行判断语句
在Go中，条件控制语句总共有三种if、switch、select。循环只有for，不过for可以充当while使用。如果想要了解这些知识点，初学者进入文章中来感受吧！
凉凉心.
17 1

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    微服务架构的理论基础 - 康威定律
  • 4
    微服务（Microservice）那点事
  • 5
    Docker的Windows容器初体验
  • 6
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 7
    Docker学习路线图 (持续更新中)
  • 8
    当 Kubernetes 遇到阿里云
  • 9
    容器镜像服务 Docker镜像的基本使用
  • 10
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 1
    内存溢出与内存泄漏：解析与解决方案
    11
  • 2
    零代码改造 + 全链路追踪！Spring AI 最新可观测性详细解读
    14
  • 3
    阿里云微服务引擎 MSE 及 API 网关 2025 年 9 月产品动态
    11
  • 4
    小白零代码模板建站：从选模板到上线的完整攻略
    26
  • 5
    图文解析带你精通时序PromQL语法
    72
  • 6
    【GoGin】（3）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
    18
  • 7
    【SpringBoot（三）】从请求到响应再到视图解析与模板引擎，本文带你领悟SpringBoot请求接收全流程！
    21
  • 8
    【Docker】（2）还在浏览网页寻找Docker命令？本文全面列举与使用Docker里的各个命令！想要什么命令直接从本文拿！
    16
  • 9
    【Golang】（3）条件判断与循环？切片和数组的关系？映射表与Map？三组关系傻傻分不清？本文带你了解基本的复杂类型与执行判断语句
    17
  • 10
    【Docker】（3）学习Docker中 镜像与容器数据卷、映射关系！手把手带你安装 MySql主从同步 和 Redis三主三从集群！并且进行主从切换与扩容操作，还有分析 哈希分区 等知识点！
    28

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    深度 | 从0到3.0，揭秘阿里云洛神云网络的进化之路