为什么我可以用Flex移动图像？

Question

.nav {
  height: 500px;
}

.navphoto {
  height: 500px;
  display: flex;
  justify-content: flex-end;
}

<div class="nav">
  <img class="navphoto" src="images/navphoto.jpg">
</div>

正如标题所说：为什么我不能移动图像，但是当我将Flex代码放入.NAV中时，它正在工作。

Answer 1

有两个问题：

• 您的外部DIV不是Flex容器
• 正当 - contify-content是Flex容器的属性

.nav {
  height: 500px;
  display: flex;
  justify-content: flex-end;
}

.navphoto {
  height: 500px;
}

<div class="nav">
  <img class="navphoto" src="images/navphoto.jpg">
</div>

基本上，试图将图像本身设置为flex-container并不能做您想要的事情，因为图像不是自身的孩子。这是整个元素。您需要某种弹性容器才能在其中布局。

Answer 2

来自 css技巧 - flexbox的完整指南

flexbox布局（Flexible Box）模块旨在提供一种更有效的方法，即使它们的尺寸为未知和/或动态（因此“ flex”一词）。

关键字 - 容器

它对flex img元素没有太大的逻辑意义，因为它不是容器，它是flex -item 。如果您的子集包含img和text，那么对于flex it是有意义的。

请在下面的CSS中查看注释：

/* nav would be the main container to position content with justify-content */

nav {
  border: dotted black 3px;
  padding: 1em;
  display: flex;
  /* justify-content justify's content (blue container) on the x-axis */
  /*justify-content: center;*/ /* centered */
  /*justify-content: flex-start;/* /* start */
  justify-content: flex-end; /* end */
}

.nav {
  border: dotted blue 3px;
  padding: 1em;
  /*margin: auto;*/ /* will automatically center blue container despite what `justify-content` is defined as because width: 100%; is not defined and because the parent is flexed*/
  /* this is now another container because it has the img and p nested, you would use flex to get the items to align in a row if flex-direction: column; wasn't defined. */
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* you'll notice if you uncomment those flex properties justify-content doesn't do anything. why? because you can see by the borders there is no where for the content to justify. The p with the pink border is spanning 100% of the container, so you would have to use text-align: center; if you had width: fit-content; on p then you would use `align-items: center;` or `margin: auto; on p. Both do the same. */
  text-align: center;
}

.navphoto {
  height: 500px;
  border: solid orange 5px;
}

img {
  max-width: 100%;
}

p {
  border: solid hotpink 2px;
  /*width: fit-content;*/
}

<nav>
  <div class="nav">
    <img class="navphoto" src="https://dummyimage.com/200/000/fff">
    <p>Dummy text</p>
  </div>
</nav>

Answer 3

您正在应用显示：flex; on .navphoto，将其应用于.nav。查看以下代码

.nav {
  display: flex;
  justify-content: flex-end;
  height: 500px;
}

.navphoto {
  height: 500px;
}

<div class="nav">
  <img class="navphoto" src="https://images.unsplash.com/photo-1653629154351-3072ee211a9b">
</div>