DEV Community

Eixi
Eixi

Posted on

[FIXED FOR NOW] Need help with flexbox

#css #help #beginners #webdev

I need help with flexbox. I need the flexbox "grid" to be in 2x2 squares. I have no idea how to make it that there are only 2 boxes per "row". All what I have been able to do is to have them all in a row or column.

Image of the idea that I have:
flexbox rough draft

In this image I have 2x2 grid of boxes that are responsive and the boxes have something inside. I have been able to center the elements inside the boxes.

I am also using grid on the website for the other layout but I feel like using flexbox for these type of elements is more convenient.

Thank you for reading and helping out!

Top comments (3)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Does that suit the use case?

.flexrow {
  display: flex;
  flex-flow: row wrap;
}
.element {
  flex: 0 1 50%;
  max-width: 50%;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="flexrow">
  <div class="element"> something 1</div>
  <div class="element"> something 2</div>
  <div class="element"> something 3</div>
  <div class="element"> something 4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Regards

Collapse
 
eixi profile image
Eixi •

thank you for the help! i just googled about this and found a codepen that has similar stuff u got. i got the stuff resolved for now. thank you for the help :D

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

😁 if you search Katana UI in codepen you may found a bunch of stuff I coded some time ago, plenty of flexbox things.
Also check my profile for posts around CSS with and without flex.

Cheers!

Read next

luqmanshaban profile image

Uploading Files with React (POST Request)

Luqman Shaban -

sariah profile image

Top 10 Most Useful Custom Hooks in React

Sariah -

djangotricks profile image

Generating Fake Django Model Instances with Factory Boy

Aidas Bendoraitis -

covenantwest profile image

Building a 3D Bakery Shop with Three.js: A Step-by-Step Guide

CovenantWest -