我必须在codepen上构建一个3列Flex布局
But I need to add a black color top bar like this:
我添加了一段代码，该代码已在 codepen 中注释。
我必须为此编写一个CSS，以便出现黑色顶栏。不知道该怎么做。可能会使用一些环绕属性或一些反向属性。请指导我。
body {
margin: 0;
}
header,
footer,
.content {
display: flex;
}
.content {
justify-content: space-between;
height: 75vh;
max-width: 1500px;
margin: auto;
}
.main {
display: flex;
justify-content: space-between;
width: 70.5%;
}
.primary {
width: 27%;
background-color: yellow;
}
.article {
background-color: blue;
width: 71%;
order: 2;
}
.secondary {
background-color: pink;
width: 25%;
order: 1;
}
.footer {
display: flex;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Fundamental Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>This is a Header Location</h1>
</header>
<div class="content">
<main class="main">
<!-- <div class="top">
The Top area
</div> -->
<aside class="secondary">
The secondary Sidebar
</aside>
<article class="article">
</article>
</main>
<aside class="primary">
The Primary Sidebar
</aside>
</div>
<footer class="footer">
The Footer Area
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>最佳答案
body {
margin: 0;
}
header,
footer,
.content {
display: flex;
}
.content {
justify-content: space-between;
height: 75vh;
max-width: 1500px;
margin: auto;
}
.main {
flex: 0 0 70.5%;
display: flex;
flex-wrap: wrap;
}
.top {
flex: 0 0 100%;
background-color: black;
color: white;
}
.secondary {
background-color: pink;
flex: 0 0 25%;
order: 1;
}
.article {
background-color: blue;
flex: 1;
order: 2;
}
.primary {
flex: 0 0 27%;
background-color: yellow;
}<header>
<h1>This is a Header Location</h1>
</header>
<div class="content">
<main class="main">
<div class="top">The Top area</div>
<aside class="secondary">The secondary Sidebar</aside>
<article class="article"></article>
</main>
<aside class="primary">The Primary Sidebar</aside>
</div>
<footer class="footer">The Footer Area</footer>顶部栏的位置如下:
.top在其容器.main内的宽度为 100%，而在较大容器中的宽度为 70.5%。- 因为
.main有flex-wrap:wrap，这会强制使用另外两个flex元素，.secondary和.article到下一行。 - 然后调整 sibling 的大小以适合第二行。
关于html - 向三列 Flexbox 布局添加顶栏(实现 Flex-wrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44056541/