Web04--Flex布局

1、flex布局

1.1 flex认识

1.2 flex组成

1.3 flex布局

1.3.1 主轴对齐方式

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex--主轴对齐方式</title><style>.box{width: 900px;height: 400px;border: 1px solid;display: flex;/* justify-content  项目在主轴(水平)方向的排布flex-start:默认 从起点开始排 顺着主轴方向flex-end:   从终点开始排  逆着主轴方向center      居中space-between:左 右 紧贴两边,中间平均分space-around:均匀分布在盒子两侧,二倍宽space-evenly:全部平均分*/justify-content: space-evenly;}.box div{width: 200px;height: 100px;background-color: aqua;border: 1px dashed rebeccapurple;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div></div> 
</body>
</html>

1.3.2 侧轴对齐方式

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>侧轴对齐方式</title><style>.box{width: 900px;height: 400px;border: 1px solid;display: flex;/* align-items  项目在侧轴方向的排布flex-start:默认 上 侧轴的起点flex-end:  侧轴终点center      侧轴居中stretch:如果子元素没有高,默认拉伸高,沿着侧轴方向拉伸*//* align-items: stretch; *//* justify-content: center; */}.box div{width: 200px;/* height: 100px; */background-color: aqua;border: 1px dashed rebeccapurple;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div></div> 
</body>
</html>

1.3.3 修改主轴方向

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>改变主轴方向</title><style>.box{width: 900px;height: 600px;border: 1px solid;display: flex;/* flex-direction:调整主轴的方向row 默认 水平方向 行 从左到右column 垂直方向 列  从上到下row-reverse 水平方向 从右到左column-reverse 垂直方向 从下到上*/flex-direction: column-reverse;}.box div{width: 200px;height: 100px;background-color: aqua;border: 1px dashed rebeccapurple;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div></div> 
</body>
</html>

1.3.4 align-self

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>align-self</title><style>* {box-sizing: border-box;}.box {display: flex;width: 780px;height: 500px;border: 1px solid red;align-items: center;}.box .son {width: 234px;height: 100px;background-color: pink;border: 1px dashed deeppink;}.box .son:nth-child(1){/* align-slef:单独控制某个弹性盒子的侧轴对齐方式 */align-self: flex-start;}.box .son:nth-child(3){align-self: flex-end;}</style>
</head>
<body><div class="box"><div class="son">1</div><div class="son">2</div><div class="son">3</div></div>
</body>
</html>

1.3.5 弹性伸缩比

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性伸缩比</title><style>.box{width: 1000px;height: 600px;border: 1px solid;display: flex;}.box div{flex: 1;width: 200px;height: 100px;background-color: aqua;border: 1px dashed rebeccapurple;}.box div:nth-child(1){flex: 2;}.box div:last-child{flex: 2;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div></div> 
</body>
</html>

1.3.6 弹性盒子换行

弹性盒子可以自动挤压或拉伸,默认情况下,所有盒子都在一行显示。

属性名:flex-wrap

属性值:

        wrap:换行

        nowrap:不换行(默认)

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子换行</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}.box{width: 700px;height: 500px;background-color: pink;display: flex;/* flex-wrap wrap 换行,nowrap 不换行 */flex-wrap: wrap;justify-content: space-between;align-items: center;}.son{width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div class="box"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div></div>
</body>
</html>

1.3.7 行对齐方式

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行对齐方式</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}.box{width: 700px;height: 500px;border: 1px solid;display: flex;/* 添加了换行,浏览器就会认为你是多行 */flex-wrap: wrap;justify-content: space-evenly;/* 1.多行 2.控制行在侧轴上的对齐方式  */align-content: space-evenly;}.son{width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div class="box"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div></div>
</body>
</html>

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

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

相关文章

基于密码技术的身份认证——基于对称密码体制的身份认证

一、符号说明&#xff1a; A→B&#xff1a;表示通信实体A向通信实体B发送消息&#xff1b; Ek(x)&#xff1a;表示用认证双方共享的密钥K对x进行加密&#xff1b; Text1&#xff0c;Text2&#xff0c;……&#xff0c;Text n属于可选项&#xff1b; ||&#xff1a;表示比特…

正确看待华为鸿蒙……是盲目跟风吗?

先要了解纯血鸿蒙是什么&#xff1f;与之前的套壳Android版本区别在哪&#xff1f;了解这核心东西之后才会真正的看出“纯血鸿蒙”的未来与发展。 纯血鸿蒙全栈自研 HarmonyOS NEXT系统底座全线自研&#xff0c;去掉了传统的Linux内核以及AOSP等代码&#xff0c;仅支持鸿蒙内…

vulnhub靶场之Five86-1

由于这些文章都是从我的hexo博客上面复制下来的&#xff0c;所以有的图片可能不是很完整&#xff0c;但是不受影响&#xff0c;如果有疑问&#xff0c;可以在评论区留言&#xff0c;我看到之后会回复。 一.环境搭建 1.靶场描述 Five86-1 is another purposely built vulnerab…

Linux文本编辑器-vi/vim

一.vi/vim编辑器介绍 vi\vim是visual interface的简称, 是Linux中最经典的文本编辑器 同图形化界面中的 文本编辑器一样&#xff0c;vi是命令行下对文本文件进行编辑的绝佳选择。 vim 是 vi 的加强版本&#xff0c;兼容 vi 的所有指令&#xff0c;不仅能编辑文本&#xff0c;而…

【操作系统】实验九 写一个设备驱动程序

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

OpenAI ChatGPT-4开发笔记2024-07:Embedding之Text Similarity文本相似度

语义相似性semantic similarity 背景结果 背景 OpenAI has made waves online with its innovative embedding and transcription models, leading to breakthroughs in NLP and speech recognition. These models enhance accuracy, efficiency, and flexibility while speed…

蓝桥杯备战——4.继电器/蜂鸣器

1.分析原理图 最好自己先去查查138以及ULN2003的使用方法&#xff0c;我这里直接讲思路。 由上图我们可以看到如果138输入ABC101,则输出Y50,此时若WR通过跳线帽接地则Y5C1 &#xff0c;于是573(U9)处于输出跟随输入P0状态&#xff0c;此时若P061&#xff0c;则573输出Q71&am…

Confluence 的文章导入到 YouTrack KB 中

YouTrack 是有一个 KB 的&#xff0c;我们可以吧 Confluence 的文章全部导入到 YouTrack 的 KB 中。 首先&#xff0c;你需要具有管理员权限&#xff0c;然后选择导入。 然后可以在打开的界面中新增一个导入。 在新增导入中输入 Confluence 在随后的界面中输入你 Confluence …

顶顶通呼叫中心中间件机器人压力测试配置(mod_cti基于FreeSWITCH)

介绍 顶顶通呼叫中心中间件机器人压力测试(mod_cit基于FreeSWITCH) 一、配置acl.conf 打开ccadmin-》点击配置文件-》点击acl.conf-》我这里是已经配置好了的&#xff0c;这里的192.168.31.145是我自己的内网IP&#xff0c;你们还需要自行修改 二、配置线路 打开ccadmin-&g…

【Linux install】详细的Ubuntu和win双系统安装指南

文章目录 1.前期准备1.1 制作启动盘1.2关闭快速启动、安全启动、bitlocker1.2.1 原因1.2.2 进入BIOSshell命令行进入BIOSwindows设置中高级启动在开机时狂按某个键进入BIOS 1.2.3 关闭Fast boot和Secure boot 1.3 划分磁盘空间1.3.1 查看目前的虚拟内存大小 2.开始安装2.1 使用…

在线教育系统开发:构建现代化学习平台

随着科技的迅速发展&#xff0c;在线教育系统在教育领域扮演着越来越重要的角色。本文将深入探讨在线教育系统的开发过程&#xff0c;涉及关键技术和代码实现。 技术选型 在开始开发之前&#xff0c;我们首先需要选择适合在线教育系统的技术栈。以下是一些常见的技术选项&am…

[Vulnhub靶机] DC-1

[Vulnhub靶机] DC-1靶机渗透思路及方法&#xff08;个人分享&#xff09; 靶机下载地址&#xff1a; https://download.vulnhub.com/dc/DC-1.zip 靶机地址&#xff1a;192.168.67.28 攻击机地址&#xff1a;192.168.67.3 一、信息收集 1.使用 arp-scan 命令扫描网段内存活的…

QSqlQuery 执行Update 判断执行成功与否

1.执行更新操作的SQL语句 update s_info set name"009" where contact_number "13511112222" 怎么样判断是否确实更新操作是执行成功的 &#xff0c;可以通过下列语句判断 query.numRowsAffected() > 0 2.主要的几步操作如下: QSqlQuery query;query.…

[git] windows系统安装git教程和配置

一、何为Git Git(读音为/gɪt/)是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 二、git安装包 有2种版本&#xff0c;Git for Windows Setup和Git for Windows Portable(便携版)两个版本都可以。 三、Git for Windows Por…

安装ddddocr中遇到的问题

1、需要先安装&#xff1a; pip3 install pyinstaller --no-use-pep517 pip install scikit-build pip install setuptools pip install pyinstaller pip install pillow 重要是的是保证一个python 环境&#xff0c;多个python环境会导致各种问题。并且保证python>3.8…

【SpringCloud Nacos】 微服务治理介绍及Nacos引入初体验

文章目录 前言服务治理介绍什么是服务治理1、服务发现2、服务配置3、服务健康检测 常见的注册中心ZookeeperEurekaConsulNacos Nacos 简介Nacos 实战入门搭建nacos环境1、安装nacos2、配置nacos3、访问nacos 将商品微服务注册到 nacos1、在 pom. xml 中添加 nacos 的依赖2、在主…

华为机考入门python3--(0)测试题1-句子平均重量

分类&#xff1a;字符串 知识点&#xff1a; 获取输入 input().strip().split(" ") 拼接列表 " ".join(list) 输出指定位数的浮点数 print("%.2f" % value) len() 函数对于很多内置的数据类型都适用&#xff0c;它返回对象的元素个数或长度。…

蓝凌OA sysUiExtend.do 任意文件上传漏洞复现

0x01 产品简介 蓝凌核心产品EKP平台定位为新一代数字化生态OA平台,数字化向纵深发展,正加速构建产业互联网,对企业协作能力提出更高要求,蓝凌新一代生态型OA平台能够支撑办公数字化、管理智能化、应用平台化、组织生态化,赋能大中型组织更高效的内外协作与管理,支撑商业…

附1:k8s服务器初始化

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 关联文章&#xff1a; 《RKE快速搭建离线k8s集群并用rancher管理界面》 《附2&#xff1a;rke安装的k8s集群新增主机》 1.创建…

【Go 快速入门】安装 Go 语言 | 开发工具 Goland | 第一个 Go 语言程序

文章目录 前言安装 Go 语言编译器 Goland运行 Go 程序补充 前言 本系列教程&#xff0c;目的是帮助一个有其他编程基础的 Go 语言小白快速入门 Go 语言&#xff0c;而非启发式学习。每篇幅保证不说废话&#xff0c;尽可能精炼总结&#xff0c;为上手后续的 Go 相关项目打下基础…