Question

我正试图从左到右移动图片，从左到右移动我的H3元素。

我最近刚刚通过teamtreehouse.com了解了flexbox，但是我自己这样做了，我似乎已经卡住了！

我似乎用flex写的任何东西似乎都不起作用，所以我假设我做了一些重大错误！

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

Answer 1

你想要的flex父级在DOM树中太高了。 flex父级必须高于子级别一级。试试这个：

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

尝试使用flexbox从左向右移动2个元素

1 个答案: