时间戳

首页 > 解决方案 > 尝试使用 Flexbox 实现一列拆分为行的多列布局

css - 尝试使用 Flexbox 实现一列拆分为行的多列布局

问题描述

我想请教一下如何使用 flexbox 实现这一点。

桌面视图
|------------------------------------------------- ----------------------|
| | |
| 1 | |
| | 2 |
|----------------------------------------| |
| | |
| 3 | |
| | |
|------------------------------------------------- ----------------------|

移动视图
|----------------------------------------|
| |
| 1 |
| |
|----------------------------------------|
| |
| 2 |
| |
|----------------------------------------|
| |
| 3 |
| |
|----------------------------------------|

到目前为止，我的尝试是这样的。

.header-container {
  display: flex;
  flex-wrap: wrap;
}

.header-title-container {
  border: 1px solid pink;
  width: 70%;
}

.header-media-container {
  border: 1px solid lavender;
  width: 30%
}

.header-summary-container {
  border: 1px solid purple;
  width: 70%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>

标签： cssflexbox

解决方案

如果您无法在行上设置高度，grid 可以在这里为您提供帮助。

您可以在 mediaquery 中创建自定义类，因为 bs4 尚不支持display:grid。

可能的测试示例：

/* update with custom class */
@media screen and (min-width: 768px) {
  .d-lg-grid {
    display: grid;
    grid-template-columns: 70% 1fr;
  }
  .header-media-container {
    grid-column: 2;
    grid-row: 1/3;
  }
}

/* your test css */
.header-title-container {
  border: 1px solid pink;
}

.header-media-container {
  border: 1px solid lavender;
}

.header-summary-container {
  border: 1px solid purple;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container  d-lg-grid">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>

推荐阅读