前置知识点

• Flexbox 是什么？ 是一种 CSS 布局模式，可让您将元素排列成行或列。
• FlexDirection： 决定元素在容器中排列的方向（行或列）。
• 对齐（Alignment）： 控制元素在交叉轴（与 FlexDirection 垂直）上的对齐方式。
• 假设大小（Hypotheticalsize）： Flexbox 使用的元素的默认尺寸，用于计算元素如何增长或收缩。
• 增长（Grow）和萎缩（Shrink）： 控制元素在剩余可用空间中的增长或收缩方式。
• 最小尺寸的陷阱： 元素的最小尺寸会影响其如何增长或收缩。
• 间距： 在元素之间创建空间的属性。
• 包裹： 当容器太小而无法容纳所有元素时发生的情况。

CSS 布局算法

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

• 流动布局（FlowLayout）： 默认布局模式，将元素视为文本文档。
• 定位布局： 使用 position 属性控制元素在页面上的位置。
• 弹性盒布局（Flexbox）： 使用 display: flex 来排列元素成行或列。
• 网格布局（Grid）： 使用网格系统来创建复杂布局。

弹性盒布局

当 display 属性设置为 flex 时，元素将根据弹性盒布局算法进行排列。

主要属性

• FlexDirection： 设置主轴方向（行或列）。
• justifyContent： 控制元素在主轴上的对齐方式。
• alignItems： 控制元素在交叉轴上的对齐方式。
• flex： 指定元素的增长和萎缩因子。
• flexGrow： 控制元素在剩余可用空间中的增长方式。
• flexShrink： 控制元素在剩余可用空间中的收缩方式。

示例

以下代码创建一个水平弹性盒容器，其中每个项目具有相等的宽度：

结论

Flexbox 是一种强大的布局工具，可让您创建灵活且响应式的布局。通过对弹性盒布局算法及其属性的深入理解，您可以创建复杂的布局，从而提高您的 web 应用程序的可访问性和用户体验。

帮我翻译一下

CSS? ascading Stylesheets，层叠样式表）是一种制作动态网页的新技术，现在已经为大多数的浏览器所支持，成为设计动态网页必不可少的工具之一。 与传统的纯 HTML 的网页相比，使用 CSS 能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。 W 3C（全球信息网协会）认为动态网页由三个必不可少的部分组成：脚本语言（包括 JavaScript 、 Vbscript 等）,支持动态效果的浏览器（包括英特网探险家,网景航海家等）和 CSS 样式表。 通过 CSS 的应用，用户能够改变如何显示网络页面的许多方面--字体、颜色、布局、图形,和连接等。 CSS 能让 HTML 标记、文本,图形和多媒体内容的表达相分离，可以为网络设计带来全新的构思空间，提供平面 HTML 所不具备的功能和灵活性。 在动态网页中，网络的外观取（使用 CSS 或不使用 CSS 设计）决于大量因素，包括用户的显示设备的特性、计算机的颜色分辨率,浏览器版本，甚至取决用户喜欢的字体大小。 层叠（ 成瀑布落下）是一套原理，它指导浏览器怎样合并许多表达选择：网络开发者的网站设计，网络浏览器的性能和默认设计，还有网络用户的首选项和显示要求。 在层叠里，优先级高的项影响其他优先级较低的属性，层叠值会像瀑布一样向下产生影响，也就是说 CSS 里最终表达效果是设计者,浏览器和用户之间积极协作的结果。 实际上， CSS 也可以被认为是一种语言。 它拥有自己的语法规则，有特殊的语义。 浏览器是 CSS 的执行环境。 CSS 解析器是当前浏览器的重要部分，而从当前主流浏览器对 CSS 的支持情况来看，做一个完美的 CSS 解析器并不是一件容易的事。

没有CSS的网页会怎样？

01前言

没有CSS的网页会怎样？看到这个话题，就想扯皮子一下，大开杀戒吹吹牛。没有CSS的网页是不是以裸体呈现给大家昵？下面我们先看看没有CSS的“裸体”：

这几张图片都是热门网址的“裸体”，是不是感觉好不习惯，下面我们展开聊一聊CSS。

02什么是CSS

CascadingStyleSheets简称“CSS”，它是一种编码语言，为网站提供外观和布局。与HTML一起，CSS是网页设计的基础。没有它，网站仍然是白色背景上的纯文本。

在万维网联盟（W3C）于1996年开发CSS之前，网页的形式和功能都非常有限。早期的浏览器将页面显示为超文本或纯文本，图像和指向其他超文本页面的链接。根本没有布局可言，只有在单个列中跨页面运行的段落。

CSS允许对网页布局进行多项创新，例如能够：

指定浏览器的默认字体以外的字体

指定文本和链接的颜色和大小

将颜色应用于背景

在框中包含网页元素并将这些框浮动到页面上的特定位置

他们将“风格”放在样式表中，并且第一次可以设计网页

03CSS真没了

过了一下概念，凭空想象一下，没有了CSS是不是让人很心烦，所有的网页看起来都是黑白相间。

假设其它的web技术依然健在，加上人对UI的追求是不变的。

那么我们的网页很有可能会经历下面的阶段：

一夜之间所有的css都无法调用了，那么大多数的网页都会变成本答案下贴的各种网页的截图。除了flash做的网页和cavans做的网页游戏。然后，想必这时候客服的电话已经打爆了，用户一脸懵逼，老板怒发冲冠。一大堆前端正在排队等候猝死。但是一部分前端开始使用其他的技术来构建网页的样式。

可能会出现利用js调用dom构建样式，多半会出现一个什么工具把原来的css转换为js控制dom的代码。

然后有的人开始觉得，反正都要用js来构建样式了，我干嘛不用cavans，还能想画什么画什么，或者又有一小部分人开始使用webGL，又或者大为火爆，前端开始要求设计师设计出3DUI。

最后，我们看到的网页的样式，依然会稳定在我们现在看到的样子，持续一步一步进化中。不同的是，因为工作量的上升，又会出现一堆帮助你构建网页样式的前端框架。css并不是唯一构建网页样式的工具。只是目前最好，最快的样式框架变成了其它，比如命名为“鸿天”。技术的发展始终追寻着需求的脚步，突然之间少了某个技术，也会很快有其他的技术取而代之。某个技术的真正死亡，从来都是因为需求变化了~