CODEWITHSUNDEEP
htmlcss
LegoCreeper12345
LegoCreeper12345

Reputation: 1

Putting FlexBoxed Divs next to eachother

I've had the problem with just floating elements next to each other because if one element is bigger than it creates a huge space and is very counterintuitive for the website I'm making because new content will be added frequently.

I did some research and found that I should use flexbox to align the items on top of each other, so no matter how big the element is it will never do what the floated elements do. It worked great at first, but then I ran into the issue of not being able to put these elements next to each other. I'm basically looking for a way to float these divs next to each other but have the flexbox commands that I've implemented still work. If I use display: Inline, it looks like it has worked, but the divs go horizontal instead of vertical. I will show you example code below:

  .container {
  width: 80%;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  width: 29%;
  border: 10px solid #edb809;
  float: left;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>

Upvotes: 0

Views: 82

Answers (1)

Kavian Rabbani
Kavian Rabbani

Reputation: 984

I realized you want to from containers alongside each other horizontally so I think you need something like this:

.wrapper {
  display: flex;
}

.container {
  flex: 1;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  border: 10px solid #edb809;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;
}
<div class="wrapper">
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions