1

I'm trying to move a picture from the left to the right, and my H3 element from the right to the left.

I recently just finished learning about flexbox via teamtreehouse.com, but doing it on my own I seem to have become stuck!

Anything I seem to write to do with flex just doesn't seem to work, so I'm presuming I've done something majorly wrong!

#about {
  margin-top: 50px;
  margin-left: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
<div id="about">
  <section>
    <img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
    <h2 class="aboutme">About</h2>
    <p>Hi,.</p>
    <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/leehoward05">@leehoward05</a>.</p>
  </section>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Lee Howard
  • 75
  • 1
  • 6

1 Answers1

0

Your intended flex parent is too high up in the DOM tree. The flex parent must be one level above the children. Try this:

#about > section {
  margin-top: 50px;
  margin-left: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.aboutme {
  order: 0;
}

.profile-photo {
  order: 3;
}

https://jsfiddle.net/8kcf5snm/

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Thank you so much Andy!! What is ">" I've never seen this before? Also where exactly was my order wrong in the code? Trying to put together what you're saying, but I'm getting confused. – Lee Howard Jun 29 '16 at 02:38
  • The `>` means we are referring to the direct child of `#about`. We want to make the `
    ` the parent here, since it is the nearest parent to the items you're trying to move around. The `#about` is two levels above your header and image where the `section` is in the right position to act as flex parent. I had to use the `order` property to move things around since, without it, the elements will naturally order from right to left (almost the reverse of what you wanted). To avoid this, you could just place the elements in the correct order from the beginning.
     – Andy Hoffman Jun 29 '16 at 02:41
  • @LeeHoward Also if you're satisfied with my answer, please go ahead and accept it. Thanks! – Andy Hoffman Jun 29 '16 at 02:44
  • Very satisfied! Thanks for the explanation Andy! – Lee Howard Jun 29 '16 at 03:58
  • @LeeHoward As you're new, I should probably let you know that to accept an answer here, you'll need to click the green check next to my answer above. – Andy Hoffman Jun 29 '16 at 04:29