web前端-------弹性盒子(2)

上一讲我们谈的是盒子的容器实行,今天我们来聊一聊弹性盒子的项目属性;

*******************(1)顺序属性

order属性,用于定义容器中项目的出现顺序。

顺序属性值,为整数,可以为负数,数字大小决定项目出现的先后顺序。

数字越小,排列越靠前,默认值为0。

****************************(2)长度属性

flex属性,是广义上的长度属性。它包含了项目的放大属性、缩小属性和初始长度属性。

!!!!!!flex-grow属性,用于定义容器中项目的相对放大比例。注意!在容器还有剩余空间时,项目才能体现出放大的效果。flex-grow的属性值默认为0,没有放大效果,会展示默认长度。

与之相反,容器空间不足时,我们就需要使用缩小属性,来对项目进行收缩。

通过缩小属性flex-shrink,定义了容器中项目的相对缩小比例。

flex-shrink的属性值默认为1,空间不足时,项目将缩小。

设置flex-shrink: 0;时,即使容器空间不足,也可以保证项目不被压缩。

flex-basis属性,用于定义容器中项目的初始长度。

当项目左右排列时,项目长度和宽度类似;

当项目上下排列时,项目长度和高度类似。

当项目左右排列时,若元素同时设置了flex-basis属性和width属性,flex-basis的优先级更高。

前面,我们依次学习了flex-grow、flex-shrinkflex-basis属性。

实际上,我们经常使用它们的简写形式 flex

简写形式 flex的属性值依次为: flex-grow、flex-shrink、flex-basis

在弹性布局时,我们经常会使用自适应布局。自适应布局会充分分配容器的尺寸,分为两种:

内敛的flex: 1;、霸道的flex: auto;

flex: 1;等同于设置flex: 1 1 0%;flex: 1;的尺寸表现更为内敛,当项目未设置宽度时,其会优先牺牲自己的尺寸。简单来说,一般在等分布局时使用。

flex: auto;等同于设置flex: 1 1 auto;flex: auto;的尺寸表现更为霸道,当项目未设置宽度时,其会优先扩展自己的尺寸;简单来说,一般适合内容动态适配的布局。

******************************(3)单项目对齐属性。

单项目对齐属性align-self,和垂直对齐属性类似,用于设置项目在垂直方向的对齐方式。

不同的是,align-self,是为某个项目设置不同于其它项目的对齐方式。

单项目对齐属性align-self会覆盖垂直对齐属性align-items的值。

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

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

相关文章

小周学JAVA—八股六

自动装箱和拆箱 Java中基础数据类型与它们对应的包装类见下表: 原始类型包装类型booleanBooleanbyteBytecharCharacterfloatFloatintIntegerlongLongshortShortdoubleDouble 装箱:将基础类型转化为包装类型。 拆箱:将包装类型转化为基础类…

c语言之逻辑运算符

逻辑运算符分别是“与”,“或”,“非” 表示与的是&& 表示或的是|| 表示非的是! 比如说有条件a和b,a&&b只有全是真时才是真,有一个是假,则为假。 a真,b真,a&&b为真 …

KMP 笔记

KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt提出的,因此人们称它为克努特—莫里斯—普拉特操作(简称KMP算法)。KMP算法的核心是利用匹配失败后的信息,尽量减少模式串与主串的匹配…

Django与MongoDB搭建高效的Web应用

Django,一个高级Python Web框架,以其优雅的设计和强大的功能而闻名,通常与关系型数据库如PostgreSQL, MySQL等结合使用。然而,随着NoSQL数据库的流行,MongoDB这种非关系型数据库因其高性能、高可用性和易扩展性而成为了…

Elasticsearch:集群故障排除和优化综合指南

Elasticsearch 是一个强大的搜索和分析引擎,是许多数据驱动应用程序和服务的核心。 它实时处理、分析和存储大量数据的能力使其成为当今快节奏的数字世界中不可或缺的工具。 然而,与任何复杂的系统一样,Elasticsearch 可能会遇到影响其性能和…

Container 命令ctr、crictl 命令

1、 Containerd和Docker的架构区别 Docker vs. Containerd: 2、ctr & crictl的区别 ctr是containerd的一个客户端工具 crictl 是 CRI 兼容的容器运行时命令行接口,可以使用它来检查和调试 Kubernetes 节点上的容器运行时和应用程序 crictl 则直接对…

企业场景中权限认证的深度解析与实战

目录 引言 1. 认证流程的设计 2. RBAC 模型的应用 3. 实现认证与授权的代码示例 3.1 用户实体类 3.2 角色与权限定义 3.3 用户管理类 3.4 登录认证服务 3.5 RBAC权限管理 3.6 应用层示例 结语 引言 在当今数字化时代,企业应用程序不仅需要提供功能丰富的…

Maxwell查询databases表报错:You have an error in your SQL syntax;

报错信息:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near databases at line 1 报错说明: maxwell初始化后,在其数据库中会有一些表,…

pdf高亮显示

现在前端pdf需求越来越多,比如发票的显示,文件的显示,怎么实现具体步骤百度一下吧,这里不做详细介绍,主要记录下遇到的问题 1.页面pdf已经看到了,但是 iframe.contentWindow.PDFViewerApplication显示unde…

unittest、nosetest、pytest

参考:Choosing The Perfect Python Testing Framework: Unittest Vs. Pytest Vs. UnitTest vs Nose2 vs Pytest FeatureUnittest Pytest Nose2Test DiscoveryYesYesYesFixture SupportYesYesYesParameterizationNoYesYesPlugin EcosystemLimitedExtensiveLimite…

Springboot简单设计两级缓存

两级缓存相比单纯使用远程缓存,具有什么优势呢? 本地缓存基于本地环境的内存,访问速度非常快,对于一些变更频率低、实时性要求低的数据,可以放在本地缓存中,提升访问速度 使用本地缓存能够减少和Redis类的远…

netlink学习

netlink是什么 netlink是Linux内核中的一种进程间通信(IPC)机制。它允许内核空间与用户空间之间,以及用户空间进程之间进行双向通信。 内核里的很多子系统使用netlink通信,包括网络管理(Routing,Netfilt…

项目安全问题及解决方法-----xss处理

XSS 问题的根源在于,原本是让用户传入或输入正常数据的地方,被黑客替换为了 JavaScript 脚本,页面没有经过转义直接显示了这个数据,然后脚本就被 执行了。更严重的是,脚本没有经过转义就保存到了数据库中,随…

【数据结构】实现顺序表

大家好,我是苏貝,本篇博客带大家了解顺序表,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 一.概念及结构二.接口实现2.1 创建顺序表结构体2.2 初始化顺序表2.3 销毁顺序表2.4 打印顺序表…

Unity 设置鼠标

目录 前言 图标样式的设置 代码控制 编辑器直接修改 图标的显隐 CursorLockMode Cursor.visible 前言 本章主要对鼠标图标样式还有鼠标显隐进行设置 图标样式的设置 代码控制 有时候需要有改变鼠标样式的需求可以使用如下代码 Cursor.SetCursor(this.mouseTexture, Vec…

[word] 怎么删除文字底纹 #职场发展#其他

怎么删除文字底纹 怎么删除文字底纹?我们在录入文字到文档的时候,或者是复制网上内容时,都会带有格式,有时候还会遇到删除不掉的问题。今天给大家分享小技巧,解决你的问题。 1、删除文字底纹 文档自带的底纹,删除技…

C++实现智能指针(涉及知识点:重载运算符,内存泄露的风险)

案例 有时候代码很长,很容易就忘了释放P。导致内存泄露,在程序结束后才会释放。内存泄露的风险 如果代码需要的内存很大,前面的代码用完了new申请的内容不去释放,就会被一直占用着,后面可能不够用了造成程序崩溃。解决…

docker下拉(pull)镜像和生成容器,文章尾部有常用的linux命令

目录 1:docker镜像和容器是什么 2:docker初始化个容器,并进入容器安装mariaDb和httpd 1:用远程工具SecureCRT登录docker 2:拉取CentOS镜像并初始化一个容器 a:拉取镜像(这一步可能会有点久&…

linux文件权限备份、恢复-linux文件权限如何备份、恢复-getfacl/setfacl备份恢复文件权限

0、序 在运维这条路上走久了,你能听到或者遇到这样的事情就越多,甚至是你自己干过的: 一个信心满满的运维人员一个不小心,输入 "chmod -R 777 /" 导致一个巨大的悲剧,然后整个部门从上到下被撸一顿。虽然…

牛客周赛 Round 31

D. 思路&#xff1a;使用map构造两个链表。 #include <bits/stdc.h> using namespace std;map<int,int> l,r; int main() {int q;cin>>q;int op-1e9-1;int ed1e91;r[op]ed;l[ed]op;while(q--){int a;cin>>a;if(a1){int x,y;cin>>x>>y;int…