0

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>
LegoCreeper12345
  • 1
  • 3
  • Possible duplicate of [How to arrange three flex div side by side](https://stackoverflow.com/questions/31476024/how-to-arrange-three-flex-div-side-by-side) – hcs Jul 20 '18 at 15:48
  • can u share a expected result mockup or image, so that we can under stand what u are expecting – Girisha C Jul 20 '18 at 16:03
  • Nope not a duplicate, the one you linked to has a title that would suggests that it would be the answer, but the content in it doesn't really answer my question. Thanks though @Hector – LegoCreeper12345 Jul 20 '18 at 16:06
  • Here [link](https://pasteboard.co/HvlVgxX.jpg) is the link to the source image @Girish. I quite literaly am looking for a 3x3 grid but with flexbox so I can make the boxes any size. Im basically looking for a float left for each container but Im unexperienced with flexbox so idk how to do it. The circles around the three boxes are meant to represent each container. – LegoCreeper12345 Jul 20 '18 at 16:15

1 Answers1

1

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>
Kavian Rabbani
  • 934
  • 5
  • 15