CSS_Flex那些鲜为人知的内幕

前言

Flex想必大家都很熟悉，也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时，是如何查阅并解决的。反正，我每次记不住哪些属性或者对哪些属性的用法忘记时。我总是求助于阮一峰老师写的Flex 布局教程：语法篇[1]。

开江网站建设公司创新互联公司,开江网站设计制作，有大型网站制作公司丰富经验。已为开江超过千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的开江做网站的公司定做！

其实，对于CSS来讲，大家都抱着一种「死记硬背」的东西来对待它。久而久之，就会出现上述我说的问题，一个属性或者一个使用案例，需要去指定的网站去查询。这算是好的呢，有些同学没有自己的知识体系或者收藏资料。 每次遇到问题，都是baidu/google一下，然后CV大发一通。

其实，我们应该把将 CSS 视为一组布局模式。每种布局模式都是一个可以实现或重新定义每个 CSS 属性的「算法」。我们使用 CSS 声明（键/值对）提供算法，算法决定如何使用它们。

换句话说，我们编写的 CSS 是这些算法的输入，就像传递给函数的参数一样。如果我们想真正熟悉 CSS，仅仅学习属性是不够的；我们必须学习算法如何使用这些属性。

只有，我们在对一些布局模式有了一定的掌握之后，我们才会在遇到类似的问题，游刃有余的处理问题。或者说像调用函数一样，输入特定的参数，得到特定的结果。

所以，今天我们来换一种对Flex的思考角度，对它来一次深度解析。

还有一点，需要说明，下文中不会设计到特有属性的介绍，并且还需要大家对Flex布局有一点的知识储备。

比方说，下图中标注的一些概念下文中就不会过多介绍了。推荐大家先把阮老师的那个文章通读几遍，对Flex有一个大体的了解在阅读下文。

图片

好了，天不早了，干点正事哇。

我们能所学到的知识点

前置知识点

Flexbox 是个啥？

Flex Direction

对齐(Alignment)

假设大小(Hypothetical size)

增长(Grow)和萎缩(Shrink)

最小尺寸的陷阱

间距

包裹

1. 前置知识点

「前置知识点」，只是做一个概念的介绍，不会做深度解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。「如果大家对这些概念熟悉，可以直接忽略」同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。

CSS 布局算法

CSS 有不同的模式，确定它如何在页面上布局元素。这些模式通常被称为布局算法或布局模式。

在 CSS 中有七种布局模式，下图是MDN_CSS_Layout_Mode[2]的描述

图片

其中Multi-column layout估计大家没咋接触过，剩余的或多或少在我们平时开发中都有接触过。

图片

其中四种被使用最多。流动、定位、flex和grid。

流动布局(Flow Layout)

默认情况下，CSS 使用所谓的流动布局算法(也称Normal flow)。流动将页面上的每个元素都视为属于文本文档。

块级元素以垂直方式在页面上重叠显示。它们会尽量占用尽可能多的水平空间，同时尽量减少垂直空间的占用。

内联元素在水平方向上像段落中的文本一样显示在一起。它们通常具有固定的宽度和高度，这就是为什么许多其他我们可能想要使用的属性在这些元素上不起作用的原因。我们可以通过将它们的显示属性更改为inline-block来更改此行为。

图片

定位布局

如果在元素上使用 position 属性，我们现在正在要求 CSS 根据定位布局算法显示该元素。在此布局模式中，我们可以请求几种不同类型的行为：

• 静态(Static)
• 相对(Relative)
• 绝对(Absolute)
• 固定(Fixed)
• 粘性(Sticky)

绝对定位元素往往因为在其他地方无法正常工作而被认为是一种hacky的解决方案。

还有一点需要注意，根据我们使用的值的不同，我们可能需要「考虑元素的父级」。例如，在绝对定位元素中，该元素相对于其最近的定位布局祖先定位。这意味着 CSS 将查找 HTML 树并找到最近的一个祖先，「该祖先也使用了这些值之一」。如果找不到，则绝对定位元素将相对于视口定位。

图片

弹性盒布局

当 display 属性设置为 flex 时，元素将根据弹性盒布局算法布置其子元素。

而它就是我们今天要讲的重点，下文中有更多的介绍。

如果想了解更多的Flex的细节，可以参考w3c_flexbox[3]。

网格布局

网格与弹性盒类似，只要在元素上使用了 display: grid，就会开始使用网格布局算法。此布局算法将根据网格布局算法显示所有子元素。

Grid 和 Flexbox 的区别在于，Grid 适用于布局具有列和行的二维内容，而 Flexbox 适用于布局具有「一维内容」，即单个列或行。

我们后面也会有针对Grid的文章，预估在 12 月份或者明年 1 月份。

替换元素

在 CSS 中，替换元素（Replaced Element）是指一个由浏览器根据元素的标签和属性创建的、在渲染时展示的元素，而「不是由文档中的内容决定其显示的元素」。这些元素通常是具有外部资源（如图像或嵌入式框架）的元素，其内容由浏览器根据其属性和上下文动态生成。

以下是一些常见的替换元素：

「 元素：」通过src属性引用外部图像。

「

「

「