How can I achieve this illustration using flexbox?

[philip9]

I am trying to align my divs to look like this picture:

https://ibb.co/g5NjRc

I was able to create the first three without flexbox, but I need to make it responsive for later, so I would really like to know what is the best way to do it using flexbox

here is my pen:

https://codepen.io/phi9/pen/geQooj

[Beverleyh]

I was able to create the first three without flexbox, but I need to make it responsive for later

You don’t have to use flexbox to make a responsive website. You can change a layout/display at any breakpoint (see “media queries”), whether you’re using floats, grid, flexbox, css tables, or whatever.

I would really like to know what is the best way to do it using flexbox

Try creating a version of your layout using flexbox yourself, and then if you experience any problems along the way, we can offer suggestions based on your own code. You might not be aware but your post kinda looks like a veiled “code it for me” request, which we aren’t here to do.

If you’re unsure where to start, try Googling “example flexbox layouts” for some great tutorials and ready-made code suggestions. And there’s always the flexbox guide on CSS Tricks to help you out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tip: You’ll probably want to nest the first 3 boxes in an additional flex parent.

[Mamun]

See if this one helps.

https://codepen.io/kh-mamun/pen/zWbemK

[Author]

Posts