尝试使用 flexbox 使图像在 flex 项目中居中。这里发生了什么？

Question

我正在尝试将图像置于弹性项目的固定 nav 菜单中。我试过使用 justify-content: center; 命令，但我认为它没有任何作用。

下面是CSS，简称HTML。代码笔：http://codepen.io/anon/pen/XmQQgb

CSS:

body {
  padding:0;
  margin:0
}

.wrapper {
  display: flex;
}

nav { 
  flex: 0 0 300px;
  background: gray;
}
.nav-wrapper {
  position: fixed;
  top: 0; left: 0;
}

section {
  flex: 1 1;
  padding: 20px;
}

.navImage {
  display: block;
  margin: 0 auto;
}

HTML

<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
      <img class="navImage" width="100" height="100" src="https://upload.wikimedia.org/wikipedia/commons/5/56/Run.svg">

      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
      <blockquote><i>Please, make me fixed!</i></blockquote>
    </div>
  </nav>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
  </section>
</div>

Answer 1

您的 nav 元素的宽度是 300px。

nav { 
    flex: 0 0 300px;
    background: gray;
}

您的 .nav-wrapper 元素（nav 的子元素）的宽度未定义。

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
}

因为 .nav-wrapper 有 position: fixed 它被从文档的 normal flow 中取出并且默认宽度为 0，它只会扩展到足以包裹内容。

由于.nav-wrapper的宽度受限于内容的宽度，因此在这个有限的space内发生居中。如果在 .nav-wrapper 周围添加边框，您会发现图像实际上完全居中...在可用宽度.

内

DEMO

要使图像沿 nav 列的整个宽度居中，您可以指定 .nav-wrapper 的宽度等于 nav 的宽度。

试试这个：

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; /* new */
}

所以基本上你就快到了。您只需要多一行代码。

DEMO

正在解决 justify-content 问题...

定义 Flex 项目

您已将外部容器 (.wrapper) 设置为 display: flex，这使其成为 flex container。

这会将 .wrapper 的子元素转换为 flex items。换句话说，nav 和 section 成为弹性项目。

请注意，除子项之外的弹性容器的后代不是弹性项目，弹性属性不适用于它们。因此，任何添加到 .nav-wrapper 或 .navImage 的弹性代码都将被忽略，除非它们的父代成为弹性容器。

调整内容

属性将无法在您当前的代码中运行，原因如下：

img 元素不是弹性项目（如上所述），因此弹性属性不适用于它。
即使您将 img 父级 (.nav-wrapper) 放入 flex 容器中，justify-content 也可能不是一个好的解决方案，因为 img有两个兄弟姐妹：ul 和 blockquote，所有三个都将以 justify-content.
如果您想制作 img（及其兄弟）弹性项目，那么使用列方向而不是行方向的弹性容器可能更有效。在这种情况下，您不会使用 justify-content 进行水平居中。您需要使用 align-items 或 align-self。

尝试使用 flexbox 使图像在 flex 项目中居中。这里发生了什么？

Trying to center an image within a flex item using flexbox. What's going on here?

css

flexbox

CSS:

HTML

定义 Flex 项目

调整内容