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

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

2025-10-09 227
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （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
算法
关键词：
CSS元素
CSS属性元素
flex元素
CSS flex属性
flex布局属性
凉凉心.
目录
相关文章
凉凉心.
|
7月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化， 让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 在默认样式中声明元素的初始状态样式； 声明过渡元素最终状态样式，比如悬浮状态； 在默认样式中通过添加
凉凉心.
356 1
凉凉心.
|
7月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transitio
凉凉心.
338 1
凉凉心.
|
7月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
457 1
多加点香菜85
|
容器
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
多加点香菜85
311 0
bug丶小狼人
|
前端开发 容器
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
bug丶小狼人
301 0
anny_4243
|
前端开发
CSS3布局模型
CSS3布局模型
anny_4243
223 0
CSS3布局模型
余二五
|
前端开发 容器
CSS布局模型 之 浮动模型（浮动的工作原理和清除浮动技巧？）
余二五
1400 0
余二五
|
前端开发
CSS布局模型 之 层模型（position的relative、absolute与fixed区别？）
余二五
1393 0
哈沙给
|
前端开发
CSS布局模型
一、流动模型 二.浮动模型 　　块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 　　任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
哈沙给
1228 0
游客ib7xsk7hcucuo
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2983 4

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    重塑云上的 Java 语言
  • 4
    微服务（Microservice）那点事
  • 5
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 6
    Docker学习路线图 (持续更新中)
  • 7
    基于Docker容器的，Jenkins、GitLab构建持续集成CI
  • 8
    谈谈 Docker Volume 之权限管理（一）
  • 9
    容器镜像服务 Docker镜像的基本使用
  • 10
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 1
    【Azure Container App】使用 yaml 部署 Container App 时遇见 400 Bad Request 错误
    31
  • 2
    基于 SelectDB 实现 Hive 数据湖统一分析：洋钱罐全球一体化探索分析平台升级实践
    34
  • 3
    从 T+1 到分钟级：金城银行基于 Apache Doris 构建高可靠、强一致的实时数据平台
    42
  • 4
    想做GEO讲师？先看看自己有没有这“三层底”
    37
  • 5
    Claude Code Routines：给你的代码装上“自动巡航“
    66
  • 6
    等了8年，Go 终于要给 UUID 一个“家“了
    46
  • 7
    Git 2.54发布：重写历史不再“伤筋动骨“，钩子终于能“云同步“了！
    45
  • 8
    containerd 节点 GPU 镜像预热记录
    33
  • 9
    补齐云上可观测性的最后一公里：为什么 APM 看不见用户真实的链路质量
    38
  • 10
    阿里云 OpenClaw / Hermes Agent 一键快速部署方案详解
    53

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    ECS账号安全防护最佳实践