CODEWITHSUNDEEP
htmlcssflexboxalignment
panthro
panthro

Reputation: 24099

Have a flexbox next to another flexbox?

I have two flex boxes with child elements. I wish each of these flex boxes to take up 50% of the page.

<div class="flexbox">
    ....
</div>
<div class="flexbox">
    ....
</div>

I have tried:

.flexbox{
    display:flex;
    width: 50%;
    ....

I have also thought about wrapping both divs in a container, and displaying flex on the container with a basis of 50%. I was just wondering if there was a way to do it without a container?

Upvotes: 3

Views: 752

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122095

To get this result you need to:

  1. Use display: inline-flex on .flexbox elements
  2. Remove white-space from HTML
  3. Use box-sizing: border-box for paddings and borders

* {
  box-sizing: border-box;
}
body,
html {
  padding: 0;
  margin: 0;
}
.flexbox {
  border: 1px solid black;
  display: inline-flex;
  width: 50%;
}
<div class="flexbox">
    ....
</div><div class="flexbox">
    ....
</div>

Upvotes: 3

Related Questions