Flex的基本使用+综合案例

组成

弹性盒子没有设置高,就会自动拉伸

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-组成</title><style>/* 弹性容器 */.box {display: flex;height: 300px;border: 1px solid #000;}/* 弹性盒子:沿着主轴方向排列 */.box div {width: 200px;/* height: 100px; */background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div></div></body></html>

主轴对齐方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-主轴对齐方式</title><style>.box {display: flex;/* justify-content: flex-start; *//* justify-content: flex-end; *//* 居中 *//* justify-content: center; *//* 父级剩余的尺寸分配成间距 *//* 弹性盒子之间的间距相等 *//* justify-content: space-between; *//* 间距出现在弹性盒子两侧 *//* 视觉效果:弹性盒子之间的间距是两端间距的2倍 *//* justify-content: space-around; *//* 各个间距都相等 */justify-content: space-evenly;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body></html>

侧轴对齐方式

如果没有设置侧轴对齐方式和弹性盒子的高度,默认是stretch。

这也是为什么上面有提到,高度没设置会自动拉伸的原因

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-侧轴对齐方式</title><style>.box {display: flex;/* 弹性盒子在侧轴方向没有尺寸才能拉伸 *//* align-items: stretch; *//* align-items: center; *//* align-items: flex-start; */align-items: flex-end;height: 300px;border: 1px solid #000;}/* 第二个div,侧轴居中对齐 */.box div:nth-child(2) {align-self: center;}.box div {width: 200px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div></body></html>

修改主轴方向

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-修改主轴方向</title><style>.box {display: flex;/* 修改主轴方向 垂直方向;侧轴自动变换到水平方向 */flex-direction: column;/* 主轴在垂直,视觉效果:垂直居中 */justify-content: center;/* 侧轴在水平,视觉效果:水平居中 */align-items: center;width: 150px;height: 120px;background-color: pink;}img {width: 32px;height: 32px;}</style>
</head><body><div class="box"><img src="./images/1.png" alt=""><span>媒体</span></div></body></html>

弹性伸缩比

注意!使用弹性伸缩比,控制的是主轴方向!

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-弹性伸缩比</title><style>/* 默认情况下,主轴方向尺寸是靠内容撑开;侧轴默认拉伸 */.box {display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}.box div {/* height: 100px; */background-color: pink;}.box div:nth-child(1) {width: 200px;}.box div:nth-child(2) {flex: 1;}.box div:nth-child(3) {flex: 2;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div></body></html>

可以看到盒子3的高度是盒子2的两倍

为什么?

因为总份数 = 1+2,盒子2占了一份,盒子3占了两份

弹性盒子换行

想自动换行,在父级加wrap即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-弹性换行</title><style>.box {display: flex;flex-wrap: wrap;/* 不换行 *//* flex-wrap: nowrap; */justify-content: space-between;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>

行对齐方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-行对齐方式</title><style>.box {display: flex;flex-wrap: wrap;justify-content: space-between;/* 调整 行对齐方式:对单行弹性盒子不生效 *//* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* 没有代码提示 */align-content: space-evenly;height: 400px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></body></html>

综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;/* 盒子自动内减 */}li {list-style: none;}.box {border: 1px solid black;width: 1200px;height: 418px;border-radius: 10px;/* 直角变圆角 */margin: 50px auto;/* 和上面产生距离50px,水平居中 */}.box ul {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;padding: 90px 40px 90px 60px;/* 左上右下 */height: 418px;}.box li {width: 500px;height: 88px;/* background-color: pink; */display: flex;flex-wrap: wrap;}.box .pic {margin-right: 15px;}.box .text h4 {/* 文字行高等于上边距+下边距+文字高 */line-height: 40px;font-size: 20px;font-weight: 400;/* 文字粗细 */color: #333;}.box .text p {font-size: 14px;color: #666;}</style>
</head><body><div class="box"><ul><li><div class="pic"><img src="./p1.png" alt=""></div><div class="text"><h4>一键发布多端</h4><p>发布视频到抖音短视频、西瓜视频及今日头条</p></div></li><li><div class="pic"><img src="./p2.png" alt=""></div><div class="text"><h4>管理视频内容</h4><p>支持修改已发布稿件状态和实时查询视频审核状态</p></div></li><li><div class="pic"><img src="./p3.png" alt=""></div><div class="text"><h4>发布携带组件</h4><p>支持分享内容携带小程序、地理位置信息等组件</p></div></li><li><div class="pic"><img src="./p4.png" alt=""></div><div class="text"><h4>数据评估分析</h4><p>获取视频在对应产品内的数据表现、获取抖音热点</p></div></li></ul></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/408767.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GCB | 首次揭示!气候变化对常绿和落叶植物物候差异化影响的机制

气候变化引起的植物物候改变已对全球范围内生物多样性和生态系统产生重大影响&#xff08;Nature高引文章 | 北京大学朴世龙院士等&#xff1a;全球变暖对植被物候的影响及其机制&#xff1b;Nature Ecology & Evolution | 南京大学张永光教授团队揭示延长的植被物候期受CO…

【日记】狗尾巴草与暗恋(1519 字)

写在前面 消极内容注意 正文 好想吃火龙果。 下周会变得异常艰难。因为事情已经垒到天上去了&#xff0c;还要来检查。 上午&#xff0c;同事送了一点水果&#xff0c;我从来没见过。问了一下别人&#xff0c;有的说是灯笼果&#xff0c;有的说是菇凉果、姑娘果。搜了一下&am…

go const(常量)

常量介绍 示例 package mainimport ("fmt" )func main() {const name "tom"fmt.Println(name)const tax float64 0.8fmt.Println(tax) }go run const.go tom 0.8package mainimport ("fmt" )func main() {const a intfmt.Println(a) }go run…

【Excal】OR 函数

语法&#xff1a; OR&#xff08;判断条件1&#xff0c;判断条件2&#xff0c;判断体件3&#xff0c;****&#xff09; 评优条件&#xff1a; 语文成绩高于90 数学成绩高于90 英语成绩高于85 物理成绩高于85 点击回车键 选中填充 回车 选中填充

SpringBootWeb 篇-深入了解 SpringBoot + Vue 的前后端分离项目部署上线与 Nginx 配置文件结构

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 云服务器的准备 2.0 Xshell 和 Xftp 软件 2.1 Xshell 介绍 2.2 Xftp 介绍 3.0 在云服务器进行环境配置 3.1 安装 JDK 3.2 安装 MySQL 3.3 安装 Nginx 4.0 SpringB…

论文降重,Kimi如何助你一臂之力?

在学术研究的浪潮中&#xff0c;原创性和学术诚信是每位研究者必须坚守的灯塔。然而&#xff0c;随着研究领域的不断扩展和深化&#xff0c;论文写作过程中难免会遇到内容重复的问题&#xff0c;这不仅影响论文的独创性&#xff0c;也对学术声誉构成挑战。本文将介绍Kimi的核心…

darnet 识别检测本地视频 保存本地视频

darnet 识别检测本地视频 保存本地视频 darknet的github下载 darknet的github下载 darknet地址 将这个下载后&#xff0c;保存在catkin_ws的src目录下

红黑树、B+Tree、B—Tree

红黑树 B-Tree 这三个通常都是把内存全部加载到内存里,然后再内存中进行处理的,数据量通常不会很大。 内存一般容量都在GB级别,比如说现在常见的4G、8G或者16G。 如果要处理的数据规模非常大,大到内存根本存不下的时候。这个时候只能先存到硬盘里,硬盘呢 容量又比内存大…

谈一谈什么是接口测试?怎样做接口测试?

扫盲内容&#xff1a; 1.什么是接口&#xff1f; 2.接口都有哪些类型&#xff1f; 3.接口的本质是什么&#xff1f; 4.什么是接口测试&#xff1f; 5.问什么要做接口测试&#xff1f; 6.怎样做接口测试&#xff1f; 7.接口测测试点是什么&#xff1f; 8.接口测试都要掌…

mysql数据库----简单认识库的操作

目录 1.区分概念 2.什么是数据库 3.数据库的创建和销毁 4.数据库编码初识 5.查询系统默认编码配置 6.两个查询编码表的指令 7.创建指定编码的数据库 8.不同编码的区别 第一个编码方式&#xff1a; 第二个编码方式&#xff1a; 查询结果说明&#xff1a; 9.数据库的增…

React学习day01-React-开发环境配置、JSX基础-本质、JSX中js表达式的用法、JSX的条件渲染

1、React &#xff08;1&#xff09;概念&#xff1a;由Meta公司研发&#xff0c;是一个用于构建Web和原生交互页面的库 &#xff08;2&#xff09;优点&#xff1a; 1&#xff09;相较于传统基于DOM开发的优势&#xff1a;组件化的开发方式、不错的性能 2&#xff09;相较于…

QT实例1--使用UI文件创建登陆窗口

基础信息 平台&#xff1a;window 10 QT版本 &#xff1a;5.14.2 时间:2024.08.25 本工程是QLayout专题,使用UI文件创建一个登陆窗体 本例程原始资料来源于B站&#xff0c;UP主“爱编程的大丙”的视频教程《QT开发编程-入门基础教程QT5–6.2窗口布局举例-制作一个登陆界面》…

Web开发:ORM框架之Freesql的入门和技巧使用小结

目录 零、官网链接 一、字段映射表 二、基础查询 1.freesql独特封装&#xff1a;between关键字查日期 2.分页&#xff08;每页 20 条数据&#xff0c;查询第 1 页&#xff09; 3.Withsql&#xff08;子查询&#xff0c;不建议&#xff09; 3.简单查询、映射查询 4.参数查…

数据结构(Java):揭开二叉搜索树删除机制的奥秘

目录 1、二叉搜索树 1.1 概念 2、代码模拟实现 2.1 插入操作 2.2 查找操作 2.3 &#x1f31f;删除操作&#x1f31f;&#xff08;难点&#xff09; 2.3.1 要删除节点的左子树为空 2.3.2 要删除节点的右子树为空 2.3.3 要删除节点的左右子树均不为空 2.3.4 删除操作代码…

ollma 本地部署大模型

因为我本地是 windows 的系统&#xff0c;所以这里直接写的是通过 docker 来实现本地大模型的部署。 windows 下 WSl 的安装这里就不做重复&#xff0c;详见 windows 部署 mindspore GPU 开发环境&#xff08;WSL&#xff09; 一、Docker 部署 ollma 1. 拉取镜像&#xff08;…

【PyTorch】关于Tensorboard的简单使用

前提文章目录 【PyTorch】深度学习PyTorch环境配置及安装【详细清晰】 【PyTorch】深度学习PyTorch加载数据 文章目录 前提文章目录SummaryWriter使用add_image()的使用&#xff08;常用来观察训练结果&#xff09;利用Tensorboard观察图片 SummaryWriter使用 from torch.util…

Graphics2D绘图方法总结

一、简介 在开发中可能会遇到这样一类场景&#xff0c;业务复杂度不算太高&#xff0c;技术难度不算太深&#xff0c;但是做起来就很容易把人整破防&#xff0c;伤害很高侮辱性很强的&#xff1a;绘图。 绘图最怕有人挑刺&#xff1a;这里变形&#xff0c;那里不对&#xff0…

【Node】【2】创建node应用

创建node应用 node应用&#xff0c;不仅可以实现web应用&#xff0c;也能实现http服务器。 如果是php写后端&#xff0c;还需要有http服务器&#xff0c;比如apache 或者 nginx。 但是现在主流都是java写后端&#xff0c;也可以像 Node.js 一样用于实现 Web 应用和 HTTP 服务…

<C++> 多态

目录 一、多态的概念 二、多态的定义和实现 1. 多态的构成条件 2. 虚函数 3.虚函数的重写 3.1 析构函数的重写 4. override 和 final &#xff08;C11&#xff09; 5. 重载、重定义&#xff08;隐藏&#xff09;、重写&#xff08;覆盖&#xff09;的对比 三、抽象类 1. 概念 …

银行总分支文件分发系统:在安全与效率之间找到平衡

银行的组织结构通常根据其规模、业务范围和地域分布而有所不同&#xff0c;但一般会包括以下几个层级&#xff1a;总行-区域总部或分行-分行-支行-业务中心或服务中心-国际分支机构-附属机构或子公司。 在日常中&#xff0c;存在总分支文件分发的业务场景&#xff0c;文件类型通…