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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Flex框是一种新的布局方式，对齐项目，组织空间等。我通常使用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盒子如何工作？

3 个答案: