How do I stop the second line of a flex row from ending up in the middle of a page?

Question

The #mainArticle section of my code includes a flex display that uses the row direction. This allows me to position items side-by-side, which is great. However, when a new row is started, the row starts halfway down the middle of the page. Is there a way to keep the second row in #mainArticle aligned to the top of the section?

body {
  display: grid;
  grid-template-areas:
    'header header header'
    'nav article ads'
    'nav footer footer';
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 1px;
  grid-column-gap: 1px;
  height: 100vh;
  margin: 0;
}

a {
  color: #0ad05b;
  text-decoration: none;
}

a:hover {
  color: #e3eaee;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2em;
  background: #21313c;
  font-family: Helvetica, Arial, sans-serif;
  color: #e3eaee;
}
footer,
article,
nav,
div {
  padding: 1.2em;
  background: #061621;
  font-family: Helvetica, Arial, sans-serif;
  color: #e3eaee;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
}
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle {
  grid-area: article;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
#mainNav {
  grid-area: nav;
}
#siteAds {
  grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body {
    grid-template-areas:
      'header'
      'article'
      'ads'
      'nav'
      'footer';
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
.mainPage {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  margin-right: 1rem;
}
.headerRight {
  grid-area: header;
  justify-self: right;
  padding: 1.2em;
  background: #21313c;
  font-family: Helvetica, Arial, sans-serif;
  color: #e3eaee;
}
.right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0.5em;
  background: #21313c;
  font-family: Helvetica, Arial, sans-serif;
  color: #e3eaee;
}

.left {
  background: #21313c;
  font-family: Helvetica, Arial, sans-serif;
  color: #e3eaee;
}

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<div id="mainArticle" class="innerArticle"><p>Item 1</p>&nbsp<p>Item 2</p><p>Item 1</p>&nbsp<p>Item 2</p><p>Item 3</p>&nbsp<p>Item 4</p><p>Item 5</p>&nbsp<p>Item 6</p><p>Item 7</p>&nbsp<p>Item 8</p><p>Item 9</p>&nbsp<p>Item 10</p><p>Item 11</p>&nbsp<p>Item 12</p><p>Item 13</p>&nbsp<p>Item 14</p><p>Item 15</p>
</div>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

Answer 1

Your #mainArticle is a both a grid item AND a flex container. To influence the content inside of an element, its container characteristic is the determining factor. We’re looking for a setting on flex containers for the #mainArticle here.

To align the items in a flex container towards the top, you want to set align-content on it:

#mainArticle {
  align-content: flex-start;
}