How do I divide blocks in my page with flexbox?

user_12496647 0
Viewed 58

I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.

Image of the website

How I want it to be

<style>
.parent {

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
  height: 100vh;
  border: 20px solid black;
  display: flex;
  flex-direction: column;
}

.header {
  width: 200px;
  height: 200px;
  background: cornflowerblue;
}

.side {
  width: 200px;
  height: 200px;
  background: rgb(219, 133, 133);
}

.content {
  width: 200px;
  height: 200px;
  background: rgb(115, 202, 180);
}

.text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 190px;
  color: #fff;
}
  </style>

   <div class="parent">
    <div class="header">
      <h2 class="text">Header</h2>
    </div>

    <div class="side">
      <h2 class="text">Side</h2>
    </div>
    
    <div class="content">
      <h2 class="text">Content</h2>
    </div>
  </div>

flexbox css html
3 Answers

You need to create two containers, one for all your elements and one for your header and content.

<div class="parent"> <!-- Container 1 -->

  <div class="side">
    <h2 class="text">Side</h2>
  </div>

  <div class="container"> <!-- Container 2 -->
    <div class="header">
      <h2 class="text">Header</h2>
    </div>
    <div class="content">
      <h2 class="text">Content</h2>
    </div>
  </div>

</div>

Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.

You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).

.parent {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  border: 20px solid black;
  display: flex;
  flex-direction: row;
}

.header {
  height: 30%;
  background: cornflowerblue;
}

.side {
  width: 30%;
  height: 100%;
  background: rgb(219, 133, 133);
}

.content {
  height: 70%;
  background: rgb(115, 202, 180);
}

.text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 190px;
  color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
}

JSFiddle

Images to illustrate the separation: enter image description here enter image description here

user_177185870

You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide

.parent {
  display: flex;
  height: 100vh;
  background: #000;
  padding: 5px;
  margin: 0;
  
}

.side {
  border: 1px solid #000;
  width: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin-right: 5px;
}

.main-body {
  border: 1px solid #000;
  width: 70vw;
}

.header,
.content {
   display: flex;
   justify-content: center;
   background: #fff;
}

.header {
  height: 25vh;
  margin-bottom: 5px;
}
.content {
  align-items:center;
  height: 70vh;

}
<div class="parent">
    <div class="side">
      <h2 class="text">Side</h2>
    </div>
    <div class="main-body">
      <div class="header">
        <h2 class="text">Header</h2>
      </div>
    
      <div class="content">
        <h2 class="text">Content</h2>
      </div>
    </div>
  </div>

user_32779130

I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.

<style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    .parent {
      height: 100vh;
      border: 20px solid black;
      display: flex;
      background: pink;
    }
    
    .main {
      display: flex;
      backgound-color: green;
      flex-direction: column;
      flex: 2
    }
    .header {
    
      background: cornflowerblue;
    }
    
    .side {
      flex: 1;
      background: rgb(219, 133, 133);
    }
    
    .content {
      background: rgb(115, 202, 180);
      flex: 1
    }
    
    .text {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 190px;
      color: #fff;
    }
      </style>
    
       <div class="parent">
         <div class="side">
          <h2 class="text">Side</h2>
        </div>
         <div class="main">
        <div class="header">
          <h2 class="text">Header</h2>
        </div>
        <div class="content">
          <h2 class="text">Content</h2>
        </div>
         </div>
      </div>
user_168784250
Related