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

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

2025-10-09 101
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云原生网关 MSE Higress，422元/月
可观测可视化 Grafana 版，10个用户账号 1个月
任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格
简介： （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布局属性
凉凉心.
目录
相关文章
凉凉心.
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化， 让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 在默认样式中声明元素的初始状态样式； 声明过渡元素最终状态样式，比如悬浮状态； 在默认样式中通过添加
凉凉心.
167 0
凉凉心.
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transitio
凉凉心.
123 0
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
218 0
全栈若城
|
5月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
全栈若城
187 2
全栈若城
|
5月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
全栈若城
183 0
全栈若城
|
5月前
|
UED 容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
全栈若城
203 0
全栈若城
|
5月前
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
157 0
程序员一鸣
|
8月前
|
开发者 容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
程序员一鸣
230 10
鸿蒙开发：弹性布局Flex
那年春天
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
280 87
那年春天
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
1265 57

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    微服务架构的理论基础 - 康威定律
  • 4
    微服务（Microservice）那点事
  • 5
    3分钟，了解阿里云热门开发者工具 Cloud Toolkit
  • 6
    Docker学习路线图 (持续更新中)
  • 7
    当 Kubernetes 遇到阿里云
  • 8
    基于Docker容器的，Jenkins、GitLab构建持续集成CI
  • 9
    谈谈 Docker Volume 之权限管理（一）
  • 10
    容器镜像服务 Docker镜像的基本使用
  • 1
    这两个开源项目在世界互联网大会乌镇峰会获奖
    27
  • 2
    AI 原生应用开发实战营·京沪双城回顾 & PPT 下载
    32
  • 3
    从 Transform 到 Transformer，用 EventBridge 与百炼构建实时智能的 ETL 数据管道
    26
  • 4
    助力企业构建 AI 原生应用，函数计算 FunctionAI 重塑模型服务与 Agent 全栈生态
    31
  • 5
    AI 原生应用开发实战营·深圳站丨限时报名开启！
    27
  • 6
    故障发现提速 80%，运维成本降 40%：魔方文娱的可观测升级之路
    28
  • 7
    基于springboot的电脑商城系统
    30
  • 8
    如何在实际项目中运用面向对象的继承
    22
  • 9
    GEO与传统SEO：核心目标与优化逻辑的本质区别
    30
  • 10
    一篇文章带你了解什么是云计算，SaaS PaaS IaaS的区别
    30

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    让AI单次生成4万字！WriteHERE：开源AI长文写作框架，单次生成超长文本，小说报告一键搞定！