How do I divide blocks in my page with flexbox?-CodePudding

Hi all,

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. Hope someone can help me out! I've been trying to use flex-grow and flex-direction:row but I'm having a headache.

CodePudding user response：

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 >
    <div >
      <h2 >Side</h2>
    </div>
    <div >
      <div >
        <h2 >Header</h2>
      </div>
    
      <div >
        <h2 >Content</h2>
      </div>
    </div>
  </div>

CodePudding user response：

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 >
         <div >
          <h2 >Side</h2>
        </div>
         <div >
        <div >
          <h2 >Header</h2>
        </div>
        <div >
          <h2 >Content</h2>
        </div>
         </div>
      </div>