Align 3 elements using flexbox

Question

I have 3 div elements which I want to put in 2-columns. One of them I want to fill in the first column vertically and the others to fill the next column in 2 separate rows. (Run code snippet to see the sections)

.news-feed {
  display: flex;
  flex-flow: row wrap;
}
.image {
  flex-direction: column;
  height: 20px;
}
.title_date {
  flex-direction: column;
}
.job-description {
  flex-direction: column;
}

<section class="news-feed">
    <section class="image">
        <img src= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA'/>
    </section>
    <section class="title_date">
        <p class="date">27 Dec 1997</p>
        <h3 class="title">Urgent Job offer</h3>
    </section>
    <section class="job_description">
        <p class="job_info">This is a job for speacial people like you. Long text bla bla bla. The main issue is that I cannot put the 'title_date' and 'job_description' section in a single div because I want to put the 'title_date' at top of 'image' section when the device is mobile. Any workaround idea is highly appreciated. Thanks</p>
        <p class="tags">Jobs, HighPay, Carrer</p>
    </section>
</section>

The main issue is that I cannot put the 'title_date' and 'job_description' section in a single div because I want to put the 'title_date' at top of 'image' section when the device is mobile. Any workaround idea is highly appreciated. Thanks

Your requirement is not clear. Could you please explain what you want to achieve — Aravind S, Jul 30 '18 at 11:56
Fill up first column completely with the image and next column with 2 rows ('title_date' and 'job_description') . — Bijay Timilsina, Jul 30 '18 at 13:03

score 2 · Answer 1 · answered Jul 30 '18 at 14:09

This is easily achieved if you just use grid not flex in your css files. Then you won't need any JavaScript. Just change your CSS code like this:

    .news-feed {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 50% 50%;
        grid-template-areas: 
            "image title_date"
            "image job_description"
    }
    .image {
          grid-area: image;
    }
    .title_date {
          grid-area: title_date;
    }
    .job-description {
          grid-area: job_description;
    }
    @media screen and (max-width: 425px) {
        .news-feed {
            grid-template-columns: 100%;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
                "title_date"
                "image"
                "job_description"
        }
    }

This will position image on the left in desktop mode and in the middle on the mobile version. You can of course change the columns and rows height and width as you want.

Yeah it's not compatible with IE 10 or lower, but it is supported on all the new browsers. 87.7% of browsers in actual use support it. You can check the whole list here : https://caniuse.com/#feat=css-grid — BlazK, Jul 30 '18 at 21:21

score 0 · Answer 2 · answered Jul 30 '18 at 12:31

0

wrap "title_date" and "job_description" in one section and give them flex-direction: column; and inside that wrapper div give flex-direction: row; css to this two div "title_date" and "job_description"

answered Jul 30 '18 at 12:31

RRRGGG

114
6

That's the issue. I can't move them inside a single div because when in mobile, I want to put the "title_date" at the top, "image" in the middle and "job_description" in the bottom. – Bijay Timilsina Jul 30 '18 at 13:05
Ok but you have not clarified that in your question – RRRGGG Jul 30 '18 at 13:17
I think I have clearly written down this specific issue in the last paragraph of my question. – Bijay Timilsina Jul 30 '18 at 13:44

score 0 · Answer 3 · answered Jul 30 '18 at 13:08

0

I had to go javascript way to resolve this.

For this, I look into the "window.innerheight" property and according to it, I either wrap the "title_date" and "job_description" inside a new section (for normal display) or separate them and give them required flexbox ordering (for mobile display).

answered Jul 30 '18 at 13:08

Bijay Timilsina

757
2
10
25

Not elegant but was the only solution I found. – Bijay Timilsina Jul 30 '18 at 13:08

Align 3 elements using flexbox

3 Answers3