How to display this setup in flex or grid?

Question

I'm trying with 4 div to get this result in flex. I have my container in display: flex; how to get this result ?

        <div class="pictures">
            <div class="big"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="bottom"></div>
        </div>

Give it a go! The downvotes are for lack of code provided in your question. — BugsArePeopleToo, Jun 18 '19 at 21:30
Welcome to StackOverflow, what have you tried so far? This is a pretty straightforward task and there are several examples on the web. — Hazel へいぜる, Jun 18 '19 at 21:31

TJ_ · Accepted Answer · 2019-06-18T21:40:44.210

0

<div style="display: flex; flex-direction: row;">
    <girl/>
    <div style="display: flex; flex-direction: column;">
        <div style="display: flex; flex-direction: row;">
            <horizontal lines image/>
            <vertical lines image/>
        </div>
        <sweet escape image/>
    </div>
</div>

The concept you are missing is the "flex-direction" one. It tells the flex box to layout the children either in a row or column. You just need to use that, and nest them!

edited Jun 18 '19 at 21:40

answered Jun 18 '19 at 21:32

TJ_

328
2
13

Fantastic TJ, it works! – Artik Jun 18 '19 at 21:44

How to display this setup in flex or grid?

1 Answers1