flex布局(2)

五、优缺点

优点:

  1. 简单易用:Flex布局使用简单,只需通过设置容器的属性即可实现弹性布局,无需复杂的计算和调整。
  2. 自适应性:Flex布局可以根据容器的大小自动调整元素的位置和大小,适应不同的屏幕尺寸和设备。
  3. 灵活性:Flex布局提供了多种属性和选项,可以灵活地控制元素的对齐方式、排列顺序、间距等,满足不同的设计需求。
  4. 响应式设计:Flex布局可以轻松实现响应式设计,使网页在不同的屏幕尺寸下都能良好地显示和布局。

缺点:

  1. 学习成本高,要想熟练掌握好flex必须下功夫去多研究多使用
  2. 复杂度较高的布局还是需要配合其他布局去完成的
  3. 低版本浏览器不被完全支持,需要做一些兼容性行为去处理

六、tips

6.1 属性失效

flex布局中,子元素的浮动float、清除clear、垂直对齐方式vertical-align等属性将失效

  1. float属性浮动属性会失效是因为float属性是操作dom本身然后将其脱离标准文档流从而实现想要的效果,但是flex布局中是有两层的最少父级(盒子层)和子级(项目层)的,脱离出文档流我的flex布局就乱套了啊。就好比我一个大的flex布局这些dom是一条小河,那些子级项目就是是里面的鱼🐟,一个子级项目设了浮动就好像有一条鱼🐟说:“诶,不在河里呆着了我要溜出去了”,鱼从河里溜出去下场都知道吧。
  2. clear属性 这个属性的定义是 指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面 这一下就知道为啥失效了吧。它是基于上面跳出河的那条鱼的啊
  3. vertical-align属性 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。 flex布局没有绝对的垂直对齐方向,他都是相对的主轴要是竖着的那交叉轴就是横着的,那么这个属性就跟justify-content重叠了;反之则是与align-items重合了。

6.2 是一维布局

flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。

一维布局的特性让他无法单独排布出复杂布局需要配合其他布局来完成

七、与其他布局比较

7.1 gap 属性

属性row-gap 和 column-gap,其简写为gap,近期添加到了盒子布局规范中。
这些属性(名称为grid-row-gap, grid-column-gap and grid-gap)最初定义在 CSS 网格布局中。但是他们被重命名并移入盒子布局规范。这样的话,所有的布局方法都可以使用这些属性。
不过在浏览器实现 Flex 的这些属性之前只能通过margin 来控制元素之间的间隙距离。

7.2 Writing Modes书写模式

7.2.1 原文及部分解释

MDN原文如下:

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

这段大意是:
在flexbox文章的基本概念中,我解释了flexbox是有书写模式意识的。CSS写作模式规范中详细介绍了书写模式,其中详细介绍了CSS如何支持国际上存在的各种不同的书写模式。我们需要意识到,随着书写模式改变文档中块的布局方向,这将如何影响我们的灵活布局。了解块和内联方向是新布局方法的关键。

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons.

这段大意是:
需要注意的是,除了以使用不同书写模式的语言发布内容外,我们可能还想更改文档的写作模式。请参阅本文,了解写作模式和使用方式的完整描述,无论是出于其他语言的内容还是出于创作原因。

这两段大体下来就是说flexbox是有writing-mode属性的,需要注意书写模式意识。

自己的一些碎碎念:
我的理解是不同的语言写作习惯是不一样的,例如我们常用到或者涉及到的中英文都是从左往右的,但是阿拉伯文、希伯来文、波斯文这些都是从右往左写的。
基于不同语种的写作习惯,如果你的网站或者项目需要面向全球客户,那这方面需要注意一下。
不面向全球时但是你的客户要求你文字纵向排列从右往左之类的这种需求也是可以用这个实现的。

7.2.2 writing-mode值

书写模式规范定义了书写模式writing-mode属性的以下值

  1. horizontal-tb

    • 对于左对齐(ltr)文本,内容从左到右水平流动。
    • 对于右对齐(rtl)文本,内容从右到左水平流动。
    • 下一水平行位于上一行下方。
  2. vertical-rl

    • 对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行左侧。
    • 对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行右侧。
  3. vertical-lr

    • 对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行右侧。
    • 对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行左侧。
  4. sideways-rl 仅在Firefox中支持

    • 对于左对齐(ltr)文本,内容从下到上垂直流动。
    • 对于右对齐(rtl)文本,内容从上到下垂直流动。
    • 所有字形(即使是垂直文本中的字形)都朝向右侧。
  5. sideways-lr 仅在Firefox中支持

    • 对于左对齐(ltr)文本,内容从上到下垂直流动。
    • 对于右对齐(rtl)文本,内容从下到上垂直流动。
    • 所有字形(即使是垂直文本中的字形)都朝向左侧。

这些值用于更改块元素在页面上的布局方向,以匹配在特定书写模式下格式化内容时块元素的布局方向。可以将下面的实际示例更改为这些模式,以观察flex布局变化。

7.2.3 完整代码示例

为了更好理解上面那些值,以下为一个完整的包含各个writing-mode值的例子

<table><tr><th></th><th>竖排文本</th><th>横排文本(从左到右)</th><th>横排文本(从右到左)</th><th>混合文本</th></tr><tr><td>horizontal-tb</td><td class="example Text1"><span>我家没有电脑。</span></td><td class="example Text1"><span>Example text</span></td><td class="example Text1"><span>מלל ארוך לדוגמא</span></td><td class="example Text1"><span>1994 年に至っては</span></td></tr><tr><td>vertical-lr</td><td class="example Text2"><span>我家没有电脑。</span></td><td class="example Text2"><span>Example text</span></td><td class="example Text2"><span>מלל ארוך לדוגמא</span></td><td class="example Text2"><span>1994 年に至っては</span></td></tr><tr><td>vertical-rl</td><td class="example Text3"><span>我家没有电脑。</span></td><td class="example Text3"><span>Example text</span></td><td class="example Text3"><span>מלל ארוך לדוגמא</span></td><td class="example Text3"><span>1994 年に至っては</span></td></tr><tr><td>sideways-lr</td><td class="example Text4"><span>我家没有电脑。</span></td><td class="example Text4"><span>Example text</span></td><td class="example Text4"><span>מלל ארוך לדוגמא</span></td><td class="example Text4"><span>1994 年に至っては</span></td></tr><tr><td>sideways-rl</td><td class="example Text5"><span>我家没有电脑。</span></td><td class="example Text5"><span>Example text</span></td><td class="example Text5"><span>מלל ארוך לדוגמא</span></td><td class="example Text5"><span>1994 年に至っては</span></td></tr>
</table>
.example.Text1 span,
.example.Text1 {writing-mode: horizontal-tb;
}.example.Text2 span,
.example.Text2 {writing-mode: vertical-lr;
}.example.Text3 span,
.example.Text3 {writing-mode: vertical-rl;
}.example.Text4 span,
.example.Text4 {writing-mode: sideways-lr;
}.example.Text5 span,
.example.Text5 {writing-mode: sideways-rl;
}

结果如图:
在这里插入图片描述

如果打算在布局中使用写作模式,那么仔细测试结果是明智的——毕竟这很容易让东西变得难以阅读!

关于更多浏览器兼容性的问题可以查看:书写模式的MDN文档

7.3 Flexbox 弹性布局和 Grid 网格布局

7.3.1 相同点

Grid网格布局和Flexbox弹性布局在覆盖其他方法时通常以相同的方式操作。
你可以使用Flexbox弹性布局作为Grid网格布局的后备方案,因为在较旧的浏览器中对Flexbox弹性布局有更好的支持。如果flex item成为grid item,则可能已分配给子元素的flex特性将被忽略。

您可以在两种布局方法中使用Box Alignment“长方体对齐”属性,因此使用flexbox作为网格布局的后备方案可以非常好地工作。

7.3.2 不同点
  1. Flexbox是一种一维布局方法,而Grid layout是一种二维布局方法。正如在基本概念文章中已经描述的那样,可以允许flex项进行包装,但一旦它们这样做,每一行都将成为自己的flex容器。当空间被分配时,flexbox不会查看其他行中项目的位置,而是试图将它们彼此对齐。

下面的例子是一个flex的布局。
在这里插入图片描述
相似的布局用Grid创建一个,我们可以控制行和列中的布局。
在这里插入图片描述
其实flex也可以实现上面网格布局那个效果不过是得给最后一个元素控制一下flex本质上确实没有网格布局好操控
在这里插入图片描述

  1. 这个案例中指出了这两种布局方法之间的另一个关键区别。
    在Grid“网格布局”中,可以对容器执行大部分大小调整规范,设置轨迹,然后将项目放入其中。
    在flex box中,当您创建一个flex容器并在该级别设置方向时,对项目大小的任何控制都需要发生在项目本身上。

  2. 根据经验,如果要为flex items添加宽度,以便使包装的flex容器的一行中的项目与上面的项目对齐,那么确实需要二维布局。在这种情况下,使用CSS网格布局可能会更好地布局组件。

  3. 对于较小的组件,不应该使用flexbox,而对于较大的组件,则不应该使用Grid网格布局;一个微小的组件可以是二维的,而一个大的布局可以用一维的布局更好地表示。

有关网格和flexbox的更多比较,请参阅文章“网格布局与其他布局方法的关系”

八、经典弹性盒子案例

8.1 导航

8.1.1 拆分开
nav ul {display: flex;justify-content: space-between;
}
<nav><ul><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3 is longer</a></li><li><a href="#">Page 4</a></li></ul>
</nav>

在这里插入图片描述

8.1.2 占满
nav ul {display: flex;
}nav li {flex: auto ;
}
<nav><ul><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3 is longer</a></li><li><a href="#">Page 4</a></li></ul>
</nav>

在这里插入图片描述

8.2 拆分导航

nav ul {display: flex;gap: 20px;
}.push-right {margin-left: auto;
}
<nav><ul><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3 is longer</a></li><li class="push-right"><a href="#">Page 4</a></li></ul>
</nav>

在这里插入图片描述

8.3 元素居中

.box {display: flex;align-items: center;justify-content: center;
}.box div {width: 100px;height: 100px;
}
<div class="box"><div></div>
</div>

在这里插入图片描述

8.4 绝对底部

.card {display: flex;flex-direction: column;
}.card .content {flex: 1 1 auto;
}<div class="cards"><div class="card"><div class="content"><p>This card doesn't have much content.</p></div><footer>Card footer</footer></div><div class="card"><div class="content"><p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p></div><footer>Card footer</footer></div>
</div>

在这里插入图片描述

8.5 媒体对象

img {max-width: 100%;
}.media {display: flex;align-items: flex-start;
}.media .content {flex: 1;padding: 10px;
}<div class="media"><div class="image"><img src="MDN.svg" alt="MDN logo"></div><div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
</div>

在这里插入图片描述

8.6 Form controls表单控件

8.6.1
.wrapper {display: flex;
}.wrapper input[type="text"] {flex: 1 1 auto;
}<form class="example"><div class="wrapper"><input type="text" id="text"><input type="submit" value="Send"></div>
</form>

在这里插入图片描述

8.6.2
.wrapper {display: flex;}.wrapper input[type="text"] {flex: 1 1 auto;
}<form class="example"><div class="wrapper"><label for="text">Label</label><input type="text" id="text"><input type="submit" value="Send"></div>
</form>

在这里插入图片描述


参考资料

  1. 阮一峰的网络日志关于flex
  2. flex的MDN

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

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

相关文章

3.5 RESOURCE ASSIGNMENT

一旦内核启动&#xff0c;CUDA运行时系统将生成相应的线程网格。正如上一节所讨论的&#xff0c;这些线程被分配给逐个块执行资源。在当前一代硬件中&#xff0c;执行资源被组织成流式多处理器&#xff08;SM&#xff09;。图3.12说明可以为每个SM分配多个线程块。每个设备都对…

uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法

目录 平台差异说明 #基本使用 #设置进度条动画效果 #设置进度条内部显示百分比值 #修改进度条的样式 #API #Props #Slots 平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√ #基本使用 通过percent设置当前的进度值&#xff0c;该…

计算机视觉下的数据增强代码实现

数据增强的实现 使用经典的pytorch框架下的torchvision.transformers对计算机视觉进行增强的代码实现。 使用下面的图像进行数据增强&#xff0c;相应的效果图如下所示&#xff01; 导包 import os import PIL.Image as Image from torchvision import transforms as transfor…

RT-Thread 线程间同步 信号量

线程间同步 在多线程实时系统中&#xff0c;一项工作的完成往往可以通过多个线程协调的方式共同来完成。 例如一项工作中的两个线程&#xff1a;一个线程从传感器中接收数据并且将数据写到共享内存中&#xff0c;同时另一个线程周期性地从共享内存中读取数据并发送出去显示&a…

SpringCloud系列篇:核心组件之网关组件

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.网关组件是什么 二. 网关组件的…

vivado 创建编译后工程

创建后期合成项目 合成后项目以合成网表、完全生成的块设计、完全生成的IP以及相应的约束。然后&#xff0c;您可以分析、布局和实施设计 注意&#xff1a;您可以使用XST或第三方合成工具来创建合成网表。 重要&#xff01;使用EDIF和NGC文件时&#xff0c;顶部单元格名称必…

java递归生成树型结构

java递归生成树 1.获取数据 public List<TreeClassifyRespVO> getTreeClassifyList(ClassifyPageReqVO reqVO) {List<ClassifyDO> classifyList classifyMapper.selectList(reqVO);List<TreeClassifyRespVO> childClassifyResp ClassifyConvert.INSTANCE…

MySQL之导入、导出

文章目录 1.navicat导入导出2.mysqldump命令导入导出2.1导出2.2导入 3.load data infile命令导入导出4.远程备份5.思维导图 1.navicat导入导出 使用Navicat工具导入t_log 共耗时 55s 2.mysqldump命令导入导出 2.1导出 导出表数据和表结构 语法&#xff1a; mysqldump -u用…

EasyExcel百万数据导入导出

文章目录 百万数据准备EasyExcel导出EasyExcel不支持并发写导出功能的代码片段 EasyExcel导入 https://gitee.com/antirust/idooy-stable/tree/master/idooy-EasyExcel 开发中&#xff0c;导入导出功能对于后台管理这样的系统来说太常用了&#xff0c;除了实现该功能外导入导出…

Python爬虫-爬取豆瓣Top250电影信息

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

QT qss文件设置样式

方式一 &#xff08;单个&#xff09; 方式二 &#xff08;全局&#xff09; 所有按钮都会采用这个样式。 方式三 &#xff08;qss文件&#xff09; 创建资源文件 创建qss文件&#xff08;Button.qss&#xff09; 引用qss文件 QApplication a(argc, argv);QString qss;QFile…

Kettle Local引擎使用记录(一)(基于Kettle web版数据集成开源工具data-integration源码)

Kettle Web &#x1f4da;第一章 前言&#x1f4da;第二章 demo源码&#x1f4d7;pom.xml引入Kettle引擎核心文件&#x1f4d7;java源码&#x1f4d5; controller&#x1f4d5; service&#x1f4d5; 其它&#x1f4d5; maven settings.xml &#x1f4d7;测试&#x1f4d5; 测试…

【STM32】STM32学习笔记-USART串口数据包(28)

00. 目录 文章目录 00. 目录01. 串口简介02. HEX数据包03. 文本数据包04. HEX数据包接收05. 文本数据包接收06. 预留07. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便捷&#xff0c;因此大部分电子设备都支持…

Python 使用input函数从键盘输入数据

在Python中&#xff0c;input()函数可以从键盘获取用户的输入数据。当我们使用input()函数时&#xff0c;会暂停程序的执行&#xff0c;等待用户输入数据&#xff0c;并将用户输入的数据作为字符串返回。 如&#xff1a; name input("请输入你的姓名&#xff1a;"…

Python私有变量的定义与访问

class Student():def __init__(self, name, age):self.name nameself.age ageself.__score 0def marking(self, score):if score < 0:return 分数不能为0self.__score scoreprint(self.name 同学本次得分是: str(self.__score)) def __talk(self): # 私有的类可通过在…

RocketMQ5-03RocketMQ-Dashboard和Java客户端访问示例

接上篇02快速部署RocketMQ5.x(手动和容器部署) 已经完成 RocketMQ5.0 环境的部署&#xff0c;就需要对这个环境进行测试&#xff0c;查看集群、写入消息、读取消息等 本篇教你如何使用和查看部署的服务&#xff1a; Docker部署 Dashboard 获取镜像并下载部署服务 客户端连接 …

哈希-力扣01两数之和

题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺…

spring boot 2升级为spring boot 3中数据库连接池druid的问题

目录 ConfigurationClassPostProcessor ConfigurationClassBeanDefinitionReader MybatisPlusAutoConfiguration ConditionEvaluator OnBeanCondition 总结 近期给了一个任务&#xff0c;要求是对现有的 spring boot 2.x 项目进行升级&#xff0c;由于 spring boot 2.x 版…

Linux Capabilities 进阶实战

目录 1. 快速回顾 2. 为可执行文件分配 capabilities 3. 构建半特权环境 4. 容器与 capabilities Linux Capabilities 基础概念与基本使用 上一篇学习了LinuxCapabilities的基础知识和基本使用&#xff0c;因为后面需要学习Docker的逃逸&#xff0c;理解Linux Capabilitie…

忆阻器芯片STELLAR权重更新算法(清华大学吴华强课题组)

参考文献&#xff08;清华大学吴华强课题组&#xff09; Zhang, Wenbin, et al. “Edge learning using a fully integrated neuro-inspired memristor chip.” Science 381.6663 (2023): 1205-1211. STELLAR更新算法原理 在权值更新阶段&#xff0c;只需根据输入、输出和误差…