Why can't I move an image with 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>

As the title says: why can't I move an image but when I put flex code into a .nav it's working.

Makes no sense to set an image as flex. Also, define *"move"*. Edit and improve — Roko C. Buljan, May 27 '22 at 17:38
Question seems clear to me. Let me know if my explanation needs any additional details. — CollinD, May 27 '22 at 17:42

score 0 · Answer 1 · answered May 27 '22 at 17:39

0

There's two problems:

Your outer div is not a flex container
justify-content is a property for a flex container

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

.navphoto {
  height: 500px;
}

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

Basically, trying to set the image itself as a flex-container doesn't do what you want because the image is not a child of itself. It's the entire element. You need some kind of flex container to layout within.

answered May 27 '22 at 17:39

CollinD

7,304
2
22
45

but how do I move only an image? Because if I have a text in a div and I apply flex, it moves everything: text and image. – flykat May 27 '22 at 17:46
Now I don't know what you're asking. If there's more context to your question, you need to include it or create a new one. We're not mind-readers. – CollinD May 27 '22 at 17:51
Let's say I have a
random textttt
along with this image navphoto.jpg in my .nav div. How do I move those elements seperately with flexbox? Or do flexbox connect all the elements and I have to move all of them along? – flykat May 27 '22 at 18:06
Please update your question to be more accurate to what your situation is and desired outcomes. I'll update the answer appropriately. I don't want to make this answer inaccurate with respect to the actual question being asked, so the next person that finds this question can also be helped by it. – CollinD May 27 '22 at 18:34

Kameron · Answer 2 · 2022-05-27T18:45:36.890

From CSS Tricks - A Complete Guide to Flexbox

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

Key word - container

It doesn't make much logical sense to flex the img element because it is not a container, it's a flex-item. If you had a different subset that contained the img and the text then it would make sense to flex it.

Please see the notes in the CSS below:

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

score -1 · Answer 3 · answered May 27 '22 at 17:41

You are applying display: flex; on .navphoto, apply it on .nav. Look at the following code

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

Why can't I move an image with flex?

3 Answers3