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,一经查实,立即删除!

相关文章

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

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

Container 命令ctr、crictl 命令

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

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…

Springboot简单设计两级缓存

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

项目安全问题及解决方法-----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申请的内容不去释放,就会被一直占用着,后面可能不够用了造成程序崩溃。解决…

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…

MIT6.5830 实验3

前置回顾 在实验2中&#xff0c;完成了增删查改、排序、分组、聚合、连接等基本操作&#xff0c;在已提供 sql 解析器的基础上&#xff0c;能够运行进本的 sql 语句。都是逻辑层的实现&#xff0c;没有涉及物理存储方面的内容。 实验目标 实现最简单的基于锁的transaction&am…

MicroPython ESP32开发:通过寄存器直接访问外围设备

可以通过直接读写寄存器来控制 ESP32 的外设。这就需要阅读数据手册&#xff0c;了解要使用哪些寄存器以及要写入哪些值。下面的示例展示了如何打开和更改 MCPWM0 外设的预分频器。 from micropython import const from machine import mem32# Define the register addresses …

【STM32+HAL库+CubeMX】UART轮询收发、中断收发、DMA收发方法及空闲中断详解

&#xff08;转载&#xff09;原文链接&#xff1a;https://blog.csdn.net/qq_39344192/article/details/131470735 1. 什么是UART&#xff1f; UART是一种异步串行通信接口&#xff0c;常用于通过串口与外部设备进行通信。它通过发送和接收数据帧来实现数据传输&#xff0c;使…

postman 文档、导出json脚本 导出响应数据 response ,showdoc导入postman json脚本 导出为文档word或markdown

保存、补全尽可能多的数据、描述 保存响应数据 Response&#xff1a;&#xff08;如果导出接口数据&#xff0c;会同步导出响应数据&#xff09; 请求接口后&#xff0c;点击下方 Save as Example 可以保存响应数据到本地&#xff08;会在左侧接口下新增一个e.g. 文件用来保…

使用_NT_SYMBOL_PATH在启动VS前设置PDB路径

一、背景 由于公司相关项目的开发管理方式&#xff0c;导致公司会存在多个分支的版本正在开发/测试中。 在这样的背景下&#xff0c;我的日常工作中有时会出现存在某个分支的项目软件的某个功能出现了问题需要我去排查解决&#xff0c;而我当前并不在该分支上开发。于是只能安装…

C++泛编程(3)

类模板基础 1.类模板的基本概念2.类模板的分文件编写3.类模板的嵌套 &#xff08;未完待续...&#xff09; 在往节内容中&#xff0c;我们详细介绍了函数模板&#xff0c;这节开始我们就来聊一聊类模板。C中&#xff0c;类的细节远比函数多&#xff0c;所以这个专题也会更复杂。…

Llama2大模型开源,大模型的Android时代来了?

就昨天凌晨,微软和Meta宣布Llama2大模型开源且进一步放开商用,一下朋友圈刷屏。要知道,开源界最强大的模型就是过去Meta开源的Llama,而现在Llama2更强大,又开放商用,更有微软大模型霸主企业撑腰(微软既投资大模型界的IOS——ChatGPT,又联合发布大模型的Android——Llam…

【2月比赛合集】28场可报名的数据挖掘大奖赛,任君挑选!

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 Kaggle&#xff08;2场比赛&#xff09;阿里天池&#xff08;…