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

js：flex弹性布局

news 2026/3/29 20:14:49

目录

代码：

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弹性布局

目录 代码&#xff1a; 1、 flex-direction 2、flex-wrap 3、justify-content 4、align-items 5、align-content 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewp…...

编程日记 2024/6/7 20:22:29

Pytorch常用函数用法归纳:创建tensor张量

1.torch.arange() (1)函数原型 torch.arange(start,end,step,*,out,dtype,layout,device,requires_grad) (2)参数说明: 参数名称参数类型参数说明startNumber起始值&#xff0c;默认值为0endNumber结束值&#xff0c;取不到&#xff0c;为开区间stepNumber步长值&#xff0…...

编程日记 2024/6/7 20:21:28

WPF前端：一个纯Xaml的水平导航栏

效果图&#xff1a; 代码&#xff1a; 1、样式代码&#xff0c;可以写在窗体资源处或者样式资源文件中 <Style x:Key"MenuRadioButtonStyle" TargetType"{x:Type RadioButton}"><Setter Property"FontSize" Value"16" />…...

编程日记 2024/6/7 20:18:26

谷粒商城实战(033 业务-秒杀功能4-高并发问题解决方案sentinel 1)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第326p-第p331的内容 关注的问题 sentinel&#xff08;哨兵&#xff09; sentinel来实现熔断、降级、限流等操作 腾讯开源的tendis&#xff0c…...

编程日记 2024/6/7 20:17:25

STM32项目分享：智能家居（机智云）系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板及元器件图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…...

编程日记 2024/6/7 20:16:24

游戏盾之应用加速，何为应用加速

在数字化时代&#xff0c;用户对于应用程序的防护要求以及速度和性能要求越来越高。为了满足用户的期望并提高业务效率&#xff0c;应用加速成为了不可忽视的关键。 应用加速是新一代的智能分布式云接入系统&#xff0c;采用创新级SD-WAN跨域技术&#xff0c;针对高防机房痛点进…...

编程日记 2024/6/7 20:14:22

Java 基础面试题

文章目录 重载与重写抽象类与接口面向对象a a b 与 a b 的区别final、finalize、finallyString、StringBuild、StringBuffer位运算反射 重载与重写 重载&#xff1a;是在同一个类中&#xff0c;方法名相同&#xff0c;方法参数类型&#xff0c;个数不同&#xff0c;返回类型…...

编程日记 2024/6/7 20:13:21

Nginx 1.26.0 爆 HTTP/3 QUIC 漏洞，建议升级更新到 1.27.0

据悉&#xff0c;Nginx 1.25.0-1.26.0 主线版本中涉及四个与 NGINX HTTP/3 QUIC 模块相关的中级数据面 CVE 漏洞&#xff0c;其中三个为 DoS 攻击类型风险&#xff0c;一个为随机信息泄漏风险&#xff0c;影响皆为允许未经身份认证的用户通过构造请求实施攻击。目前已经紧急发布…...

编程日记 2024/6/7 20:12:20

uniadmin引入iconfont报错

当在uniadmin中引入iconfont后&#xff0c;出现错误&#xff1a; [plugin:vite:css] [postcss] Cannot find module ‘E:/UniAdmin/uniAdmin/static/fonts/iconfont.woff2?t1673083050786’ from ‘E:\UniAdmin\uniAdmin\static\fonts\iconfont.css’ 这是需要更改为绝对路径…...

编程日记 2024/6/7 20:11:19

Vue3【三】 使用TS自己编写APP组件

Vue3【三】 使用TS自己编写APP组件 运行截图 目录结构 注意目录层级 文件源码 APP.vue <template><div class"app"><h1>你好世界!</h1></div> </template><script lang"ts"> export default {name:App //组…...

编程日记 2024/6/7 20:10:18

数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班&#xff01;小班教学&#xff01;目前还有3个名额&#xff0c;招满为止&#xff01;有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课&#xff01; 这个课程支持升级成双核A…...

编程日记 2024/6/7 20:09:17

Echarts 在指定部分做文字标记

文章目录 需求分析1. demo1样式调整2. demo22. demo3 定位解决需求 实现在Echarts的折线图中，相同Y值的两点之间显示’abc’ 分析 1. demo1 使用 ECharts 的 markLine 功能来在相邻两个点之间添加标记。其中，我们通过设置标记的 yAxis 和 label 来控制标记的位置和显示内…...

编程日记 2024/6/7 20:08:16

如何发布自己的npm插件包

随着JavaScript在前端和后端的广泛应用，npm（Node Package Manager）已成为JavaScript开发者不可或缺的工具之一。通过npm，开发者可以轻松共享和使用各种功能模块，极大地提高了开发效率。那么，如何将自己开发的功能模块发布为npm插件包，与全球的开发者共享呢？本文将进行全…...

编程日记 2024/6/7 20:07:15

AI和机器人引领新一轮农业革命

AI和机器人技术在农业领域的应用正在迅速发展&#xff0c;未来它们可能会实现厘米级精度的自主耕作。 精确种植&#xff1a;AI算法可以分析土壤条件、气候数据和作物生长周期&#xff0c;以决定最佳种植地点和时间。 土壤管理&#xff1a;利用传感器和机器学习&#xff0c;机器…...

编程日记 2024/6/7 20:06:14

【Kubernetes】三证集齐 Kubernetes实现资源超卖（附镜像包）

目录 插叙前言一、思考和原理二、实现步骤0. 资料包1. TLS证书签发2. 使用 certmanager 生成签发证书3. 获取secret的内容 并替换CA_BUNDLE4.部署svc deploy 三、测试验证1. 观察pod情况2. 给node 打上不需要超售的标签【可以让master节点资源不超卖】3. 资源实现超卖4. 删除还…...

编程日记 2024/6/7 20:05:13

国产Sora免费体验-快手旗下可灵大模型发布

自从OpenAI公布了Sora后&#xff0c;震爆了全世界&#xff0c;但由于其技术的不成熟和应用的局限性&#xff0c;未能大规模推广&#xff0c;只有零零散散的几个公布出来的一些视频。昨日&#xff0c;快手成立13周年&#xff0c;可灵&#xff08;Kling&#xff09;大模型发布&am…...

编程日记 2024/6/7 20:04:12

linux嵌入式设备测试wifi信号强度方法

首先我们要清楚设备具体链接在哪个wifi热点上 执行&#xff1a;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…...

编程日记 2024/6/7 20:03:11

【名词解释】Unity的Inputfield组件及其使用示例

Unity的InputField组件是一个UI元素&#xff0c;它允许用户在游戏或应用程序中输入文本。InputField通常用于创建表单、登录界面或任何需要用户输入文本的场景。它提供了多种功能&#xff0c;比如文本验证、占位符显示、输入限制等。 功能特点&#xff1a; 文本输入&#xff…...

编程日记 2024/6/7 20:02:09

Android 安装调试 TelephonyProvider不生效

直接安装TelephonyProvider的时候&#xff0c;&#xff08;没有重启&#xff09;发现数据库没有生效。 猜测应该是原本的数据库没有删除后重建更新。 解决方法&#xff1a;杀掉phone进程 adb shell am force-stop com.android.phone 查看device进程 adb shell ps | grep <…...

编程日记 2024/6/7 20:01:09

【C++】STL中List的基本功能的模拟实现

前言&#xff1a;在前面学习了STL中list的使用方法&#xff0c;现在我们就进一步的讲解List的一些基本功能的模拟实现&#xff0c;这一讲博主认为是最近比较难的一个地方&#xff0c;各位一起加油。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; …...

编程日记 2024/6/7 19:58:06

告别Visio！用Text Flow三分钟搞定纯文本流程图（附实战案例）

用纯文本革命&#xff1a;Text Flow如何三分钟重塑技术文档流程图 在代码注释里直接插入流程图&#xff0c;在Markdown文件中无缝嵌入架构图&#xff0c;无需切换工具就能完成专业图表——这曾是许多开发者的奢望。传统流程图工具如Visio、Draw.io虽然功能强大&#xff0c;但存…...

编程新知 2026/3/29 16:20:23

Kronos金融AI预测模型实战指南：从零构建企业级量化交易系统

Kronos金融AI预测模型实战指南&#xff1a;从零构建企业级量化交易系统 【免费下载链接】Kronos Kronos: A Foundation Model for the Language of Financial Markets 项目地址: https://gitcode.com/GitHub_Trending/kronos14/Kronos 在金融市场这个充满不确定性的战场…...

编程新知 2026/3/29 16:18:21

用Isaac Sim的Action Graph给ROS2机器人发布激光雷达数据：一个完整的传感器仿真流程

用Isaac Sim的Action Graph实现ROS2激光雷达数据仿真&#xff1a;从传感器配置到RViz可视化的全流程指南 在机器人开发和自动驾驶系统测试中&#xff0c;高保真的传感器仿真能够显著降低硬件成本和迭代周期。NVIDIA Isaac Sim作为一款强大的机器人仿真平台&#xff0c;与ROS2生…...

编程新知 2026/3/29 16:06:17

解决B站视频收藏难题的8K超清下载解决方案：Bilidown全解析

解决B站视频收藏难题的8K超清下载解决方案&#xff1a;Bilidown全解析 【免费下载链接】bilidown 哔哩哔哩视频解析下载工具&#xff0c;支持 8K 视频、Hi-Res 音频、杜比视界下载、批量解析&#xff0c;可扫码登录&#xff0c;常驻托盘。 项目地址: https://gitcode.com/gh_…...

编程新知 2026/3/29 15:38:02

OptiScaler高效配置全攻略：多显卡上采样技术实用指南

OptiScaler高效配置全攻略&#xff1a;多显卡上采样技术实用指南 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiScaler是一款…...

编程新知 2026/3/29 15:17:53

libmill实战教程：构建高性能TCP服务器的10个技巧

libmill实战教程&#xff1a;构建高性能TCP服务器的10个技巧 【免费下载链接】libmill Go-style concurrency in C 项目地址: https://gitcode.com/gh_mirrors/li/libmill libmill是一个在C语言中实现Go风格并发的库&#xff0c;它允许开发者轻松创建高性能的网络应用程…...

编程新知 2026/3/29 14:43:41

Reachability.swift终极指南：现代iOS应用网络状态管理完全解析

Reachability.swift终极指南&#xff1a;现代iOS应用网络状态管理完全解析 【免费下载链接】Reachability.swift Replacement for Apples Reachability re-written in Swift with closures 项目地址: https://gitcode.com/gh_mirrors/re/Reachability.swift Reachabilit…...

编程新知 2026/3/29 14:13:22

IIS网站部署实战：从基础配置到安全优化

1. IIS网站部署基础配置 第一次在Windows Server上部署IIS网站时&#xff0c;我踩了不少坑。记得当时为了调试一个简单的ASP网站&#xff0c;折腾了整整一个下午。现在回想起来&#xff0c;其实只要掌握几个关键步骤&#xff0c;就能轻松完成基础部署。 首先需要在服务器管理器…...

编程新知 2026/3/29 13:59:18

玩转LS-DYNA爆破模拟：倾斜长短孔布孔实战

ANSYS/ls-dyna隧道、巷道爆破倾斜长短孔布孔方式下爆破损伤数值模拟 1.讲述小间隔长短型炮孔爆破模型的建模及网格划分全过程&#xff0c;包含网格尺寸设计。 2.装药结构修改&#xff0c;可实现长短炮孔中间隔装药、设置空孔&#xff0c;延期起爆、起爆位置等设置&#xff0c;讲…...

编程新知 2026/3/29 13:57:18

C# rtwpriv Wi-Fi定频工具

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录一、使用简介&#xff0c;说明#前言 对于无线产品&#xff0c;很多需要做CE,FCC,SRRC等认证&#xff0c;需要测试RF&#xff0c;像Realtek方案的Wi-Fi用到rtwpriv工具…...

编程新知 2026/3/29 13:06:26