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

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

2025-10-09 314
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （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
算法
凉凉心.
目录
相关文章
凉凉心.
|
10月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
592 0
凉凉心.
|
10月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法，以便于把元素组成成多栏布局。 盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒
凉凉心.
1520 1
全栈若城
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
全栈若城
469 2
全栈若城
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
全栈若城
441 0
全栈若城
|
UED 容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
全栈若城
392 0
程序员一鸣
|
开发者 容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
程序员一鸣
418 10
鸿蒙开发：弹性布局Flex
全栈若城
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
441 0
那年春天
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
1749 57
我是快乐的嘟嘟
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
770 34

云原生

热门文章

最新文章

  • 1
    Minikube - Kubernetes本地实验环境
  • 2
    重塑云上的 Java 语言
  • 3
    微服务（Microservice）那点事
  • 4
    Docker的Windows容器初体验
  • 5
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 6
    Docker学习路线图 (持续更新中)
  • 7
    利用Zipkin对Spring Cloud应用进行服务追踪分析
  • 8
    基于Docker容器的，Jenkins、GitLab构建持续集成CI
  • 9
    谈谈 Docker Volume 之权限管理（一）
  • 10
    容器镜像服务 Docker镜像的基本使用
  • 1
    终端安全建设实践：企业文档资产全生命周期防护方案
    15
  • 2
    同城外卖系统：云上订单和结算数据怎么分开存储
    20
  • 3
    网页CAD中对象捕捉使用和二开方法（BS架构集成使用CAD）
    18
  • 4
    开眼了！AI 应用还从零搭？11.7 万 Star awesome-llm-apps 把 Agent/RAG/MCP 模板摆成夜市
    20
  • 5
    SOA 没死,只是改了名
    22
  • 6
    从零搭建AI智能体：OpenClaw 阿里云云部署、订阅开通、对接配置百炼Coding Plan与Token Plan与排错完整指南
    22
  • 7
    ③ 约束显化：把隐含的语义假设变成显式规则
    26
  • 8
    wordpressHPA
    35
  • 9
    389. 找不同
    29
  • 10
    95% 的业务分析交给 AI 后，Anthropic 数据团队做对了什么？
    51

    • 相关课程

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

    • 相关电子书

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