当前位置：首页 > news >正文

flex布局（3）

news 2026/2/7 16:06:30

九、骰子

*{margin:0;padding: 0;box-sizing: border-box;
}
.flex{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;align-content: space-between;padding:20px;
}
.touzi{width: 120px;height: 120px;background-color: aliceblue;border: 1px solid #000;border-radius: 5px;padding: 10px;margin: 10px;
}
.touzi  .dot{width: 30px;height: 30px;background-color: #000;border-radius: 50%;
}

9.1 各个方位的一个点

    <div class="flex"><div class="touzi"><div class="dot"></div></div></div>

9.1.1 左上

.one-left-top{display: flex;
}
<div class="touzi one-left-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.2 上中

默认row方向，项目在主轴上居中对齐来实现

.one-center-top{display: flex;justify-content: center;
}
<div class="touzi one-center-top"><div class="dot"></div>
</div>

方向设为column，项目在交叉轴上居中来实现

.one-center-top{display: flex;flex-direction: column;align-items: center;
}
<div class="touzi one-center-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.3 上右

主轴方向设为row-reverse方向来实现

.one-right-top{display: flex;flex-direction: row-reverse;
}
<div class="touzi one-right-top"><div class="dot"></div>
</div>

默认row方向，项目在主轴上的排列设为flex-end来实现

.one-right-top{display: flex;justify-content: flex-end;
}
<div class="touzi one-right-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.4 左中

默认主轴方向row，项目在交叉轴上对齐方式是center来实现

.one-left-center{display: flex;align-items: center;
}
<div class="touzi one-left-center"><div class="dot"></div>
</div>

主轴方向设为column，项目在主轴上的排列为center来实现

.one-left-center{display: flex;flex-direction: column;justify-content: center;
}
<div class="touzi one-left-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.5 正中

默认主轴方向row项目在主轴和交叉轴上对齐方式都是center
（主轴方向任意因为只有一个只要在两条轴上方向都是center就好）

.one-center{display: flex;justify-content: center;align-items: center;
}
<div class="touzi one-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.6 右中

默认主轴方向row，项目在主轴上排列为flex-end，项目在交叉轴上排列为center
效果上只有一个项目的时候
flex-direction:row-reverse=flex-direction:row;justify-content: flex-end;

.one-right-center{display: flex;justify-content: flex-end;align-items: center;
}
<div class="touzi one-right-center"><div class="dot"></div>
</div>

主轴方向为column，项目在交叉轴上方向为flex-end，项目在主轴方向上排列为center

.one-right-center{flex-direction: column;justify-content: center;align-items: flex-end;
}
<div class="touzi one-right-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.7 左下

默认主轴方向为row，项目在交叉轴上排列为flex-end来实现

.one-left-bottom{display: flex;align-items: flex-end;
}
<div class="touzi one-left-bottom"><div class="dot"></div>
</div>

主轴方向为column，项目在主轴column上排列方式为flex-end
一个项目的情况下flex-direction:column-reverse = flex-direction:column;justify-content:flex-end;

.one-left-bottom{display: flex;flex-direction:column;justify-content:flex-end;
}
<div class="touzi one-left-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.8 下中

默认主轴方向为row，项目在主轴上排列方向为center，在交叉轴上排列方向为flex-end

.one-center-bottom{display: flex;align-items: flex-end;justify-content: center;
}
<div class="touzi one-center-bottom"><div class="dot"></div>
</div>

主轴方向设为column-reverse，项目在交叉轴上排列在中间

.one-center-bottom{display: flex;flex-direction: column-reverse;align-items: center;
}
<div class="touzi one-center-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.9 下右

默认主轴方向row，项目在主轴上和交叉轴上都是flex-end

.one-right-bottom{display: flex;justify-content: flex-end;align-items: flex-end;
}
<div class="touzi one-right-bottom"><div class="dot"></div>
</div>

主轴方向为column-reverse，项目在交叉轴上排列为flex-end

.one-right-bottom{display: flex;flex-direction: column-reverse;align-items: flex-end;
}
<div class="touzi one-right-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.2 两个点的排列

    <div class="flex"><div class="touzi"><div class="dot"></div><div class="dot"></div></div></div>

9.2.1 上两端

默认主轴方向row，项目在主轴上的排列space-between（两端对齐）

.two-top{display: flex;justify-content: space-between;
}
<div class="touzi two-top"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.2 中两端

默认主轴方向row，项目在主轴上的排列spsce-between(两端对齐)，项目在交叉轴上排列center

.two-center-h{display: flex;justify-content: space-between;align-items:center
}
<div class="touzi two-top-h"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.3 下两端

默认主轴方向row，项目在主轴上的排列spsce-between(两端对齐)，项目在交叉轴上排列flex-end

.two-bottom{display: flex;justify-content: space-between;align-items: flex-end;
}
<div class="touzi two-bottom"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.4 左二

主轴方向column，项目在主轴上的排列spsce-between(两端对齐)

.two-left{display: flex;flex-direction: column;justify-content: space-between;
}
<div class="touzi two-left"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.5 中二

主轴方向为column，主轴上项目排列为space-between，在交叉轴上居中center

.two-center-s{display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
<div class="touzi two-center-s"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 右二

主轴方向为column，主轴上项目排列为space-between，在交叉轴上flex-end

.two-right{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
}
<div class="touzi two-right"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 对角线两端

默认主轴方向为row，主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{display: flex;justify-content: space-between;
}
.two-diagonal .dot:last-child{align-self: flex-end;
}
<div class="touzi two-diagonal"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.7 对角线上两个

默认主轴方向为row，主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{display: flex;
}
.two-diagonal .dot:last-child{align-self: center;
}
<div class="touzi two-diagonal"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.3 三个点的排列

    <div class="flex"><div class="touzi"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div>

9.3.1 上三、横中三、下三、左三、竖中三、右三都跟两点相同不再赘述

在这里插入图片描述

9.3.2 对角线三个

.three-diagonal{display: flex;
}
.three-diagonal .dot:nth-child(2){align-self: center;
}
.three-diagonal .dot:last-child{align-self: flex-end;
}
<div class="touzi three-diagonal"><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.4 四个点的排列

.four-ends{display: flex;flex-wrap: wrap;align-content: space-between;
}
.dots-box{flex-basis: 100%;display: flex;justify-content: space-between;
}
<div class="touzi four-ends"><div class="dots-box"><div class="dot"></div><div class="dot"></div></div><div class="dots-box"><div class="dot"></div><div class="dot"></div></div>
</div>

在这里插入图片描述

9.5 五个点的排列

.five-dots{display: flex;flex-wrap: wrap;align-content: space-between;
}
.dots-box{flex-basis: 100%;display: flex;justify-content: space-between;
}
.five-dots .dots-box:nth-child(2){flex-basis: 100%;display: flex;justify-content: center;
}
<div class="touzi five-dots"><div class="dots-box"><div class="dot"></div><div class="dot"></div></div><div class="dots-box"><div class="dot"></div></div><div class="dots-box"><div class="dot"></div><div class="dot"></div></div>
</div>

在这里插入图片描述

9.6 六个点的排列

9.6.1 在四个点的基础上做改动，css代码一样就是看分两个盒子还是三个盒子仅此而已

在这里插入图片描述

9.6.2 不分盒子直接实现

两排横三

.six-dots-row {display: flex;flex-wrap: wrap;align-content: space-between;
}
<div class="touzi six-dots-row"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

两排竖三

.six-dots-column {display: flex;flex-direction: column;flex-wrap: wrap;align-content: space-between;justify-content: space-between;
}
<div class="touzi six-dots-column"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

tips
3. 七个点和五个点的是一样的
4. 八个点的和六个点一样的

9.7 九个点

.nine-dots{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;align-content: space-between;
}
<div class="touzi nine-dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

flex布局（3）

九、骰子 *{margin:0;padding: 0;box-sizing: border-box; } .flex{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;align-content: space-between;padding:20px; } .touzi{width: 120px;height: 120px;background-color: aliceblue;…...

编程日记 2024/1/18 17:49:25

JVM知识总结

1.概述 JVM指的是Java虚拟机，本质上是一个运行在计算机上的程序，他的职责是运行Java字节码文件，作用是为了支持跨平台特性。功能： 装载字节码，解释/编译为机器码管理数据存储和垃圾回收优化热点代码提升效率 …...

编程日记 2024/1/18 17:48:24

读书笔记-《数据结构与算法》-摘要8[桶排序]

桶排序和归并排序有那么点点类似，也使用了归并的思想。大致步骤如下： 设置一个定量的数组当作空桶。Divide - 从待排序数组中取出元素，将元素按照一定的规则塞进对应的桶子去。对每个非空桶进行排序，通常可在塞元素入桶时进行插入…...

编程日记 2024/1/18 17:47:23

【STM32调试】寄存器调试不良问题记录持续版

STM32寄存器调试不良问题记录 NVIC（内嵌的中断向量控制器）EXTI（外部中断/事件） 记录一些stm32调试过程中：不易被理解、存在使用误区、不清不楚、是坑、使用常识等方面的一些记录。本记录只包含stm32的内核以及外设等寄…...

编程日记 2024/1/18 17:43:17

centos7 arm服务器编译升级安装动态库libstdc++.so.6，解决GLIBC和CXXABI版本低的问题

前言由于centos7内置的libstdc.so.6版本太低，导致安装第三方包的时候，会报“CXXABI_1.3.8”不存在等问题。自带的打印如下： strings /usr/lib64/libstdc.so.6 | grep GLIBC strings /usr/lib64/libstdc.so.6 | grep CXXABI 如图升级注…...

编程日记 2024/1/18 17:41:15

自动驾驶轨迹规划之碰撞检测（三）

欢迎大家关注我的B站： 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 目录 1.基于圆覆盖 2.BVH 3.MATLAB自动驾驶工具箱 4 ROS内置的模型自动驾驶轨迹规划之碰撞检测（一）-CSDN博客自动驾…...

编程日记 2024/1/18 17:39:14

如何用pandas处理财报数据删除金融行业数据

要删除财报数据中的金融行业数据，您可以按照以下步骤使用pandas进行处理： 导入pandas库： import pandas as pd读取财报数据文件： df pd.read_csv(财报数据.csv)查看数据中的行业分类列： print(df[行业分类])确定金…...

编程日记 2024/1/18 17:37:12

oracle 19c容器数据库data dump数据泵传输数据（4）---网络传输

Transporting a Database Over the Network: Example 这个的方式导入可以不需要传输dmp文件，我原本是想从11g导入到pdb2的，但是因为版本的原因，就直接实验从pdb1导入到pdb2吧。这种方式和前面完全传输的方式类似，不需要事先在目…...

编程日记 2024/1/18 17:35:10

IP 网络分为接入网、城域网和骨干网

根据前述的IP 网络设计思想，结合算力网络对正网络的需求分析，卫网络的具体实现可以从架构设计利网络技术两个方面进行总体设计。首先从架构设计上考虑，架构应尽量简化，做到“以简应繁”。因此，整体网络架构不宜设计…...

编程日记 2024/1/18 17:31:04

web3.0基本概念简析

web3.0概念简析 web3.0的发展史 web1.0 仅用于展示，无法进行点赞评论等交互 web2.0 不仅可以展示，还可以上传视频、图片等，用户可以参与创作内容并获取收益。但还是中心化的模型缺点 1 机械化的人机验证 2 账户安全无法保证多年未登陆…...

编程日记 2024/1/18 17:24:58

Linux/Traceback

Enumeration nmap 使用nmap初步扫描发现只开放了22和80端口，端口详细扫描情况如下先看看web是什么样子的，打开网站发现有一条留言，显示该站点已经被黑了， 并且留下了后门查看源代码，可以看到下面的注释 <!--So…...

编程日记 2024/1/18 17:22:56

陶瓷碗口缺口检测-图像分割

图像分割由于对碗口进行缺口检测，因此只需要碗口的边界信息。得到陶瓷碗区域填充后的图像，对图像进行边缘检测。这是属于图像分割中的内容，在图像的边缘中，可以利用导数算子对数字图像求差分，将边缘提取出来。本案…...

编程日记 2024/1/18 17:20:54

2023年第十四届蓝桥杯软件赛省赛总评

报名明年4月蓝桥杯软件赛的同学们，如果你是大一零基础，目前懵懂中，不知该怎么办，可以看看本博客系列：备赛20周合集 20周的完整安排请点击：20周计划每周发1个博客，共20周。在QQ群上交流答疑&am…...

编程日记 2024/1/18 17:19:53

Redis面试大全

1、什么是Redis? Redis是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库。 Redis与其他key-value缓存产品有以下三个特点： Redis支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次…...

编程日记 2024/1/18 17:17:50

MFC为资源对话框添加消息处理函数和初始化控件

现在我VC6新建了一个对话框工程；又在资源添加了一个新的对话框，并为新的对话框添加了名为CTestDlg的类； 在主对话框的cpp文件包含#include "TestDlg.h"； 在主对话框的cpp文件的OnInitDialog()成员函数中，添…...

编程日记 2024/1/18 17:16:49

7.6 MySQL基本函数的使用(❤❤❤)

7.6 MySQL基本函数的使用 1. 提要2. 数字函数3. 字符函数3.1 替换字符3.2 左填充字符及截取字符串 4. 日期函数4.1 日期函数4.2 表达式占位符4.3 日期偏移计算4.4 日期间隔 5. 条件函数5.1 IF语句5.2 case...when语句 1. 提要 2. 数字函数 3. 字符函数 3.1 替换字符 -- INSERT…...

编程日记 2024/1/18 17:04:35

《Redis:NoSQL演进之路与Redis深度实践解析》

文章目录关于NoSQL为什么引入NoSQL1、单机MySQL单机年代的数据库瓶颈 2、Memcached（缓存） MySQL 垂直拆分 （读写分离）3、分库分表水平拆分MySQL集群4、如今的网络架构5、总结 NoSQL的定义NoSQL的分类 Redis入门Redis能干嘛&…...

编程日记 2024/1/18 16:59:30

npm依赖库备份

常用命令设置默认使用本地缓存安装Nodejs时会自动安装npm，但是局路径是C:\Users\Caffrey\AppData\Roaming\npm默认的缓存路径是C:\Users\Caffrey\AppData\Roaming\npm-cache；查看npm的prefix和cache路径配置信息设置路径设置默认使用本地缓存 npm con…...

编程日记 2024/1/18 16:58:29

Python进程池multiprocessing.Pool

环境： 鲲鹏920:192核心内存：756G python：3.9 python单进程的耗时在做单纯的cpu计算的场景，使用单进程核多进程的耗时做如下测试： 单进程情况下cpu的占用了如下，占用一半的核心数： 每一步…...

编程日记 2024/1/18 16:54:24

[leetcode～数位动态规划] 2719. 统计整数数目 hard

给你两个数字字符串 num1 和 num2 ，以及两个整数 max_sum 和 min_sum 。如果一个整数 x 满足以下条件，我们称它是一个好整数： num1 < x < num2 min_sum < digit_sum(x) < max_sum. 请你返回好整数的数目。答案可能很大&#xff…...

编程日记 2024/1/18 16:52:21

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2026/1/15 4:25:16

算法笔记2

1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列文章目录前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量：setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程核心流程商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面代码实现示例（电脑网站支付） 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

2025.6.9总结（利与弊）

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题，从一个接口人不断溯源到另一个接口人。有时候，不知道是谁的责任填。将工作内容分的很细，每个人负责其中的一小块。我清楚的意识到，自己就是个可以随时替换的螺丝钉&…...

编程新知 2025/10/14 3:13:44

基于 HTTP 的单向流式通信协议SSE详解

SSE（Server-Sent Events）详解 🧠 什么是 SSE？ SSE（Server-Sent Events） 是 HTML5 标准中定义的一种通信机制，它允许服务器主动将事件推送给客户端（浏览器）。与传统的 H…...

编程新知 2025/10/28 10:54:22

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀” 在JavaScript中，我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时，单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

编程新知 2025/11/12 20:44:21

RKNN开发环境搭建2-RKNN Model Zoo 环境搭建

目录 1.简介2.环境搭建2.1 启动 docker 环境2.2 安装依赖工具2.3 下载 RKNN Model Zoo2.4 RKNN模型转化2.5编译C++1.简介 RKNN Model Zoo基于 RKNPU SDK 工具链开发, 提供了目前主流算法的部署例程. 例程包含导出RKNN模型, 使用 Python API, CAPI 推理 RKNN 模型的流程. 本…...

编程新知 2026/1/26 18:57:39

九、骰子

9.1 各个方位的一个点

9.1.1 左上

9.1.2 上中

9.1.3 上右

9.1.4 左中

9.1.5 正中

9.1.6 右中

9.1.7 左下

9.1.8 下中

9.1.9 下右

9.2 两个点的排列

9.2.1 上两端

9.2.2 中两端

9.2.3 下两端

9.2.4 左二

9.2.5 中二

9.2.6 右二

9.2.6 对角线两端

9.2.7 对角线上两个

9.3 三个点的排列

9.3.1 上三、横中三、下三、左三、竖中三、右三都跟两点相同不再赘述

9.3.2 对角线三个

9.4 四个点的排列

9.5 五个点的排列

9.6 六个点的排列

9.6.1 在四个点的基础上做改动，css代码一样就是看分两个盒子还是三个盒子仅此而已

9.6.2 不分盒子直接实现

9.7 九个点

相关文章：