4
Wesley
18d

Hi all !

Is it possible to make a layout like this one with Flexbox with this html ? So, without adding div.
I'm trying but I'm stuck.
<section>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</section>

Comments
  • 10
    Yes but it would be better with grid.
  • 0
    @nitwhiz I need to do it with flexbox first. I succed with some div around some boxes with this pure HTML, Nope.
  • 0
    Try flex-wrap: wrap; and experiment with flex-direction. Though grid is more appropriate for this task
  • 1
    I believe with flexbox it will be a pure abomination.
  • 0
    Grid would be a better way to do it, I think you will have better luck in stackoverflow though.
  • 1
    Yep, I think you're right. Even with wrap and direction, there is a problem with two boxes. Thanks all
  • 1
    Hope you managed to sort out the challenge you're facing.
  • 0
    Flexbox for days.
  • 0
    devRant isn't SO.
  • 4
    Devrant should implement a code text style
  • 1
    @austudo that was asked before and official answer is "devrant won't have code highlighting"
  • 1
    If you treat it as two columns, each with flex-direction as column, it will be easier.

    As one single element:

    A or you add math to calculate the positions

    B use grid

    C cry a lot while doing this and use A
  • 0
  • 0
    @smb26 oh, that might work 🤔
  • 4
    @smb26 but... We put a flex inside a flex so you can flex while you flex
  • 0
    What of tables?!
  • 1
    @irene uh so flexy !
  • 0
    Cant use flex in flex approach because he cant add divs.
  • 0
    I still don't get why you can't use grid, this is like made for grid.
  • 0
    Any reason on why you can't use CSS grids for this task?
  • 2
    @irene weird flex but ok
Your Job Suck?
Get a Better Job
Add Comment