0

I try to create a structure, entirely with flex, without work arounds like adding CSS property like absolute position to force the positioning of an element, or using JavaScript.

Here is what i try to achieve as below, for desktop and tablet views:

desktop/tablet view

and for mobile view:

mobile view

The result that i have for now is this in desktop view: issue

Here the issue comes from desktop view. There is a gap (grey space in the sketch) and i tried to use all the flex properties to put the div 2 on the bottom, but no result. In the code below, related to it, you can see that i commented a position absolute. It’s working great but i don’t want to use it as i want to achieve the goal only with flex and their native properties. In this case, positioning elements as in the sketch for mobile view is easy. The order property work nicely; Here is the related code :

// HTML :

<div class="main-container">
    <div class="elm-1">
        <p>elm-1</p>
    </div>  
    <div class="elm-2">
        <p>elm-2</p>
    </div>
    <div class="elm-3">
        <p>elm-3</p>
    </div> 
</div><!-- main container -->

// CSS :

* {
    box-sizing: border-box;  
}
.main-container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border: 2px solid tomato;
}
.main-container div:nth-of-type(1){
}
.main-container div:nth-of-type(2){
    /*position: absolute;
    bottom: 0;
    right: 0;*/ 
    min-height: 200px;
}
.elm-1 {
    width: 70%;
    min-height: 200px;
    border: 1px solid tomato;
}
.elm-2 {
    width: 30%;
    border: 1px solid tomato;
}
.elm-3 {
    width: 70%; 
    min-height: 150px;
    border: 1px solid tomato;
}
.elm-1, .elm-2, .elm-3 {
    padding: 10px;
    background-color: rgba(255, 0, 0, 0.3);
    border: 1px solid DarkSlateBlue;
}

/*---- MEDIA QUERIES -----*/
@media screen and (max-width: 500px){
    .elm-1 {
        order: 1;    
    }
    .elm-2 {
        order: 2;
    }
    .elm-3 {
        order: 3;
    }
    .elm-1, .elm-2, .elm-3 {
        width: 100%;
    }
}

/////

I tried another solution as you can see here. I finally achieved the desktop/tablet view, but the issue comes from mobile view. When the mobile view comes, impossible, just with flex, to order elements as i wish (putting elm-2 between 1 and 3). In this solution, elm-1 and 2 are wrapped in a parent container (it's what makes desktop view working nicely). It should be possible to delete the parent, preserving children and give them CSS classes with appropriate order but i don’t want to use JS fo it.

I tried to combine these two solutions but without results.

Any ideas?

itachi uchiha
  • 38
  • 7
  • You can't move item 1 and 2 from the wrapper w/o script. – Asons Feb 18 '18 at 18:44
  • And you. can't achieve that with Flexbox alone, unless you can set a fixed height on a wrapper that holds item 1,2,3 – Asons Feb 18 '18 at 18:48
  • @LGSon, thanks for metionning the link from a previous answer for this kind of issue. It seems that those kind of structure reach the limits of flex in term of layout. I will do a work around with JS script. And take a deeper look on the link above. And yes i will put my hand on the native grid property of CSS to achieve it simply. – itachi uchiha Feb 22 '18 at 09:14

0 Answers0