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

flex布局（3）

news 2025/12/21 13:15:03

九、骰子

*{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

基于 TAPD 进行项目管理

起因自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。操作流程注册 TAPD，需要提供一个企业名新建一个项目&#…...

编程新知 2025/12/16 23:13:47

tomcat指定使用的jdk版本

说明有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置设置方式找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

自然语言处理——文本分类

文本分类传统机器学习方法文本表示向量空间模型特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数文本分类性能评估P-R曲线ROC曲线将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...

编程新知 2025/12/18 2:26:50

STM32标准库-ADC数模转换器

文章目录一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”：输入模块（GPIO、温度、V_REFINT）1.4.2 信号 “调度站”：多路开关1.4.3 信号 “加工厂”：ADC 转换器（规则组注入…...

编程新知 2025/12/19 0:20:35

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等，设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/12/17 5:31:33

结构化文件管理实战：实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题，进而引发后续程序异常。使用工具进行标准化操作，能有效降低出错概率。需要快速整理大量文件的技术用户而言，这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB，…...

编程新知 2025/12/17 20:19:47

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么？ 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元（地址），其核心含义与能力如下： 1. 核心定义地址位宽：CPU或内存控制器用32位…...

编程新知 2025/9/26 20:18:15

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器？ 1.迭代器…...

编程新知 2025/10/2 23:42:13

HTML版英语学习系统

HTML版英语学习系统这是一个完全免费、无需安装、功能完整的英语学习工具，使用HTML CSS JavaScript实现。功能文本朗读练习 - 输入英文文章，系统朗读帮助练习听力和发音，适合跟读练习，模仿学习；实时词典查询 - 双…...

编程新知 2025/12/12 8:17:40

MyBatis-Plus 常用条件构造方法

1.常用条件方法方法说明eq等于 ne不等于 <>gt大于 >ge大于等于 >lt小于 <le小于等于 <betweenBETWEEN 值1 AND 值2notBetweenNOT BETWEEN 值1 AND 值2likeLIKE %值%notLikeNOT LIKE %值%likeLeftLIKE %值likeRightLIKE 值%isNull字段 IS NULLisNotNull字段…...

编程新知 2025/11/4 22:42:32

九、骰子

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 九个点

相关文章：