Add a top bar to a three-column flexbox layout (Implementing the Flex-wrap)

Question

I have to build a 3-column Flex Layout here on the codepen

But I need to add a black color top bar like this:

I have added a code, which is commented in the codepen.

I have to write a CSS for this so that the black color top bar appears. Don't know how to do this. May be some wrap property will be used or some reverse property. Please guide me.

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>

Michael Benjamin · Accepted Answer · 2017-05-18T20:07:25.513

2

revised codepen

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>

Here's how the top bar is positioned:

.top is made 100% wide inside its container, .main, which is 70.5% wide in a larger container.
Because .main has flex-wrap: wrap, that forces the other two flex items, .secondary and .article to the next row.
The siblings are then sized to fit together on the second row.

edited May 18 '17 at 20:07

answered May 18 '17 at 19:59

Michael Benjamin

346,931
104
581
701

But why the gap has disappeared between the pink and the blue one. It looks like you have deleted the justify-content: space-between; property. – WordCent May 18 '17 at 20:01
1

I just wanted to show you the concept for the layout. Of course, you'll need to fine tune spaces, heights, widths, etc on your own. – Michael Benjamin May 18 '17 at 20:04
Sir, I still could not understand how that bar goes up? because I am doing this for learning. which property shifted it upward? – WordCent May 18 '17 at 20:04
what mistake I am doing that mine s not going upward, the black one → https://codepen.io/codeispoetry/pen/Pmyzro?editors=1100 – WordCent May 18 '17 at 20:06
1

Ah I see so basically it is this property → flex-wrap: wrap that forces in the next row → flex-wrap: wrap – WordCent May 18 '17 at 20:10
1

If you have `flex-wrap: wrap`, and an item takes 100% of the space, that forces other items to new lines. – Michael Benjamin May 18 '17 at 20:10
1

In your codepen above, you're just missing `flex-wrap: wrap` on `.main`. The default value is `nowrap`. – Michael Benjamin May 18 '17 at 20:12
This discussion is quite enlightening for me. I have one more question → I have used this property to create a gap between pink and blue. How can I create a gap between the black and the other two column? I mean we have successfully created a gap between two column. How can we emulate the same between two rows with some flex property like " justify-content: space-between;" not by margin or padding? Yes, fixed that flex-wrap: wrap issue. – WordCent May 18 '17 at 20:13
1

Set heights and use `align-content: space-between`: https://codepen.io/anon/pen/PmyGLp?editors=1100 – Michael Benjamin May 18 '17 at 20:19
Thanks, In the real world scenario such as a blog website. would this be real → .main > * { height: 47.5%;} – WordCent May 18 '17 at 20:22
1

Thank you so much sir. I have bookmarked this as this was enlightening. Please encourages us new comers by upvoting us only if you think this post deserved upvoting. – WordCent May 18 '17 at 20:30
1

Also, these two posts will help you better understand `flex-wrap`: [**here**](http://stackoverflow.com/q/42613359/3597276) and [**here**](http://stackoverflow.com/q/32551291/3597276) – Michael Benjamin May 18 '17 at 21:45
Yeah, I was able to search them in your top posts. You came as a blessing today. – WordCent May 18 '17 at 22:06

Add a top bar to a three-column flexbox layout (Implementing the Flex-wrap)

1 Answers1