四时宝库

在过去十年左右的时间里，浮动是布置复杂网页的唯一选择。因此，即使在旧版浏览器中，它们也得到了很好的支持，开发人员已经使用它们来构建数百万个网页。

flexbox “柔性框”或“弹性框”布局模式提供了浮动的替代方法，用于定义网页的整体外观。浮动仅允许我们水平放置箱子，而弹性框让我们完全控制箱子的对齐方式、方向、顺序和大小。

作为 flex 容器的直接子级的每个 HTML 元素都是一个“项”。Flex 项可以单独操作，但在大多数情况下，由容器确定其布局。柔性项目的主要目的是让他们的容器知道它需要放置多少东西。

与基于浮动的布局一样，使用弹性框定义复杂的网页就是嵌套框。将一堆弹性项目对齐在一个容器内，反过来，这些项目可以用作其自身项目的弹性容器。

设置页面布局的基本任务没有改变：仍然只是移动一堆嵌套的框。

使用弹性框的第一步是将我们的一个 HTML 元素转换为弹性容器。我们使用显示属性来执行此操作，这应该在 CSS 框模型一章中很熟悉。通过给它一个flex值，我们告诉浏览器，盒子里的所有内容都应该用flexbox而不是默认的盒子模型来渲染。

将以下行添加到我们的 .menu-container规则中，以将其转换为弹性容器：

弹性方向：

对齐注意事项

.photo-grid {
  /* ... */
  flex-direction: column;
  align-items: center;      /* Add this */
}

排列顺序

.photo-grid {
  width: 900px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row-reverse;  /* <--- Really freaking cool! */
  align-items: center;
}

单个项 调整排列顺序：

.photo-grid {
  /* ... */
  flex-direction: row;  /* Update this */
  align-items: center;
}

.first-item {
  order: 1;
}

.last-item {
  order: -1;
}

弹性尺寸：

.footer {
  display: flex;
  justify-content: space-between;
}

.footer-item {
  border: 1px solid #fff;
  background-color: #D6E9FE;
  height: 200px;
  flex: 1;
}

.footer-three {
  flex: 2;
}

固定宽度：

.footer-one,
.footer-three {
  background-color: #5995DA;
  flex: initial;
  width: 300px;
}

总结：

Flexbox为我们提供了大量用于布局网页的惊人新工具。将这些技术与我们能够使用浮标所做的工作进行比较，应该很清楚，flexbox是布置现代网站的更干净的选择：

• display: flex; //创建弹性布局
• justify-content //定义水平对齐方式
• align-items //定义垂直对齐方式
• flex-direction //定义弹性排列方向，行或列
• row-reverse or column-reverse //定义 行方向右至左， 列 方向 下至上
• order //定义单个元素的次序
• align-self //定义单个元素的垂直对齐方式
• flex //定义弹性伸缩布局