html - Flexbox 无法移动内容

Question

我目前正在为学校开展一个元素，我必须仅使用 CSS 重新设计另一个学生的网站。我一直在尝试实现 flexbox，但是每当我给一个类任何 flex 属性时，什么都没有发生。我不得不将 body 设置为 flex 容器，因为没有其他选择。我试过设置一些不同的东西并让 li 工作但仅此而已。此时 albums 和 albums1 类几乎没有响应。

body {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: url(img/back.png);
  color: #FFF;
  font-family: Ubuntu, Arial, sans-serif;
}

.nav {
  display: flex;
  background-color: #8AE5D8;
  justify-content: flex-end;
}

ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}

li a {
  margin: 10px;
  text-decoration: none;
  text-shadow: 1px 1px #000;
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 1.2em;
}

.background {
  height: 200px;
  width: 200px;
  justify-content: flex-start;
  border-radius: 10px;
}

.albums,
.albums1 {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
}

<header>
  <div class="nav">
    <ul>
      <li><a href="#about" title="about">About</a></li>
      <li><a href="#ablums" title="ablums">Albums</a></li>
      <li><a href="#contactus" title="contactus">Contact Us</a></li>
      <li><a href="#tours" title="tours">Tours</a></li>
    </ul>
  </div>
</header>
<h6 id="ablums"></h6>
<img class="background" src="img/background-image.jpg" alt="background">
<h2 class="albums1">Eclipse</h2>
<div class="albums">
  <img src="img/journey_eclipse-tn.jpg" alt="Ecli" class="image">
  <div class="overlay">
    <div class="text"></div>
    <ol>
      <li>City of Hope</li>
      <li>Edge of the Moment</li>
      <li>Chain of Love</li>
      <li>Tantra (My Eyes Can See)</li>
      <li>Anything is Possible</li>
      <li>Resonate</li>
      <li>She's a Mystery</li>
      <li>Human Feel</li>
      <li>Ritual</li>
      <li>To Whom It May Concern</li>
      <li>Someone</li>
      <li>Venus</li>
    </ol>
  </div>

Answer 1

我不完全确定您在寻找什么，而且您提供的代码也没有解决太多问题。我支持评论中的建议，将 flexboxfroggy 作为一项有趣且简单的练习来学习 Flexbox 的基础知识。

无论如何，下面是一个关于如何格式化布局的建议。由于您没有提供太多关于您希望实现的信息，因此我稍微剥离了您的标记以删除任何图像/叠加层。最好关注 Flexbox 布局的基础知识，并首先了解将 display: flex 应用于容器只会影响您正在应用它的容器内的子项。 flex 元素的后代是独立格式化的，与 flex 容器无关。当您有多个嵌套的 flex 容器并且需要根据需要更改 flex-direction 时，它会变得有点棘手。

无论如何，希望这个例子能对你有所帮助。 Here也是一把 fiddle 。

body {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: black;
  color: #FFF;
  font-family: Ubuntu, Arial, sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li a {
  margin: 10px;
  text-decoration: none;
  text-shadow: 1px 1px #000;
  font-family: Ubuntu, Arial, sans- serif;
  font-size: 1.2em;
}

ol  {
 padding: 0;   
}

ol li  {
 list-style-position: inside;
}

.nav {
  display: flex;
  justify-content: flex-end;
  padding-right: 5%;
  background-color: #8AE5D8;
}

.albums-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.albums {
  display: flex;
  flex-direction: column;
  margin: 5%;
  padding: 10px;
  background-color: slategrey;
  border: 1px solid white;
}

<header>
  <div class="nav">
    <ul>
      <li><a href="#about" title="about">About</a></li>
      <li><a href="#ablums" title="ablums">Albums</a></li>
      <li><a href="#contactus" title="contactus">Contact Us</a></li>
      <li><a href="#tours" title="tours">Tours</a></li>
    </ul>
  </div>
</header>
<div class="albums-container">
  <div class="albums">
    <ol>
      <h2 class="albums1">Eclipse</h2>
      <li>City of Hope</li>
      <li>Edge of the Moment</li>
      <li>Chain of Love</li>
      <li>Tantra (My Eyes Can See)</li>
      <li>Anything is Possible</li>
      <li>Resonate</li>
      <li>She's a Mystery</li>
      <li>Human Feel</li>
      <li>Ritual</li>
      <li>To Whom It May Concern</li>
      <li>Someone</li>
      <li>Venus</li>
    </ol>
  </div>
  <div class="albums">
    <ol>
      <h2 class="albums1">Eclipse</h2>
      <li>City of Hope</li>
      <li>Edge of the Moment</li>
      <li>Chain of Love</li>
      <li>Tantra (My Eyes Can See)</li>
      <li>Anything is Possible</li>
      <li>Resonate</li>
      <li>She's a Mystery</li>
      <li>Human Feel</li>
      <li>Ritual</li>
      <li>To Whom It May Concern</li>
      <li>Someone</li>
      <li>Venus</li>
    </ol>
  </div>
  <div class="albums">
    <ol>
      <h2 class="albums1">Eclipse</h2>
      <li>City of Hope</li>
      <li>Edge of the Moment</li>
      <li>Chain of Love</li>
      <li>Tantra (My Eyes Can See)</li>
      <li>Anything is Possible</li>
      <li>Resonate</li>
      <li>She's a Mystery</li>
      <li>Human Feel</li>
      <li>Ritual</li>
      <li>To Whom It May Concern</li>
      <li>Someone</li>
      <li>Venus</li>
    </ol>
  </div>
</div>