Question 206236 in Html Question posted in
Some basic documentation can be found here.

Html – css flex feature and flexbox

If I have a container div and inside it there are 3 div’s, I want to make div1 and div2 next each other and div3 below with the flex feature.

It is always divided into three parts, regardless of width or height.

<div id="container">
  <div id="div1">This is Div 1</div>
  <div id="div2">This is Div 2</div>
  <div id="div3">This is Div 3</div>
</div>

As you can see above.

Tags:

2

Answers


  1. 0

    Have you tried the CSS grid layout?

    *, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; }

#container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  flex: 1;
}

#div1 { background: cyan; }
#div2 { background: yellow; }
#div3 { background: magenta; grid-column: span 2; }
    <div id="container">
  <div id="div1">This is Div 1</div>
  <div id="div2">This is Div 2</div>
  <div id="div3">This is Div 3</div>
</div>
    Login or Signup to reply.
  2. 0

    Using flex you can add flex property to your container with flex-wrap so your div can goes to the new line.

    * {
  box-sizing: border-box;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#container>div {
  border: 1px solid #000;
}

#div1,
#div2 {
  flex: 0 1 50%;
}

#div3 {
  flex-grow: 1;
}
    <div id="container">
  <div id="div1">This is Div 1</div>
  <div id="div2">This is Div 2</div>
  <div id="div3">This is Div 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search