Flex 盒子是如何工作的？

Question

这是我正在使用的代码，但我试图了解正在发生的事情，而不仅仅是要键入哪些行。在 display: -webkit-flex 中，这是加载 flex 的内容吗，因为它不是标准属性？最初是否有一种通用的方法来加载这些，或者是否为您使用的每个属性执行此操作是标准的。这也适合我要创建的内容吗？（与右侧对齐的内联导航栏）

.nav-flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify: flex-end;
  max-height: 40px;
}

<nav class="nav-flex-container">
  <ul>
    <li class="nav-flex-item"><a href="web-development.html">Web Development</a>
    </li>
    <li class="nav-flex-item"><a href="climbing.html">Climbing</a>
    </li>
    <li class="nav-flex-item"><a href="about-me.html">About Me</a>
    </li>
    <li class="nav-flex-item"><a href="blog.html">Blog</a>
    </li>
  </ul>
</nav>

Answer 1

Flexbox 是 CSS 的新成员。然后，规范不够稳定，所以一些浏览器在标准属性或值之前使用供应商前缀。例如，基于 webkit 的浏览器使用 display: -webkit-flex 或 -webkit-justify-content.

如果你想让每一个元素都成为一个弹性容器（我不推荐），你可以使用

* {
  display: flex;
  /* Repeat the same but with vendor prefixes */
}

不，你没有正确使用它。 Only children become flex items。所以 flex 容器应该是 ul:

.nav-flex-container > ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

<nav class="nav-flex-container">
  <ul>
    <li class="nav-flex-item"><a href="web-development.html">Web Development</a></li>
    <li class="nav-flex-item"><a href="climbing.html">Climbing</a></li>
    <li class="nav-flex-item"><a href="about-me.html">About Me</a></li>
    <li class="nav-flex-item"><a href="blog.html">Blog</a></li>
  </ul>
</nav>

Answer 2

Flex box 是一种进行布局、对齐项目、组织空间等的新方法。例如，我通常使用 flex 来帮助我进行需要垂直对齐项目的布局。但是在 css-tricks 中有一个非常好的完整指南可以帮助您解决这些疑虑。

希望对你有帮助

Answer 3

我不确定你到底在问什么，但你的布局方法应该是：

.nav-flex-container ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify: flex-end;
  max-height: 40px;
}

<nav class="nav-flex-container">
  <ul>
    <li class="nav-flex-item"><a href="web-development.html">Web Development</a>
    </li>
    <li class="nav-flex-item"><a href="climbing.html">Climbing</a>
    </li>
    <li class="nav-flex-item"><a href="about-me.html">About Me</a>
    </li>
    <li class="nav-flex-item"><a href="blog.html">Blog</a>
    </li>
  </ul>
</nav>

Flex 盒子是如何工作的？

How do Flex boxes work?

html

css

flexbox