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

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

2025-10-09 377
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （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
算法
凉凉心.
目录
相关文章
凉凉心.
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
692 0
凉凉心.
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法，以便于把元素组成成多栏布局。 盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒
凉凉心.
1761 1
awbeci
CSS3 flex的使用方法
display:flex; align-items://水平对齐方式 justify-content://垂直对齐方式 flex://盒子所占大小(如果你盒子里面只有两个div，那么你设置其中之一个flex，那么另外一个会自动填充)
awbeci
805 0
二二*一一
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
621 1
游客ib7xsk7hcucuo
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
3743 4
卓伊凡
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
1140 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
1061 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
409 34
卓伊凡
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
1447 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
aliyun8599273441-30642
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
958 66

云原生

热门文章

最新文章

  • 1
    Minikube - Kubernetes本地实验环境
  • 2
    重塑云上的 Java 语言
  • 3
    Docker学习路线图 (持续更新中)
  • 4
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 5
    理解Docker容器的进程管理
  • 6
    咱们从头到尾说一次 Java 垃圾回收
  • 7
    Java编码技巧之高效代码50例
  • 8
    阿里云容器服务-高可用Kubernetes部署指南
  • 9
    在阿里云容器服务上创建一个spring boot应用
  • 10
    业界主流MQ对比
  • 1
    Maven 多模块项目拆分实战：父子结构设计与依赖管理
    24
  • 2
    Maven 打包插件深度实践：jar/war/source 定制
    23
  • 3
    同城外卖怎么上云：高峰削峰、订单-运单解耦与阿里云拼装
    25
  • 4
    从"U盘随便插"到"分级管控+全程留痕"：一次移动存储安全改造复盘
    30
  • 5
    王耀恒：CEO该问CMO的五个GEO问题
    35
  • 6
    云原生开源一周精选：Nacos、LoongSuite、AgentScope 等项目每周更新速览
    181
  • 7
    交互式编程课程的运行时设计：代码执行沙箱、事件溯源进度与内容权限门控
    31
  • 8
    【Azure Container Apps】为什么通过 Diagnostic Settings 发送到 Log Analytics 中的日志会延迟几分钟？
    40
  • 9
    企业终端软件资产治理：理顺工具环境，支撑业务稳定运转
    50
  • 10
    Excelize 开源基础库发布 2.11.1 版本更新
    48

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！