前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

弹性盒子

网页的用户界面（User Interface 缩写 UI）包括两个部分。

第一部分是视觉要素，如色彩、字体和图片等。

第二部分是这些元素的排列和定位。

在响应式 Web 设计中，UI 布局必须适配不同尺寸的设备。

CSS3 引入了 Flexible Box，简称 flexbox（弹性盒子），它特别适合用来创建弹性的页面布局。

弹性布局以一种可预见的方式排列元素，使其适用于不同尺寸的设备。

虽然这是个新东西，但所有现代浏览器都已经支持 flexbox。

本章介绍了如何使用 flexbox 来实现弹性布局。

使用 display: flex 定位两个盒子
- 只要在一个元素的 CSS 中添加display: flex;，就可以使用其他 flex 属性来构建响应式页面了。

响应式界面: 应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

在推文中添加弹性盒子布局
使用 flex-direction 属性创建一行
- 添加了display: flex的元素会成为 flex 容器。只要把flex-direction属性添加到父元素，并设置其为 row 或 column 即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。row-reverse 和 column-reverse,排列倒置
在推文中使用 flex-direction 创建多行
- header和footer有自己的子元素，使用flex-direction属性可以把这些子元素排列成一行。这个属性告诉 CSS 需要将这个元素的子元素水平排列。 flex-direction: row
使用 flex-direction 属性创建一列 flex-direction:column;
在推文中使用 flex-direction 创建多列
使用 justify-content 属性对齐元素 -> 水平居中
- lex 容器里的 flex 子元素有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 子元素。幸运的是，我们有justify-content属性处理这个问题
- 把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目
- 关于 flex 子元素在主轴排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，可以让 flex 子元素排列在 flex 容器中间。其他可选值还有：

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。 flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。 space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。 space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边

在推文中使用 justify-content 属性
使用 align-items 属性对齐元素 -> 垂直居中
- align-items的可选值包括：
  - flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
  - flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
  - center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
  - stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
  - baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
使用 flex-wrap 属性包裹一行或一列
- flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。
- 不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。

换行方向的可选值有这些：

nowrap：默认值，不换行。 wrap：行从上到下排，列从左到右排。 wrap-reverse：行从下到上排，列从右到左排。

使用 flex-shrink 属性收缩项目
flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。flex-shrink属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink为 1 ，另一个项目flex-shrink为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。
使用 flex-grow 属性扩展项目
- flex-shrink会在容器太小时对元素作出调整。相应地，flex-grow会在容器太大时对元素作出调整。
使用 flex-basis 属性设置项目的初始大小
- flex-basis属性指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。flex-basis属性的单位与其他 size 属性一致（px、em、%等）。如果值为auto，项目的大小依赖于自身内容
使用 flex 短方法属性
- 上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。
- 属性的默认设置是flex: 0 1 auto;。
使用 order 属性重新排列项目
- order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
使用 align-self 属性
- flex 子元素的最后一个属性是align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整使用的属性都不能应用在 flex 子元素，所以这个属性显得十分有用。
- align-self的允许值与align-items一样，并且它会覆盖align-items的值。

FreeCodeCamp学习总结-Flexbox部分

前言

弹性盒子