how do i make this using flex boxes

Question

i dont know how to add a picture so I just shared a google doc

https://docs.google.com/document/d/1Zp652LWtYEYp6rtOMvY1R7ox7aASHXB0Z_QV2CGIUgc/edit?usp=sharing

Answer 1

To create the layout shown in the Google Doc using Flexbox, you can follow these steps:

1. Create a container element for the entire layout, and set its display property to flex.
2. Inside the container, create two child elements, one for the header and one for the content.
3. Set the flex property of the content element to 1, so that it takes up all the remaining space in the container.
4. Inside the content element, create two child elements, one for the sidebar and one for the main content.
5. Set the flex property of the sidebar element to a fixed value, such as 200px, and set the flex property of the main content element to 1, so that it takes up all the remaining space.
6. Inside the main content element, create three child elements for the three sections, and set their flex properties as desired.
7. Use additional CSS styling to set the background colors, fonts, and other design elements as shown in the Google Doc.

Here's an example code snippet to get you started:

HTML:

<div class="container">

 <div class="header">

   <!-- header content goes here -->

 </div>

 <div class="content">

   <div class="sidebar">

     <!-- sidebar content goes here -->

   </div>

   <div class="main">

     <div class="section">

       <!-- section 1 content goes here -->

     </div>

     <div class="section">

       <!-- section 2 content goes here -->

     </div>

     <div class="section">

       <!-- section 3 content goes here -->

     </div>

   </div>

 </div>

</div>

CSS:

.container {

 display: flex;

 flex-direction: column;

 height: 100vh;

}

.header {

 height: 60px;

 background-color: #333;

 color: #fff;

 display: flex;

 align-items: center;

 padding: 0 20px;

}

.content {

 display: flex;

 flex: 1;

}

.sidebar {

 width: 200px;

 background-color: #ccc;

 padding: 20px;

}

.main {

 flex: 1;

 display: flex;

 flex-direction: column;

 padding: 20px;

}

.section {

 flex: 1;

 background-color: #fff;

 border: 1px solid #ccc;

 margin-bottom: 20px;

 padding: 20px;

}

Note: This is just a basic example, and you may need to adjust the CSS properties to fit your specific design requirements.

Answer 2

Hey, my name is Win Aung, you can call me Win. I got the answer to your question and I'd be really happy to help. Before we begin, make sure to link your css tag to your header. I'll do this as an absolute beginner because I was once in your shoes not too long ago.

1. Create five div tags.
2. Make sure each tag has an Id or class name. The reason you do that is it's helpful when it comes to styling with CSS.
3. Give each block its background color in the CSS stylesheet. Just like the google doc you showed.
4. Go back to your HTML page and add another div, with the id or class name of 'container,' above the content div, and close the div tag below the sidebar div.
5. In your CSS stylesheet give the hero tag with the width of 700px, or whatever you prefer. also add margin-left: auto; margin-right: auto to center your element. Adjust the width, the height to make sure it is what you wanted.
6. In step 4, you create a div with an id or class name of the container. Now in the style sheet add display: flex. also add justify-center: center; to center your elements.
7. Now congratulations.