Question

我目前正在为学校开展一个项目，我只需要使用CSS重新设计另一个学生的网站。我一直在尝试实现flexbox，但每当我给一个类任何flex属性时，都没有真正发生。我不得不将主体设置为flex容器，因为没有其他选择。我尝试过设置一些不同的东西，然后让它工作，但就是这样。专辑和专辑1类目前几乎没有响应。

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也是一个小提琴。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Flexbox无法移动内容

1 个答案: