您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

时间:2019-09-04 09:04:51  来源:  作者:

按我想法的话,css 网格布局(grid)和弹性布局(Flexbox)应该同时出现才对,这样网页布局方案就变得完整了。事实是,弹性布局先出现,因为使用弹性布局创建类网格(grid-type)系统比使用浮动更加便捷,于是我们便得到了许多基于 Flexbox 的网格系统。实际上,Flexbox 的优势并不是用来创建网格系统,这也是为什么有时我们在用它创建网格系统时,感觉很费劲的原因。

我准备开一个小系列的文章,花点时间解密一下 Flexbox——就像过去我在讲解 Grid 一样。我们将看到 Flexbox 的设计目的,它真正做得好的地方,以及为什么我们不选择它作为布局方法。本文中将会介绍当我们在使用 display: flex 的时候,到底发生了什么?

Flex 容器

为了使用弹性布局,我们需要先有一个元素充当 Flex 容器的角色。容器使用 display: flex 声明:

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

display: flex 到底做了什么呢?在 Display Module Level 3 规范中,定义每 display 属性值由两部分组成:内部显示模型(inner display model)和外部显示模型(outer display model)。我们使用 display: flex 的时候,实际定义的是 display: block flexFlex 容器的外部显示类型是 block,在文档流(normal flow)中表现为块级元素(block level element),内部显示类型是 flex,所以容器的直接子元素将参与弹性布局。

当然,我们还可以使用 display: inline-flex 定义 Flex 容器,与上面声明类似,它实际定义的是 display: inline flexFlex 容器表现的像个行内元素,其直接子元素将参与弹性布局。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

理解了元素的外部显示模型和内部显示模型,对理解元素及其子元素在页面中的表现行为非常有帮助。你可以将这种思路带入到任意其他类型的盒子中:这个元素的表现特征为何?它的子元素呢?答案是跟外部显示模型和内部显示模型有关。

行与列

定义好 Flex 容器后,一些初始值就开始起作用了。在我们没有设置任何其他属性的情况下,所有的 Flex 项目 会排列为一行。之所以如此,是因为 flex-direction 的初始值是 row

flex-direction 属性设置的是主轴(main axis)的方向,取值除了 row 之外,还包括:

  • column
  • row-reverse
  • column-reverse

这些排列在一行的 Flex 项目,始于内联维度(inline dimension)的起始边缘(start edge)、按照在源码中出现的结构顺序,依次排列。在规范中,这个“起始边缘”被称为 main-start

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

main-start 位于内联维度的起始端

如果使用的是 column,则 Flex 项目从块维度(block dimension)起始边缘开始排列,从而形成一列。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

main-start 位于块维度的起始端

如果使用的是 row-reverse,则 main-start 和 main-end 的位置就调换了。因此,Flex 项目会一个个按照与之前相反的顺序排列。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

main-start 位于内联维度的终端

column-reverse 的作用于此类似。需要知道的是,这些值没有“改变 Flex 项目的顺序”,顺序变了只是表征而已,改变的其实是 Flex 项目从哪开始布局,也就是说改变的是 main-start 的位置。因此,Flex 项目按照反序显示,因为它们是沿着容器 的另一边开始布局的。

还有一个比较重要的点,就是 Flex 项目的排列顺序上的不同只是纯视觉上的。我们只是要求 Flex 项目从结束边缘(end edge)开始显示,对于屏幕阅读器(screen reader)或是当你按 Tab 键切换元素的时候,结果顺序还是在源码中出现的顺序。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

上面多此重复按下 Tab 键,可以观察按钮被 focus 的顺序与在源码中出现的顺序一样,与显示顺序无关。

Flexbox 中的两根轴

我们已经讲了弹性布局里一个非常重要的特性:主轴方向能从行切换到列。理解这种轴切换,能使我们更好地理解网格布局中对齐的工作原理。网格属于二维布局,我们几乎可以使用在弹性布局中同样的方式设置 Grid 项目在两个轴上的对齐效果。

我们已经解释了主轴,也就是 flex-direction 属性值定义的那个方向。交差轴(cross axis)是另一个维度。如果你设置了 flex-direction: row,主轴是沿着行的,而交差轴沿着列向下。如果设置的是 flex-direction: column,则主轴沿着列向下,而交差轴则沿着行。这就是我们要介绍的弹性布局的另一个重要特性,两个轴的方向与屏幕的物理 维度没有关系,我们没有讨论从左到右的行,或从上到下的列,是因为情况并非总是如此。

书写模式

上面在讲行和列的时候,提到了内联和块维度。本文使用英文书写的,是水平书写格式(译注:原文是英文,不过现在中文书写格式也与英文一样)。也就是当你为 Flexbox 指定为 row 排列方式的话,会得到水平排列的 Flex 项目。这种情况下,main-start 在左边——也就是英文句子开始的地方。

像在阿拉伯这样的语言方向从右向左的国家,那么起始边缘始于右边。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

当我只是创建了一个 Flex 容器的时候,Flexbox 的初始值表明 Flex 项目从右边开始,向左排列显示。内联方向(inline direction)的起始边缘就是我们使用的书写模式下句子开始的地方。

垂直书写模式(vertical writing mode)下的行是垂直的,因为在垂直语言环境下行就是垂直的,文本也是垂直显示的。我们在 Flex 容器上设置 writing-mode: vertical-lr 就能看到效果。这时候,当你设置 flex-direction 为 row 的时候,就能看到在垂直方向上显示的 Flex项目。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

因此,行可以是水平显示,main-start 在左边或右边,当然也可以是垂直的,main-start 在顶部。当你习惯于水平排列思维,看到垂直书写模式下设置了 flex-direction: row 的 Flex容器中的项目 是垂直排列的,可能感觉很奇怪,不过人家确实是在行的方向上排列的。

要让 Flex 项目在块维度上布局的话,为 flex-direction 设置 column 或 column-reverse。在英语环境下,我们看见 Flex 项目从 Flex 容器顶部开始、依次往下布局排列的。

在垂直书写模式下,块维度是横跨页面的,类似于此种模式下块元素的排列方式。如果设置了 vertical-lr,则块元素是从左到右排列的。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

但不论块元素是在什么方向显示排列的,如果 flex-direction 设置 column 的话,那么就是在块维度上布局的。

理解了行和列在不同的书写模式中,表现在不同的物理方向上,对理解 Grid 和 Flexbox 中的一些术语非常有用。我们没有在 Grid 和 Flexbox 中提到“从左到右”或是“从上到下”是因为我们没有做任何文档书写模式的假设。我们现在的 CSS 正在变得更加兼容书写模式,如果你想了解更多表现行为于此类似的其他属性和值的话,可以阅读我写的文章 Logical Properties and Values(https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)。

好了,我们来总结一下:

  • flex-direction: row
  • 主轴 = 内联维度
  • main-start 位于在给定书写模式下句子起始的地方
  • 交叉轴 = 块维度
  • flex-direction: column
  • 主轴 = 块维度
  • main-start 位于给定书写模式下块元起始布局的地方
  • 交叉轴 = 内联维度

默认对齐

使用 display: flex 后,还会有其他一些事情发生。在这个系列的之后的文章里,我会好好讲解一下对齐。本文中,我们先来看下使用 display: flex 后,使用的一些默认值。

注意: 对齐属性最开始起源于 Flexbox 规范。但正如 Flexbox 规范中解释的那样,BoxAlignment 规范最终将取代 Flexbox 规范中定义的这些属性。

主轴对齐

justify-content 的初始值是 flex-start,就像我们在 CSS 中这样声明了:

.container {
 display: flex;
 justify-content: flex-start;
}

这就是为什么 Flex 项目是从容器的起始边缘开始排列的原因。而 row-reverse 则是调换了起始边缘与结束边缘,结束边缘变为主轴开始的地方。

当你看见以 justify- 前缀开头的属性时,说明它是控制 Flexbox 主轴上对齐的。justify-content 操作主轴对齐,所有 Flex 项目在开始处对齐。

除了 flex-starjustify-content 还可使用的值包括:

  • flex-end
  • center
  • space-around
  • space-between
  • space-evently(在 Box Alignment 中添加)

这些值用于分配 Flex 容器可用空间(available space)。这是项目移动和间隔的原因。如果使用了 justify-content: space-between,可用空间在项目之间平均分配,当然了,前提是有空间可供分配。如果 Flex 容器空间过窄(所有项目 布局完成后没有额外的空间了),justify-content 就不起任何作用了。

我们可以设置 flex-direction 为 column 看下,此时 Flex 容器因为没有设置 height ,所以不存在剩余空间,justify-content: space-between 也不会起作用。如果你设置一个足够高的 height,待所有项目 布局好后,因为还有剩余空间,就会看到效果。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

交叉轴对齐

Flex 项目还可以在只有一行的 Flex 容器上,执行交叉轴对齐。这种对齐控制的是盒子们在这跟线上的对齐方式。下例中,有一个盒子的内容比其他的要多,然后其他盒子像被通知了一样伸展(stretch)到同样的高度。这是 align-items 属性初始值 stretch 在起作用:

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

当你看见以 align- 前缀开头的属性时,说明它是控制 Flexbox 交叉轴上对齐的。align-items 操作交叉轴对齐,所有 Flex 项目在弹性线(flex line)内对齐。

除了 stretchalign-items 还可以取的值包括:

  • flex-start
  • flex-end
  • center
  • baseline

如果不想要盒子伸展到最高那个的高度,可以设置 align-items: flex-start。让项目在交叉轴的起始边缘对齐。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

Flex 项目的初始值

Flex 项目是有初始设置的,如下:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

就是说项目默认不会扩展(grow)来填充主轴上的可用空间。如果给 flex-grow 设置了一个正值,那么项目就会扩展剩余的空间。

项目的 flex-shrink 属性处置值为正值 1,表示能收缩(shrink)。也就是说,当 Flex 容器比较窄的时候,在没有任何溢出发生的情况下,项目会变得尽可能小。这是一个明智的行为,一般来说,我们希望盒子里的内容不要溢出。

为了默认能够得到很好地布局,flex-basis 初始值使用了 auto。我会在以后的系列文章中解释这个属性的行为。你可以暂时把它认为是“大小刚刚好”(big enough to fit the content)。从页面表现上看的话,就是内容较多的那个项目分配到的空间会比内容少的要多。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

 

这就是使用 Flexbox 带来的灵活性、设置了 flex-basis 为 auto,在没有给项目设置额外大小限制的情况下爱,Flex 项目 有一个基础尺寸(base sizemax-content。这个宽度是指项目中的内容在完全没有折行的情况下的长度。然后每个项目会 在占据的基础尺寸的基础上,按比例拿走一部分空间,这在 flexbox 规范中有详情描述。

“注意: Flex shrink 因子分配负空间的时候,是在 Flex 项目的基础尺寸的基础之上增加的。最终分配的负空间多少,是根据因子值,按比例分配到每个项目头上的。在大一点的项目 没有显著收缩之前,小的项目是不会收缩到零的。”

大一点的项目被抽取的空间相对(自身)来说是少的。你可以比较下面两张图,第一张图里每个项目 的内容量差不多,所以看起来差不多是一样宽的。在第二张图里,第三项目的内容比较多,结果看到它分配到了更多的空间。

当我们在使用 display: flex 的时候,浏览器到底发生了什么?

内容多的项目分配到了更多的空间

Flexbox 在我们没有使用更多属性的前提下,尽可能的提供给我们一个合理的布局结果。与一刀切平均分配每个项目 一样的宽度、导致可能出现有内容多项目被挤压的非常高的情况不同的是,弹性布局会给内容多的项目 分配更多的显示空间。这种行为是弹性布局最佳的使用场景。 弹性布局最擅长于以一种灵活和内容感知的方式——沿着一个轴——放置一组项目。本文到此只是稍微接触了一些皮毛,在本系列后面的文章中我会适当地讲解这些算法。

总结

本文中,我们讲解了弹性布局中使用到的一些初始值,解释了当我们声明了 display: flex 的时候,实际发生了什么。一路分析下来,发现东西还是很多的,文中涉及到几个属性牵涉到弹性布局的许多关键特性。

弹性布局如此灵活:默认情况下,它试图对内容做出正确选择——压缩或拉伸 Flex 项目以获得最佳的可读性。弹性布局还支持书写模式(writing mode):行和列的方向与所使用的书写模式相关。通过选择空间的分布方式,弹性布局允许将 Flex 项目作为一个组在主轴上对齐;我们还可以在一个伸缩线(flex line)中对齐项目,在交叉轴上以彼此联系的方式移动 Flex 项目。重要的是,弹性布局能感知 Flex 项目的内容大小,会尝试在没有设置其他额外属性的情况下,来合理的分配空间给各个 项目。在以后的文章中,我们将更深入地讨论这些知识点,并做进一步分析什么时间以及为什么去选择使用弹性布局。

版权

作者:zhangbao90s

链接:https://juejin.im/post/5d2da274f265da1bb003f242

著作权归作者所有。



Tags:display: flex   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码就可以搞定。回顾以前(js...【详细内容】
2020-07-28  Tags: display: flex  点击:(291)  评论:(0)  加入收藏
按我想法的话,CSS 网格布局(grid)和弹性布局(Flexbox)应该同时出现才对,这样网页布局方案就变得完整了。事实是,弹性布局先出现,因为使用弹性布局创建类网格(grid-type)系统比使用浮动...【详细内容】
2019-09-04  Tags: display: flex  点击:(231)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(40)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条