我希望在桌面版主页上展示三篇文章，每篇文章都在自己的列中。由于使用了 flexbox，应该很容易实现这一点，就像我在一些教程中看到的那样。
但是，没有什么变化，文章仍然一个接一个地排列着。我尝试了这个教程：https://davidwalsh.name/flexbox-column
HTML
<!DOCTYPE html>
<html>
<head>
<title>Munchies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="world.html">Around the globe</a></li>
<li class="nav-item"><a href="where.html">Where to eat?</a></li>
<li class="nav-item"><a href="recipes.html">Recipes</a></li>
<li class="nav-item"><a href="about.html">About me</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrapper">
<div class="main-content">
<article>
<h3>Featured:</h3>
<h2 id="brussels">Brussels</h2>
<h3>Belgian Food</h3>
<p>
Traditional Belgian food is not for the faint hearted, with dishes such as bloedworst (black pudding made from pig's blood, served with apple sauce), breugel kop (chunks of beef and tongue set in gelatine) and paar de filet/steack de cheval (horse
steak). But there are more elegant spins on the local fare available: try La Maison du Cygne, which fuses Belgian and French cuisine and also offers glorious views of Brussels' gabled, gilded Grand Place.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2>Real guacamole</h2>
<h3>Ingredients:</h3>
<ul class="recipe">
<li>4 mild chillies, finely chopped</li>
<li>bunch coriander, chopped</li>
<li>2 tomatoes, finely chopped</li>
<li>salt, to taste</li>
<li>1 onion, finely chopped</li>
<li>½ lime, juice only</li>
<li>3 ripe avocados</li>
</ul>
<h3>Directions:</h3>
<p>
In a pestle and mortar, pound the chillies, coriander, tomatoes, salt and onion to a fine paste.
</p>
<p>
Add a little water and lime juice to make a looser mixture. Mash in the avocados. Serve.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2 id="belgium">Belgium</h2>
<h3>Waffles</h3>
<p>
Belgian waffles (gauffres) are internationally known, but in Belgium there are two different types: the Brussels waffle and the Liège waffle. The Brussels waffle is rectangular, golden brown on the outside, dusted with powdered/icing sugar and then
sometimes covered with syrup, slices of fruit, chocolate spread and whipped cream - all of which is deemed a mite inauthentic by waffle connoisseurs! The denser textured Liege waffle is square and has burnt sugar on the outside. They are sold
by street vendors and gourmet restaurants alike, all over Belgium.
</p>
</article>
</div>
<aside class="aside aside-2">
MUNCHIES
</aside>
</div>
</body>
</html>
CSS/CSS重置/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Site wrapper, using flexbox*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
flex: 1 100%;
min-height: 100%;
min-width: 100%;
background-color: rgb(237, 237, 237);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 0em;
background-size: 200%;
}
.main {
padding: 1em;
flex: 1 100%;
text-align: justify;
background: rgb(237, 237, 237);
order: 3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
}
.aside-1 {
padding-top: 1em;
padding-left: 5em;
padding-right: 5em;
padding-bottom: 1em;
margin-top: 0em;
flex: 1 100%;
background: rgb(224, 224, 224);
order: 2;
}
.aside-2 {
padding: 10px;
margin-top: 0em;
flex: 1 100%;
background: rgb(55, 60, 57);
order: 1;
font-family: Impact, sans-serif;
font-size: 50px;
color: white;
}
/*Navigation menu*/
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: rgb(35, 36, 35);
}
/*List items width in navigation menu*/
.nav-item {
width: 200px;
border-top: 1px solid rgb(73, 70, 70);
border-bottom: 1px solid rgb(73, 70, 70);
}
/*Appearance for navigation menu links*/
.nav-item a {
display: block;
padding: 1em;
background: rgb(35, 36, 35);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: background 0.5s;
}
/*Changing the color of the link when hovering over with the cursor*/
.nav-item a:hover {
background: black;
}
/*Navigation trigger*/
.nav-trigger {
/*hide the checkbox input*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*critical positioning styles */
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
/*styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger+label, .wrapper {
transition: left 0.3s;
}
.nav-trigger:checked+label {
left: 215px;
}
.nav-trigger:checked~.wrapper {
left: 200px;
}
.responsive-image {
max-width: 100%;
}
html, body {
height: 100%;
}
body {
/*Without this, the body has excess horizontal scroll when the menu is open*/
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 15em;
margin: auto;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(35, 36, 35);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid white;
border-bottom: 1px solid white;
border-radius: 10px;
}
.content a:hover {
background: black;
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 1em;
}
#social img {
display: inline-block;
max-height: 50px;
max-width: 50px;
margin: 1em 1em 1em 1em;
float: left;
}
.anchor:before {
content: "";
display: block;
height: 50px;
/* fixed header height*/
margin: -50px 0 0;
/* negative fixed header height */
}
.index-img {
max-width: 70%;
border-radius: 25px;
display: block;
margin: auto;
padding: 10px;
}
.recipe {
list-style: none;
}
/*Tablets responsive*/
@media all and (min-width: 700px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 6em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 20%;
height: 6em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 6em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
text-align: center;
padding-top: 2.3em;
border-left: 1px solid rgb(73, 70, 70);
border-right: 1px solid rgb(73, 70, 70);
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 100%;
}
.recipe {
}
.aside-1 {
padding: 10px;
flex: 1 100%;
font-size: 18px;
/*position: fixed;*/
height: 100%;
}
.aside-2 {
background: red;
margin-top: 1.5em;
flex: 0 0 100%;
}
body {
margin-top: 0em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 50%;
}
}
/*Desktop responsive*/
@media all and (min-width: 900px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 3em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: auto;
height: 3em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 3em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
padding: 1em;
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 60%;
}
.aside-1 {
padding: 10px;
font-size: 18px;
flex: 0 0 200px;
height: auto;
}
.aside-2 {
background: white;
margin-top: 0;
color: black;
flex: 0 0 100%;
}
body {
margin-top: 3em;
}
/*.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}*/
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
/*margin-top: 6em;*
/*position: fixed;
left: 4em;*/
padding: 1em;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 31%;
display: block;
margin: auto;
}
.recipe {
}
.content-wrapper{
position: fixed;
}
.main-content{
order: 2;
}
.main-content > article {
width: 30%;
padding: 10px;
order: 2;
}
}
display: flex添加到.main-content。flex 布局的作用范围是父子关系。不是该父元素或其子元素的元素将不接受 flex 属性。 - Michael Benjamin