Question

我想在桌面版的主页上显示三篇文章，每篇文章都在自己的专栏中。正如我在一些教程中所读到的，当我使用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&#39;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&#39; 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>&#189; 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&#232;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 &#45; 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;
                }
    }

https://jsbin.com/kakiqanaho/edit?output 谢谢你的帮助！

Answer 1

在display: flex

中将main-content添加到@media all and (min-width: 900px)

见下面的演示：

/*CSS reset*/

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;
    display: flex;
   }
  .main-content > article {
    width: 30%;
    padding: 10px;
    order: 2;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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&#39;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&#39; 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>&#189; 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&#232;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 &#45; 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>

Flexbox不会在列中显示文本

1 个答案: