Flexbox не может перемещать контент

Question

В настоящее время я работаю над проектом для школы, где мне нужно изменить дизайн сайта другого ученика, используя только CSS.Я пытался реализовать flexbox, но всякий раз, когда я даю классу какое-либо из свойств flex, на самом деле ничего не происходит.Я должен был установить тело как гибкий контейнер, так как другого варианта не было.Я пытался настроить несколько разных вещей и получил работу, но это все.Классы album и album1 практически не отвечают на данный момент.

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-direction при необходимости.

В любом случае, надеюсь, что этот пример может вам помочь. Здесь также является скрипкой.

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>