html - Flexbox 无法移动内容
问题描述
我目前正在为学校做一个项目,我必须只使用 CSS 重新设计另一个学生的网站。我一直在尝试实现 flexbox,但是每当我给一个类任何 flex 属性时,什么都没有发生。我不得不将 body 设置为 flex 容器,因为没有其他选项。我已经尝试设置一些不同的东西并得到一个 li 工作但就是这样。在这一点上,专辑和专辑 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>
解决方案
我不完全确定你在追求什么,而且你提供的代码也不能很好地解决问题。我支持评论中的建议,将 flexboxfroggy 作为一个有趣且简单的练习来了解 Flexbox 的基础知识。
无论如何,以下是关于如何格式化布局的一个建议。由于您没有提供有关您希望实现的目标的太多信息,因此我稍微删除了您的标记以删除任何图像/叠加层。最好关注 Flexbox 布局的基础知识,并首先了解应用display: flex
到容器只会影响应用到容器内的子级。弹性项目的后代是独立格式化的,与弹性容器无关。当您有多个嵌套的 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>
推荐阅读
- php - 函数的可为空类型参数上未捕获的 ArgumentCountError
- r - R:使用“microbenchmark”和 ggplot2 绘制运行时间
- javascript - 我的 HTML 按钮不起作用。哪里不对了?
- c++ - 析构函数删除指针的内容
- python - 使用“多处理”将函数应用于一组数据帧
- python - Python RuntimeError:Numpy 安装出错
- html - 无法修复 Chrome 开发者模式
- javascript - 使用 Stimulus 淡出从 DOM 中删除元素
- python - 将用户返回到上一行
- javascript - 每当遇到某个对象值时,将值添加到特定键