CSS Flex 笔记
1. Flexbox 术语

Flex 容器可以是<div> 等,对其设置属性:display: flex, justify-content 是沿主轴方向调整元素,align-items 是沿交叉轴对齐元素。
2. Cheatsheet
2.1 设置 Flex 容器,加粗的属性为默认值

2.1.1 align-items: baseline
align-items: baseline 使元素内容处于同一基线上,如下图所示:

2.2 单独设置 Flex 元素,加粗的属性为默认值

2.3 stretch
stretch 是统一拉伸所有元素的高度到其中的元素的最大高度 (此时flex-direction: row),或最大宽度(此时 flex-direction: column)
2.4 align-self
align-self 设置单个元素的 align-items 属性,覆写容器的align-items属性值 。
2.5 order
所有元素order 值默认为0,如果将某个元素 order 改成 -1,该元素将移到最前端,这里的 -1 可以为任意值。order 值的大小决定元素出现的顺序。因此可以修改order 任意设置元素的顺序,而不仅是只有 row-reverse 和 column-reverse两种方法。
2.7 flex
如果要设置 flex 元素的宽度, 通常不用 width 属性,而是使用 flex-basis 属性。例如 flex-basis: 100px,用 dev tool 可以看出元素实际宽度可能与此值有偏差,其中一些元素宽度的确为100px,但是当元素太长,就自动拉伸。此属性对于浏览器而言非严格要求,只是一种建议。
当 flex-basis太大,flex 容器无法容纳,flex-shrink: 1 允许元素自动减小宽度。与之相似,flex-grow 允许自动增加宽度。即可用空间被所有元素平分 (并不是说所有元素最终宽度将相同)
如果对单个元素设置 flex-grow: 1,此元素将占用全部可用空间。
flex 默认属性值:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; */
缩写为 flex: 0 1 auto,
flex: 1 等同于设置 flex-grow: 1。
实践中,最好使用 flex 属性,而不是单独使用上述属性。
stack overflow flex: none 等价于 flex: 0 0 auto, 即:
flex-grow: 0
flex-shrink: 0
flex-basis: auto
Simply put, flex: none sizes the flex item according to the width / height of the content, but doesn’t allow it to shrink. This means the item has the potential to overflow the container.
相关文章:
CSS Flex 笔记
1. Flexbox 术语 Flex 容器可以是<div> 等,对其设置属性:display: flex, justify-content 是沿主轴方向调整元素,align-items 是沿交叉轴对齐元素。 2. Cheatsheet 2.1 设置 Flex 容器,加粗的属性为默认值 2.1.1 align-it…...
Markdown常用标签及其用途-有示例
Markdown常用标签及其用途 Markdown是一种轻量级标记语言,具有简洁易读的特点。下面是一些常用的Markdown标签以及它们的用途,并附带一些示例: 标题 用于创建不同级别的标题,可通过添加一到六个#符号来表示不同级别的标题。 #…...
25.1 Knife4j-Swagger的增强插件
1.Knife4j概述 Knife4j是一款基于Swagger UI的增强插件,它可以为Spring Boot项目生成美观且易于使用的API文档界面。它是Swagger UI的增强版,提供了更多的功能和定制选项,使API文档更加易读和易于理解。 2.Knife4j使用 Knife4j 集Swagger2…...
用flask run代替flask run --debug
安装python-dotenv依赖。 在项目根目录下新建.flaskenv文件,并作如下配置: FLASK_ENVdevelopment FLASK_DEBUG1...
python_day14_综合案例
文件内容 导包配置 import jsonfrom pyspark import SparkContext, SparkConf import osos.environ["PYSPARK_PYTHON"] "D:/dev/python/python3.10.4/python.exe" os.environ["HADOOP_HOME"] "D:/dev/hadoop-3.0.0" conf SparkC…...
【算法题】2779. 数组的最大美丽值
题目: 给你一个下标从 0 开始的整数数组 nums 和一个 非负 整数 k 。 在一步操作中,你可以执行下述指令: 在范围 [0, nums.length - 1] 中选择一个 此前没有选过 的下标 i 。 将 nums[i] 替换为范围 [nums[i] - k, nums[i] k] 内的任一整…...
文件上传之PHP
别怕,我会一直陪着你 一.知识二.实例1.phtml, <?简单过滤2.前端验证, phtml3 \.htaccess 一.知识 绕过后缀的有文件格式有php,php3,php4,php5,phtml.pht 二.实例 1.phtml, <?简单过滤 (1)一句话木马 故意使用了post和get用来迷惑人 https://127.0.0.1/shy.php?POS…...
人脸检测实战-insightface
目录 简介 一、InsightFace介绍 二、安装 三、快速体验 四、代码实战 1、人脸检测 2、人脸识别 五、代码及示例图片链接 简介 目前github有非常多的人脸识别开源项目,下面列出几个常用的开源项目: 1、deepface 2、CompreFace 3、face_recogn…...
Linux工具【1】(编辑器vim、编译器gcc与g++)
vim详解 引言vimVim的三种模式及模式切换普通模式下操作底行模式下操作 gcc与ggcc的使用(g类似)预编译编译汇编链接静态库与动态库 总结 引言 vim(vi improved)编辑器是从 vi 发展出来的一个文本编辑器。 代码补全、编译及错误跳…...
基于Java+SpringBoot+vue前后端分离古典舞在线交流平台设计实现
博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…...
MQ - 闲聊MQ一二事儿 (Kafka、RocketMQ 、Pulsar )
文章目录 MQ的发展史阶段一:追求解耦阶段二:追求吞吐量与一致性阶段三:追求平台化 MQ的通用架构主题topic、生产者producer、消费者consumer分区partition MQ 存储KafkaGood Design ---> 磁盘顺序写盘Poor Impact---> topic 数量不能过…...
Qt中的 QIODevice类(包含:随机访问、顺序访问设备)
QIODevice类 一、简介 QIODevice用于对输入输出设备进行管理,是Qt中所有I/O设备的基接口类。为支持读写数据块的设备(如QFile、QBuffer和QTcpSocket)提供了通用实现和抽象接口。 输入设备有2种类型: 一种是随机访问设备,QFile(文件)和QBuff…...
【JavaScript 07】函数声明 地位平等 函数提升 属性方法 作用域 参数 arguments对象 闭包 IIFE立即调用函数表达式 eval命令
函数 1 概述1.1 声明1.2 重复声明 1.3 圆括号/return/recursion1.4 一等公民1.5 函数提升 2 函数属性与方法2.1 name属性2.2 length属性2.3 toString() 3 函数作用域3.1 概念3.2 函数内部变量提升3.3 函数本身作用域 4 参数4.1 概念4.2 省略4.3 传递4.4 同名4.5 arguments 对象…...
MyBatis源码分析_ResultSetHandler(7)
目录 1. 传统JDBC 2. Mybatis访问数据库 2.1 Statement访问数据库 2.2 火枪手 ResultSetHandler 出现 3. ResultSetHandler处理结果集 3.1 首先就是进入 handleResultSets 方法 3.2 handleResultSet 方法根据映射规则(resultMap)对结果集进行转化…...
Unittest加载执行用例的方法总结
前言 说到测试框架,unittest是我最先接触的自动化测试框架之一了, 而且也是用的时间最长的, unittest框架有很多方法加载用例,让我们针对不同的项目,不同项目的大小及用例的多少自己选择加载方式。今天我们就简单的说说…...
使用预训练的2D扩散模型改进3D成像
扩散模型已经成为一种新的生成高质量样本的生成模型,也被作为有效的逆问题求解器。然而,由于生成过程仍然处于相同的高维(即与数据维相同)空间中,极高的内存和计算成本导致模型尚未扩展到3D逆问题。在本文中࿰…...
微服务测试是什么?
微服务测试是一种特殊的测试类型,因为它涉及到多个独立的服务。以下是进行微服务测试的一般性步骤: 【B站最通俗易懂】Python接口自动化测试从入门到精通,超详细的进阶教程,看完这套视频就够了 1. 确定系统架构 了解微服务架构对…...
《现代C++教程》笔记(5-7)
文章目录 5 智能指针与内存管理5.1 RAII与引用计数5.2 std::shared_ptr5.3 std::unique_ptr5.4 std::weak_ptr 6 正则表达式7 并行与并发7.1 并行基础7.2 互斥量与临界区7.3 期物7.4 条件变量7.5 原子操作与内存模型 5 智能指针与内存管理 5.1 RAII与引用计数 在传统 C 中&am…...
红黑树深入剖析【C++】
目录 一、红黑树概念 二、红黑树节点结构设计 三、插入操作 处理情况1 处理情况2 处理情况3 插入总结: 四、插入操作源码 五、红黑树验证 一、红黑树概念 红黑树,是一种二叉搜索树,但在每个结点上增加一个存储位表示结点的颜色࿰…...
教育机构视频播放时观看行为分析有哪些应用?
教育机构视频播放时观看行为分析有哪些应用? 观看行为分析 观看行为分析是指我们平台基于视频大数据分析,能够以秒为粒度展示观众如何观看您的视频。 视频观看热力图是单次观看行为的图形化表示,我们平台云点播视频的每一次播放࿰…...
网络安全零基础入门:借助快马AI生成你的第一个防注入登录页面
作为一名刚接触网络安全的小白,我最近尝试用InsCode(快马)平台做了一个防注入的登录页面。整个过程比想象中简单很多,特别适合零基础入门。这里分享我的实践心得,希望能帮到同样想学习网络安全的朋友。 为什么选择登录页面作为切入点 登录功…...
广东省高级会计师评审辅导知名品牌
在职业发展的道路上,专业资格认证是许多财务从业者提升自我、拓宽职业路径的重要一环。广东省高级会计师评审,作为一项专业性强、要求严格的职业能力认定,其准备过程需要系统性的指导与支持。中山力朗教育咨询有限公司,作为一家立…...
西门子PLC存储区全解析:从M区到DB块的实战避坑指南
西门子PLC存储区全解析:从M区到DB块的实战避坑指南 第一次接触西门子PLC编程时,面对M区、L区和DB块这些存储区概念,我完全摸不着头脑。记得有次调试设备,明明在线监控看到M0.0已经置位,但程序就是不执行相应动作&#…...
比特币钱包密码与助记词恢复工具:从入门到精通
比特币钱包密码与助记词恢复工具:从入门到精通 【免费下载链接】btcrecover An open source Bitcoin wallet password and seed recovery tool designed for the case where you already know most of your password/seed, but need assistance in trying different…...
从RGA注意力机制到实战:行人重识别模型核心代码与论文精讲
1. RGA注意力机制原理解析 行人重识别(Person Re-identification)是计算机视觉领域的重要课题,而注意力机制在其中扮演着关键角色。RGA(Relation-aware Global Attention)机制通过建立全局关系感知模型,显…...
SPM12实战:从nii文件元数据解析到精准slice timing配置
1. 理解nii文件与slice timing的基础概念 当你第一次拿到fMRI的nii格式数据时,可能会被这个黑箱般的文件格式搞得一头雾水。nii文件就像是把整个大脑扫描过程打包成一个数字包裹,里面不仅包含三维的脑部图像数据,还隐藏着关键的扫描参数。我在…...
敏捷团队沟通技巧:减少冲突的5个方法
在敏捷开发环境中,软件测试从业者常面临跨职能冲突的挑战。数据显示,超过70%的项目延迟源于沟通不畅,尤其在测试与开发团队之间,角色目标错位(如开发侧重快速交付,测试聚焦风险防控)易引发摩擦。…...
springboot+vue基于web的汽车后市场维修保养管理系统的设计与实现
目录系统功能模块分析维修保养业务模块财务与统计模块客户端交互功能技术实现要点项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作系统功能模块分析 用户管理模块 实现用户注册、登录、权限管理(管理员、员工、客户…...
5G网络规划避坑指南:PRACH时频资源配置详解与常见配置错误排查
5G网络规划避坑指南:PRACH时频资源配置详解与常见配置错误排查 在5G网络部署与优化过程中,随机接入信道(PRACH)的配置直接影响终端接入成功率与用户体验。许多网络性能问题,如高接入延迟、频繁接入失败,往往…...
BGE-M3优化指南:CPU环境下提升语义分析推理速度的3个技巧
BGE-M3优化指南:CPU环境下提升语义分析推理速度的3个技巧 1. 引言 在当今企业级AI应用中,语义相似度分析已成为知识检索、智能客服和内容推荐等场景的核心技术。BAAI/bge-m3作为当前最强大的开源语义嵌入模型之一,以其卓越的多语言支持和长…...
