js：flex弹性布局
目录
代码：
1、 flex-direction
2、flex-wrap
3、justify-content
4、align-items
5、align-content
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性布局测试</title><style>.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;}.item{width: 40rem;font-size: 4rem;}</style>
</head>
<body><div class="containner"><div class="item" style="background-color: red;">1</div><div class="item" style="background-color: yellow;">2</div><div class="item" style="background-color: green;">3</div><div class="item" style="background-color: indigo;">4</div><div class="item" style="background-color: blue;">5</div><div class="item" style="background-color: salmon;">6</div></div></body>
</html>给item设置一个宽度 原因是默认宽度太小
1、 flex-direction
.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;}设置轴线：横轴 不轴内逆转
其他属性：
/* 1、设置横轴/纵轴 如果加reverse 就是轴内逆转*//*设置横轴*/flex-direction: row;/* 设置纵轴*//* flex-direction: column;*//* 设置横轴逆转 *//* flex-direction: row-reverse; *//* 设置纵轴逆转 *//* flex-direction: column-reverse; */flex-direction: row-reverse; 横轴逆转
2、flex-wrap
换行/列 是否轴外逆转
.containner{background-color: aqua;display: flex;flex-direction: row-reverse;height: 40rem;flex-wrap: wrap;}换行
其他属性：
/**2、是否换行/列 是否轴外逆转//* flex-wrap: wrap; *//**换行 且纵向逆转*//* flex-wrap: wrap-reverse; */3、justify-content
第一轴如何排列（假设：设置的轴称为第一轴）
.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;flex-wrap: wrap;justify-content: center;}中心对称排
其他属性：
/* 3.轴线方向的对称方式 如中心对称 */justify-content: center;/* 起点对其 *//* justify-content: flex-start; *//* 终点对齐*//* justify-content: flex-end; *//* 轴线方向的排列方式 有间隔 *//* 两端中点对齐 两端间隔占0 中间间隔1*//* justify-content: space-between; *//* 区别两边间隔占0.5 中间间隔占1 *//* justify-content: space-around; *//* 所有间隔相等 *//* justify-content: space-evenly; */4、align-items
第二轴是否拉伸以及如何排列 默认是拉伸 /* align-items: stretch; */
保持间距相等
.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;flex-wrap: wrap;justify-content: center;align-items: center;}
其他属性：
/* 4. 另一方向的对齐方式 默认是拉伸*//* align-items: center; *//* 不拉伸 中间对齐 *//* align-items: stretch; *//* 默认的拉伸 *//* align-items: flex-start; *//* align-items: flex-end; */ps:相当于justify-content中间隔方式
/* justify-content: space-between; */
/* 区别两边间隔占0.5 中间间隔占1 */
/* justify-content: space-around; */
/* 所有间隔相等 */
/* justify-content: space-evenly; */
5、align-content
如何对齐
.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;flex-wrap: wrap;justify-content: center;align-items: center;align-content: center;}靠中间对称
其他属性：
/* 5.多个轴线 出现换行时 *//* align-content: center; *//* align-content: flex-start; *//* 纵向不拉伸 */}ps：相当于justify-content中对齐方式
justify-content: center;
/* 起点对其 */
/* justify-content: flex-start; */
/* 终点对齐*/
/* justify-content: flex-end; */
相关文章：
js：flex弹性布局
目录 代码： 1、 flex-direction 2、flex-wrap 3、justify-content 4、align-items 5、align-content 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewp…...
Pytorch常用函数用法归纳:创建tensor张量
1.torch.arange() (1)函数原型 torch.arange(start,end,step,*,out,dtype,layout,device,requires_grad) (2)参数说明: 参数名称参数类型参数说明startNumber起始值，默认值为0endNumber结束值，取不到，为开区间stepNumber步长值࿰…...
WPF前端：一个纯Xaml的水平导航栏
效果图： 代码： 1、样式代码，可以写在窗体资源处或者样式资源文件中 <Style x:Key"MenuRadioButtonStyle" TargetType"{x:Type RadioButton}"><Setter Property"FontSize" Value"16" />…...
谷粒商城实战(033 业务-秒杀功能4-高并发问题解决方案sentinel 1)
Java项目《谷粒商城》架构师级Java项目实战，对标阿里P6-P7，全网最强 总时长 104:45:00 共408P 此文章包含第326p-第p331的内容 关注的问题 sentinel（哨兵） sentinel来实现熔断、降级、限流等操作 腾讯开源的tendis，…...
STM32项目分享：智能家居（机智云）系统
目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板及元器件图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片： 哔哩哔哩视频链接： https://www.bilibili.c…...
游戏盾之应用加速，何为应用加速
在数字化时代，用户对于应用程序的防护要求以及速度和性能要求越来越高。为了满足用户的期望并提高业务效率，应用加速成为了不可忽视的关键。 应用加速是新一代的智能分布式云接入系统，采用创新级SD-WAN跨域技术，针对高防机房痛点进…...
Java 基础面试题
文章目录 重载与重写抽象类与接口面向对象a a b 与 a b 的区别final、finalize、finallyString、StringBuild、StringBuffer位运算反射 重载与重写 重载：是在同一个类中，方法名相同，方法参数类型，个数不同，返回类型…...
Nginx 1.26.0 爆 HTTP/3 QUIC 漏洞，建议升级更新到 1.27.0
据悉，Nginx 1.25.0-1.26.0 主线版本中涉及四个与 NGINX HTTP/3 QUIC 模块相关的中级数据面 CVE 漏洞，其中三个为 DoS 攻击类型风险，一个为随机信息泄漏风险，影响皆为允许未经身份认证的用户通过构造请求实施攻击。目前已经紧急发布…...
uniadmin引入iconfont报错
当在uniadmin中引入iconfont后，出现错误： [plugin:vite:css] [postcss] Cannot find module ‘E:/UniAdmin/uniAdmin/static/fonts/iconfont.woff2?t1673083050786’ from ‘E:\UniAdmin\uniAdmin\static\fonts\iconfont.css’ 这是需要更改为绝对路径…...
Vue3【三】 使用TS自己编写APP组件
Vue3【三】 使用TS自己编写APP组件 运行截图 目录结构 注意目录层级 文件源码 APP.vue <template><div class"app"><h1>你好世界!</h1></div> </template><script lang"ts"> export default {name:App //组…...
数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析
基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班！小班教学！目前还有3个名额，招满为止！有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课！ 这个课程支持升级成双核A…...
Echarts 在指定部分做文字标记
文章目录 需求分析1. demo1样式调整2. demo22. demo3 定位解决需求 实现在Echarts的折线图中，相同Y值的两点之间显示’abc’ 分析 1. demo1 使用 ECharts 的 markLine 功能来在相邻两个点之间添加标记。其中，我们通过设置标记的 yAxis 和 label 来控制标记的位置和显示内…...
如何发布自己的npm插件包
随着JavaScript在前端和后端的广泛应用，npm（Node Package Manager）已成为JavaScript开发者不可或缺的工具之一。通过npm，开发者可以轻松共享和使用各种功能模块，极大地提高了开发效率。那么，如何将自己开发的功能模块发布为npm插件包，与全球的开发者共享呢？本文将进行全…...
AI和机器人引领新一轮农业革命
AI和机器人技术在农业领域的应用正在迅速发展，未来它们可能会实现厘米级精度的自主耕作。 精确种植：AI算法可以分析土壤条件、气候数据和作物生长周期，以决定最佳种植地点和时间。 土壤管理：利用传感器和机器学习，机器…...
【Kubernetes】三证集齐 Kubernetes实现资源超卖（附镜像包）
目录 插叙前言一、思考和原理二、实现步骤0. 资料包1. TLS证书签发2. 使用 certmanager 生成签发证书3. 获取secret的内容 并替换CA_BUNDLE4.部署svc deploy 三、测试验证1. 观察pod情况2. 给node 打上不需要超售的标签【可以让master节点资源不超卖】3. 资源实现超卖4. 删除还…...
国产Sora免费体验-快手旗下可灵大模型发布
自从OpenAI公布了Sora后，震爆了全世界，但由于其技术的不成熟和应用的局限性，未能大规模推广，只有零零散散的几个公布出来的一些视频。昨日，快手成立13周年，可灵（Kling）大模型发布&am…...
linux嵌入式设备测试wifi信号强度方法
首先我们要清楚设备具体链接在哪个wifi热点上 执行：nmcli dev wifi list rootubuntu:/home/ubuntu# nmcli dev wifi list IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS > * 14:EB:08:51:7D:20 wifi22222_5G Infr…...
【名词解释】Unity的Inputfield组件及其使用示例
Unity的InputField组件是一个UI元素，它允许用户在游戏或应用程序中输入文本。InputField通常用于创建表单、登录界面或任何需要用户输入文本的场景。它提供了多种功能，比如文本验证、占位符显示、输入限制等。 功能特点： 文本输入ÿ…...
Android 安装调试 TelephonyProvider不生效
直接安装TelephonyProvider的时候，（没有重启）发现数据库没有生效。 猜测应该是原本的数据库没有删除后重建更新。 解决方法：杀掉phone进程 adb shell am force-stop com.android.phone 查看device进程 adb shell ps | grep <…...
【C++】STL中List的基本功能的模拟实现
前言：在前面学习了STL中list的使用方法，现在我们就进一步的讲解List的一些基本功能的模拟实现，这一讲博主认为是最近比较难的一个地方，各位一起加油。 💖 博主CSDN主页:卫卫卫的个人主页 💞 👉 …...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时，没有加载所有类库。插件运行过程中用到某个类库，会从CAD的安装目录找，找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库，就用插件程序加载进…...