Flexbox Align：何时使用 Auto Margins 而不是 Flexbox Center

flexbox 对齐属性非常棒，它们解决了很多布局问题，尤其是在需要常见的“垂直和水平中心”布局的情况下。但是，有时与自动边距对齐更安全、更灵活。本教程将告诉你什么时候！

该项目

对于这个演示，我们假设我们正在为客户构建一个最小的博客网站。设计师为我们提供了以下页面布局：

Flexbox Align：何时使用 Auto Margins 而不是 Center 第1张

单击菜单切换按钮时，将出现全屏菜单，如下所示：

Flexbox Align：何时使用 Auto Margins 而不是 Center 第2张

请注意以下事项：

标题将被固定并在我们滚动时保持不变。
菜单将全屏并固定。它的项目将垂直和水平居中。但是，如果它们的总高度超过菜单高度，则会出现滚动条。

1.定义 html 标记

让我们从设置所需的标记开始：

<header class="page-header">
  <nav>
    <div class="page-header-inner">
      <a href="" class="logo">Brand</a>
      <button type="button" class="toggle-menu">MENU</button>
    </div>

    <div class="menu-wrapper">
      <ul>
        <li>
          <a href="">...</a>
        </li>

        
      </ul>

      
    </div>
  </nav>
</header>

在nav元素中，我们将定义两个帮助按钮，允许我们通过单击来添加或删除项目。最少项目数为三个，但我们可以添加和删除项目以使我们的演示更清晰。

Flexbox Align：何时使用 Auto Margins 而不是 Center 第3张

2.指定一些css样式

这是我们将使用的样式的一部分：

/*CUSTOM VARIABLES HERE*/

.page-header,
.page-header .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.page-header .page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background: var(--beige);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.page-header .page-header-inner * {
  z-index: 1;
}

.page-header .menu-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--white);
}

默认情况下，只要我们单击切换按钮，该.menu-wrapper元素就会被隐藏并接收。display: flex

弹性盒中心

为了回答一个经典的布局问题，我们将使用 flexbox 将菜单垂直和水平居中。Flexbox 让它变得非常简单：对齐页面中间的项目，我们将使用justify-content: center和align-items: center.

但是，存在溢出问题。如果我们添加足够多的项目以使滚动条出现，我们会注意到顶部的项目被切断了——它们完全消失了，我们无法通过滚动到达它们。

Flexbox Align：何时使用 Auto Margins 而不是 Center 第4张

测试演示看看自己；在菜单中添加 20 个左右的项目：

See the Pen CodePen Home Flexbox Tip: vertical centering with align-items: center by Envato Tuts+ (@tutsplus) on CodePen.

safe关键字_

解决这个问题的一种方法是利用一个新的 CSS 关键字，我们可以在对齐项目时使用它： safe.

这是取自Mozilla Developer Network (MDN) Docs的确切定义：

“与对齐关键字一起使用。如果选择的关键字意味着该项目溢出对齐容器导致数据丢失，则该项目将按照对齐模式进行对齐start。”

为了测试这个新值，我们将替换align-items: center为align-items: safe center.

用简单的英语，我们会将这些safe center值翻译如下：

“元素将垂直居中，但如果它们的高度超过 flex 容器的高度，对齐模式将更改为start. 当然，要查看所有项目，flex 容器应该有一个适当的overflow-y值，例如auto。”

不幸的是，在撰写本文时，它还不是一个稳定的解决方案。实际上，它对浏览器的支持非常有限，并且仅适用于最新版本的 Firefox。

检查以下演示以了解safe关键字的工作原理（确保在 Firefox 中这样做）：

See the Pen Flexbox Tip: vertical centering with align-items: safe center by Envato Tuts+ (@tutsplus) on CodePen.

自动边距

值得庆幸的是，我们可以使用另一种安全的解决方案：我们将利用auto margins。这实际上不是一个 flexbox 属性，实际上您可能已经通过margin: 0 auto规则使用它来在父容器内居中固定宽度的元素。

在我们的例子中，诀窍是从 flex 容器中删除align-items: centerandjustify-content: center规则，并提供 flex 项margin: auto 。

通过将所有边距设置为auto，我们的弹性项目的所有边都将尝试占据任何可用空间。如果这个空间存在，他们会把它推到中心。

这解决了我们的特定问题，因为如果弹性项目超过容器的大小，自动边距不会切断部分弹性项目。

注意：请记住，一旦您使用此技术，flexbox 对齐属性将不起作用。

3.切换菜单

最后，我们将使用一些简单的 javascript 代码来切换菜单：

const toggleMenu = document.queryselector(".toggle-menu");
const pageHeader = document.querySelector(".page-header");

toggleMenu.addeventListener("click", function () {
pageHeader.classList.toggle("menu-opened");
document.body.classList.toggle("overflow-y-hidden");
});

对应的样式：

body.overflow-y-hidden {
  overflow-y: hidden;
}
.page-header.menu-opened .page-header-inner {
  box-shadow: none;
}
.page-header.menu-opened .menu-wrapper {
  display: flex;
}