HTML — 弹性布局(2)

弹性布局的其他属性

1. order

        决定弹性项目(flex item)的排列顺序,使用较少,默认为0 。

        order 的值可以为任意整数(正整数或负整数均可,也可为0),数值越小越排在前面。

2. align-self

        对弹性布局下的子元素使用,相当于继承父元素的 align-items 属性,如果没有相当于 stretch,其属性值与align-items 的属性值相同,效果亦相同。   

3. flex-grow

        该属性定义弹性项目的放大比例,默认为0,表示即便存在剩余空间也不放大。

        其可以为任意非负数。在弹性容器在主轴上有剩余空间时,该属性才生效。

4. flex-shrink

        与 flex-grow 属性相反,该属性定义弹性项目的缩小比例,默认为1。当空间不足时就会进行缩小处理。而如果所有项目的该属性值均为1,在空间不足时其都会等比例缩小。

5. flex-basis

        该属性定义了在分配多余空间前项目占据的主轴空间,有 max-width、max-height、min-width、min-height。

6. flex

        flex 是flex-grow || flex-shink || flex-basis 的简写,可以指定1 2 3个值,依次按照上述顺序。默认值为 0 1 auto。

⚠️注意:

  1. 该属性的默认值为 0 1 auto(注意顺序),后两个属性可选
  2. 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
  3. 如果需要这三个属性的时候,建议使用flex,而不是单独的三个分离的属性,因为浏览器会推算相关值

        

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

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

相关文章

公开课学习——JVM虚拟机面试核心点与性能优化点

文章目录 jdk的体系结构图Java语言的跨平台的特性,怎么实现的?jvm内部组成呢?pc的值怎么变得?main方法的栈帧有一点点区别,Math()是new出来的,放在堆区,这个堆区的math和我们栈帧中的局部变量表…

37-代码测试(下):Go语言其他测试类型及IAM测试介绍

。 Go中的两类测试:单元测试和性能测试。 我就来介绍下Go 语言中的其他测试类型:示例测试、TestMain函数、Mock测试、Fake测试等, 示例测试 示例测试以Example开头,没有输入和返回参数,通常保存在example_test.go…

心态有点崩

难道二本真的没出路么,对,没出路。。 但是真的不建议跟别人比,因为当你发现身边的人拿到offer,身边人家境非常好,身边人参与个抽奖能抽ipad,身边好兄弟找到女朋友,身边人考研成功,身…

屏幕距离识别加语音提醒

效果 QQ录屏20240406131651 语音播放 import pygame pygame.mixer.init() #初始化 pygame.mixer.music.load(r"7359.wav") #文件位置 pygame.mixer.music.play(1) #播放语音 while pygame.mixer.music.get_busy(): # 在音频播放为完成之前不退出程序pass 完…

Session

文章目录 1.Session基本介绍1.Session有什么用?2.Session基本原理3.Session可以做什么?4.如何理解Session?5. Session基本使用 2.Session底层机制1.示意图2.创建session底层机制1.有sessionid,但没session对象1.由于访问了jsp的主页面&#…

SpringMVC参数绑定

参数绑定 数据绑定是一个自动转换及赋值的过程,它负责将 HTTP 请求中的 String 类型的参数,转换为其他类型的请求处理方法的参数。 1. 绑定简单类型 当 HTTP 请求的参数名和处理方法参名一致时,SpringMVC 会将请求参数与形参进行绑定。 参…

vue实现富文本编辑器的具体方法

可以实现富文本的插件:vue-quill-editor、editor-for-vue 我们以 editor-for-vue 为例实现: 传送门:wangEditor官网地址 安装: npm install wangeditor/editor --save npm install wangeditor/editor-for-vue --save具体使用方…

分布式锁的原子性问题

4.6 分布式锁的原子性问题 更为极端的误删逻辑说明: 线程1现在持有锁之后,在执行业务逻辑过程中,他正准备删除锁,而且已经走到了条件判断的过程中,比如他已经拿到了当前这把锁确实是属于他自己的,正准备删…

【matlab非线性规划工具箱安装2 GloptiPoly 3.10工具箱】

【matlab非线性规划工具箱安装2 GloptiPoly 3.10工具箱】 该博客是非线性手眼标定代码中所依赖的matlab工具箱的安装内容,除了进行手眼标定以外,该工具箱还可以用于其他的非线性规划问题 在安装该工具箱之前请先安装SeDuMi 手眼标定传送门&#xff1a…

实验案例一:交换机的初始配置

1、实验环境 实验用具包括一台 Cisco 交换机,一台 PC,一根 Console 线缆。 2、需求描述 如图 5.17 所示,实验案例一的配置需求如下。 通过 PC 连接并配置一台 Cisco 交换机在交换机的各个配置模式之间切换将交换机主机的名称改为 BDON 3、…

上门服务小程序|上门服务系统|上门服务软件开发流程

在如今快节奏的生活中,上门服务小程序的需求越来越多。它们向用户提供了方便、高效的服务方式,解决了传统服务行业中的很多痛点。如果你也想开发一个上门服务小程序,以下是开发流程和需要注意的事项。 1、确定需求:在开始开发之前…

[C++][算法基础]排列数字(DFS)

给定一个整数 n,将数字 1∼n 排成一排,将会有很多种排列方法。 现在,请你按照字典序将所有的排列方法输出。 输入格式 共一行,包含一个整数 n。 输出格式 按字典序输出所有排列方案,每个方案占一行。 数据范围 …

✌2024/4/3—力扣—整数反转

代码实现: int reverse(int x) {long num 0;while (x ! 0) {num num * 10 x % 10;x x / 10;}if ((int)num ! num) {return 0;}return (int)num; }

Spring Cloud微服务入门(五)

Sentinel的安装与使用 安装部署Sentinel 下载Sentinel: https://github.com/alibaba/Sentinel/releases Sentinel控制台 https://localhost:8080 用户和密码为sentinel 使用Sentinel 加依赖: 写配置: 输入: java -Dserver.po…

UI自动化测试-pytest框架

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

Lua热更新(AssetBundle)

AssetBundle 新版本导入ab包报错,则删除其中的Tests文件夹。 给资源分组 打包设置:平台、路径、重复打包清空文件夹、复制到streaming文件夹 建议勾选 建议使用LZ4压缩方式 用来观察文件中的包大小,不常用 参数总结: 这六个只做了解,重要的是上面的

深入解析Cookie、Session以及Token原理

一、概述 1.1 HTTP无状态问题 目前主流的服务采用的是B\S架构,即浏览器\服务端架构。一般采用的协议是HTTP,HTTP有个特点是无状态,即在一次连接,两次成功请求之间没有任何的关系。这个特性既带来了一定的优点,在某些…

Struts2的入门:新建项目——》导入jar包——》jsp,action,struts.xml,web.xml——》在项目运行

文章目录 配置环境tomcat 新建项目导入jar包新建jsp界面新建action类新建struts.xml,用来配置action文件配置Struts2的核心过滤器:web.xml 启动测试给一个返回界面在struts.xml中配置以实现页面的跳转:result再写个success.jsp最后在项目运行 配置环境 …

【数据分享】我国第七次人口普查的100m分辨率人口栅格数据(免费获取\tif格式\2020年)

人口空间分布数据是我们在各项研究中经常使用的数据。之前我们分享过来源于LandScan数据集的2000-2022年的1km精度的人口空间分布栅格数据(可查看之前的文章获悉详情)! 相较于LandScan全球人口数据集,我国历次人口普查的数据对于…

SpringBoot通用模块--文件上传开发(阿里云OSS)

文件上传,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛,我们经常发抖音、发朋友圈都用到了文件上传功能。 实现文件上传服务,需要有存储的支持,那…