html - 使用 Flexbox 对齐 3 个元素

Question

我有 3 个 div 元素，我想将它们放入 2 列中。其中一个我想垂直填充第一列，其他的则填充 2 中的下一列 单独的行。 (运行代码片段以查看各部分)

.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>

主要问题是我无法将“title_date”和“job_description”部分放在单个 div 中，因为我想在设备移动时将“title_date”放在“image”部分的顶部。任何解决方法的想法都受到高度赞赏。谢谢

Answer 1

如果您在 css 文件中仅使用 grid 而不是 flex，那么这很容易实现。那么你就不需要任何 JavaScript 了。只需像这样更改 CSS 代码:

    .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"
        }
    } 

这会将桌面模式中的图像放置在左侧，而在移动版本中将图像放置在中间。您当然可以根据需要更改列和行的高度和宽度。