0

I'm playing around with flexbox to get the hang of it but I am running into some issues. My goal is to have the window separated by four background colors where the first is just a header row and then the rest of the page is filled by 3 columns each a different background color. But for some reason if I write display: flex it doesn't show anything. Can someone explain to me how to get this desired effect?

   .container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}
.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}
.col {
  flex: 1;
}
.col-container:nth-child(1) {
  background: green;
}
.col-container:nth-child(2) {
  background: blue;
}
.col-container:nth-child(3) {
  background: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</body>

  • don't forget to add the class names col-1, col-2 and col-3 to your markup – Bonnie Aug 13 at 14:38
  • There are a couple typos in your code. 1) You have no col-1, col-2 or col-3 in your HTML...you just have col. 2) I'm guessing you want flex-direction: row as you want the columns next to each other and not stacked – disinfor Aug 13 at 14:40
  • sorry i typed it wrong this is what I have, and yes you are right it should be row – Dezque Aug 13 at 14:40
1

Here is a working example:

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}

.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}

.col-1 {
  flex: 1 1 33.333%;
  background-color: green;
}

.col-2 {
  flex: 1 1 33.333%;
  background-color: blue;
}

.col-3 {
  flex: 1 1 33.333%;
  background-color: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col-1">ts</div>
      <div class="col-2">dtd</div>
      <div class="col-3">dt</div>
    </div>
  </div>
</body>

Here's what you needed to fix:

  1. Set flex-direction to row. You most likely want the columns next to each other.
  2. Add the classes to your HTML for the col-1, col-2 and col-3.
  3. You need content in those col classes, or you won't see anything anyway.

I set a flex-basis (the third parameter in the flex shorthand) to 33.333%. You don't necessarily need this, but it's nice to see how much space a particular element will fill or change it.

EDIT For the comments:

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}

.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 150px);
}

.col-1 {
  flex: 1 1 33.333%;
  background-color: green;
}

.col-2 {
  flex: 1 1 33.3333%;
  background-color: blue;
}

.col-3 {
  flex: 1 1 33.3333%;
  background-color: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col-1"></div>
      <div class="col-2"></div>
      <div class="col-3"></div>
    </div>
  </div>
</body>

Basically, you need to give the col-container a height. To achieve this, I used vh units in the calc statement. It subtracts your header height from the viewport height and gives the remainder. This also removes the necessity for filler content.

  • Thank you! But two questions, how do i get the colors to show without having any filler text, and how do I get the colors to take up the entirety of the remaining height in the browser? – Dezque Aug 13 at 14:47
  • I'll update with another solution. – disinfor Aug 13 at 14:52
  • Run the new code full screen to see it in action. – disinfor Aug 13 at 14:55
  • I was just able to achieve this by giving all the indivual columns a height of 100vh, but i assume your solution is a lot better...thank you so much really appreciate it! – Dezque Aug 13 at 14:57
  • Yeah, no need to give the columns the height, give it to the container and let flex-box do the work. Good luck! – disinfor Aug 13 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.