2.8 CSS 伸缩盒模型

1.模型简介
  • 传统布局是指:基于传统盒状模型,主要靠: display 属性+ position 属性+float 属性。
  • 2009年,w3C提出了一种新的盒子模型——+Flexible Box(伸缩盒模型,又称:弹性盒子)。
  • 它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序......
  • 截止目前,除了在部分IE浏览器不支持,其他浏览器均已全部支持。
  • 伸缩盒模型的出现,逐渐演变出了一套新的布局方案―—— flex布局。
  • flex布局目前在移动端应用比较广泛,因为传统布局不能很好的呈现在移动设备上。
2.伸缩容器
  • 给元素设置: display:flex或display:inline-flex,该元素就变为了伸缩容器。
  • display:inline-flex很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。
  • 一个元素可以同时是:伸缩容器、伸缩项目。
3.伸缩项目
  • 仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
  • 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”"。
4.主轴侧轴
  • 主轴:伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边是终点)。
    • 主轴方向:flex-direction
      • row :主轴方向水平从左到右(默认值)
      • row-reverse:主轴方向水平从右到左。
      • column :主轴方向垂直从上到下。
      • column-reverse :主轴方向垂直从下到上。
    • 主轴换行方式:flex-wrap
      • nowrap:不换行
      • wrap:自动换行,伸缩容器不够自动换行。总高度大于“所有行的和”会在每一行下面留出缝隙。
      • wrap-reverse:反向换行。从最低行开始排列,逐渐往上。
    • 主轴对齐方式:justify-content
      • flex-start :主轴起点对齐(默认值)
      • flex-end :主轴终点对齐。
      • center :居中对齐
      • space-between :均匀分布,两端对齐(最常用)。
      • space-around :均匀分布,两端距离是中间距离的一半。
      • space-evenly :均匀分布,两端距离与中间距离一致。
    • 主轴的基准长度:flex-basics
      • 设置主轴的基准长度会让宽高失效:主轴是横向,宽失效;主轴是纵向,高失效。
      • 浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值 auto,即:伸缩项目的宽或高。
  • 侧轴:与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边是终点)。
    • 侧轴对齐
      • 一行:align-items
        • flex-start :侧轴的起点对齐。
        • flex-end:侧轴的终点对齐。
        • center :侧轴的中点对齐。
        • baseline:伸缩项目的第一行文字的基线对齐。
        • stretch:如果伸缩项目未设置高度,将占满整个容器的高度(默认值)

      • 多行:align-content
        • flex-start : 与侧轴的起点对齐。
        • flex-end :与侧轴的终点对齐。
        • center : 与侧轴的中点对齐。
        • space-between :与侧轴两端对齐,中间平均分布。
        • space-around :伸缩项目间的距离相等,比距边缘大一倍。
        • space-evenly:在侧轴上完全平分。
        • stretch :占满整个侧轴。—―默认值

  • 元素水平垂直居中
/*方案一*/
父元素 {display: flex;justify-content: center;align-items: center;
}/*方案二*/
父元素 {display: flex;
}
伸缩项目 {margin: auto;
}
5.拉伸收缩
  • 拉伸:flex-grow
    • Fex-grow 定义伸缩项目的放大比例,默认为0,即:纵使主轴存在剩余空间,也不拉伸(放大)规则:
    • 若所有伸缩项目的 flex-grow值都为1,则:它们将等分剩余空间(如果有空间的话)。
    • 若三个伸缩项目的flex-grow值分别为:1、2、3,则按照比例瓜分剩余空间
  • 收缩:flex-shrink
    • flex-shrink定义了项目的压缩比例,默认为1,即:如果空间不足,该项目将会缩小。
    • 收缩项目的计算,略微复杂一点,我们拿一个场景举例:假如有三个收缩项目,宽度分别为: 200px、300px、200px,它们的flex-shrink值分别为:1、2、3若想刚好容纳下三个项目,需要总宽度为700px,但目前容器只有400px,还差300px所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:
      • 第一步:计算分母:(200×1) +(300×2) +(200×3) = 1400
      • 第二步:计算比例
        • 项目一:(200×1) / 1400 =比例值1
        • 项目二:(300×2) / 1400 =比例值2
        • 项目三:(200×3) / 1400 =比例值3
      • 第三步:计算最终收缩大小:
        • 项目一需要收缩:比例值1 x 300
        • 项目二需要收缩:比例值2 x 300
        • 项目三需要收缩:比例值3 x 300
    • 注意事项:如果收缩有偏差,大部分情况下是因为收缩项目的边框导致的。
6.flex复合属性
  • flex是复合属性,复合了: flex-grow . flex-shrink 、 flex-basis三个属性,默认值为0 1 auto
  • 如果写flex:1 1 auto ,则可简写为:flex : auto
  • 如果写flex:1 1 0,则可简写为: flex :1
  • 如果写flex:0 0 auto ,则可简写为:flex : none
  • 如果写flex:0 1 auto ,则可简写为: flex:0 auto(即flex初始值)
7.项目排序与单独对齐
  • 项目排序:
    • order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • 单独对齐:
    • 通过align-self 属性,可以单独调整某个伸缩项目的对齐方式
    • 默认值为auto,表示继承父元素的align-items 属性。

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

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

相关文章

DBeaver关闭代码的提示

在DBeaver中会遇到如下现象,很烦,怎么取消这个提示框呢? 解决方案:

根据一个类型 获取该类型的 特殊判断 优雅写法

需求:一个统计接口,时间类型参数有以下:今日、近七天、近三十日等 如果我要查询的话,SQL 里的条件必定是一个时间范围,所以就需要根据类型来算好这个时间范围,所以可以写成下面这样。 到时候直接就是 获取…

Android 如何在Android studio中快速创建raw和assets文件夹

一 方案 1. 创建raw文件夹 切成project浏览模式——>找到res文件粘贴要放入raw文件夹下的文件。 当然此时raw文件还没有,直接在右侧输入框中出现的路径~\res后面加上\raw即可。 2. 创建assets文件夹 同理在main文件夹下粘贴要放入assets文件夹的文件&#xff0…

免费外文文献检索网站,你一定要知道

01. Sci-Hub 网址链接:https://tool.yovisun.com/scihub/ Sci-hub是一个可以无限搜索、查阅和下载大量优质论文的数据库。其优点在于可以免费下载论文文献。 使用方法: 在Sci—hub搜索栏中粘贴所需文献的网址或者DOI,然后点击右侧的open即可…

强大日志查看器,助力数据联动分析

前言 我们曾讨论过观测云查看器强大的查询筛选和搜索功能,能够帮助用户快速、精准地检索数据,定位故障问题(参见《如何使用查看器筛选、搜索功能进行数据定位?》)。除此之外,日志查看器不仅可以帮助我们收…

VSCode中的任务什么情况下需要配置多个问题匹配器problemMatcher?多个问题匹配器之间的关系是什么?

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、简介 在 VS Code 中,tasks.json 文件中的 problemMatcher 字段用于定义如何解析任务输出中的问题(错误、警告等)。 problemMatcher是一个描述问题匹配器的接口&…

UOS安装Jenkins

一,环境准备 1.安装jdk 直接使用命令行(sudo apt install -y openjdk-11-jdk)安装jdk11 2.安装maven 参考此篇文章即可 UOS安装并配置Maven工具_uos 安装maven_蓝天下的一员的博客-CSDN博客 不过要注意这篇文章有个小错误,我…

vim三种模式,文本操作(操作字符/光标,列出行号可视化块模式/多文件查看)

目录 vim--文本编辑器 功能 基本概念 命令/默认模式 插入模式 底行模式 文本操作 引入 移动光标位置 删除字符 -- x/dd 复制/粘贴字符 -- yw/yyp 替换文本 -- r / %s 底行模式 全局替换 -- /g 撤销操作 -- u / ctrlr 修改字符 -- cw 示例 跳行 -- ctrlg 底行…

13 Linux 蜂鸣器

一、蜂鸣器驱动原理 常用蜂鸣器分两种,有源蜂鸣器和无源蜂鸣器。 它们俩的区别:有源蜂鸣器具有内置的振荡器和驱动电路,无源蜂鸣器没有;源蜂鸣器只需简单的数字信号来控制,无源蜂鸣器需要外部电路或微控制器来提供特定…

【已解决】设置SSH主机:VS Code-正在本地下载 VS Code 服务器

问题描述 很简单,就是我电脑强制重启之后用vscode再去连服务器,发现连不上了 解决办法 如上图,点击重试按钮,下面的这些东西就可以复制粘贴了 ctrf查找commit,这个时候就能找到一串d037ac076cee195194f93ce6fe2bdfe296…

AtCoder Beginner Contest 327 题解 A-D

目录 A - abB - A^AC - Number PlaceD - Good Tuple Problem A - ab 原题链接 题目描述 判断一个给定的字符串是否存在字符a和字符b相邻。 public static void solve() throws IOException{int a readInt();String s readString();boolean f s.contains("ab") ||…

力扣第279题 完全平方数 c++ 附java代码 (完全背包)动态规划问题

题目 279. 完全平方数 中等 相关标签 广度优先搜索 数学 动态规划 给你一个整数 n ,返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数,其值等于另一个整数的平方;换句话说,其值等于一个整数自乘的积。例如…

飞行器坐标转换

飞行器坐标转换 坐标系定义方向余弦矩阵 坐标系定义 本文定义的是右手直角坐标系, x − y − z x-y-z x−y−z轴分别为北-天-东。 从 A A A坐标系到 B B B坐标系是分别绕 y − z − x y-z-x y−z−x轴,即天-东-北旋转 ψ − θ − γ \psi-\theta-\gamm…

什么是文件安全

文件安全就是通过实施严格的访问控制措施和完美的权限卫生来保护您的业务关键信息不被窥探,除了启用和监控安全访问控制外,整理数据存储在保护文件方面也起着重要作用。通过清除旧的、过时的和其他垃圾文件来定期优化文件存储,以专注于关键业…

AdvFaces: Adversarial Face Synthesis

AdvFaces: Adversarial Face Synthesis AdvFaces:对抗性人脸合成 摘要 我们提出了AdvFaces,一种自动对抗人脸合成方法,通过生成对抗网络学习在显著面部区域产生最小的扰动。一旦AdvFaces经过训练,它就可以自动产生难以察觉的扰动&#xff0…

Linux常用指令(二)——文件管理

Linux文件管理 2.1 创建文件 touch2.2 复制文件 cp2.3 删除文件 rm2.4 移动文件 mv2.5 重命名文件 rename2.6 查看文件 cat2.7 查看文件的类型 file2.8 编辑文件 vim2.9 打印文件内容 cat2.10 变更文件所有者 chown2.11 修改文件权限 chmod 更加完整的Linux常用指令 2.1 创建文…

JOSEF约瑟 数显三相电压继电器 HJY-931A/D 导轨安装

名称:数字交流三相电压继电器型号:HJY-93系列品牌:JOSEF约瑟电压整定范围:10~450VAC额定电压:200、400VAC功率消耗:≤5W HJY系列 数字交流三相电压继电器 系列型号 HJY-931A/D数字式交流三相电压继电器&am…

qt5.15.2+vs2019源码调试开发环境搭建

说明 一些qt文件不进行源码调试无法知道其中的原理。提高软件质量,从概念原理及应用角度看待必须知道qt类运行原理。 1.安装 在网上找到qt安装包qt-unified-windows-x64-4.5.1-online.exe,安装qt5.15.2,有选择Qt Debug Information Files …

mediasoup udp端口分配策略

mediasoup-worker多进程启动时&#xff0c;rtcMinPort/rtcMaxPort可以使用相同的配置。 for (let i 0; i < numWorkers; i) { let worker await mediasoup.createWorker({ logLevel: config.mediasoup.worker.logLevel, logTags: config.mediasoup.work…

框架和库:你需要知道的一切

在编程领域&#xff0c;框架和库是两个常见的概念。虽然它们都可以帮助我们更有效地编写代码&#xff0c;但它们之间有着明显的区别。在本文中&#xff0c;我们将探讨框架和库的定义、区别以及如何选择使用它们。 什么是框架&#xff1f; 框架是一种开发工具&#xff0c;它提供…