Flexbox：具有列换行的可变/动态高度项目

Question

我正在努力创建一个针对移动设备和桌面设备不同的动态布局。这些项目应该根据屏幕宽度进行不同的排序，并且布局应该改变。

以下是主要目标，左侧布局用于移动设备，右侧布局用于桌面：

蓝色、紫色和黄色 div 的内容可以变化，因此高度可以调整。紫色和黄色块必须始终位于桌面上灰色+蓝色块的一侧。

现在我只为 3 列工作，但“动态”高度在所有列上重复：Bootstrap 4: sidebar between columns on mobile. Columns under each other layout

为了让您清楚地了解这里的可能性，这里有一些桌面变体：

我已经设法让它与浮动一起使用，但列彼此对齐。还为父级修复了静态最大高度并使用列换行，但我不想使用静态最大高度，因为内容应该具有动态高度..

我不想使用一些有问题的 javascript 或不受支持的 grid-css。

期待想法/建议！干杯。

Answer 1

您应该能够让此布局与“桌面”上的 CSS 列（不是 CSS 网格）和“移动”上的 flexbox 组合使用。

<div class="container">
    <div class="d-flex d-md-columns flex-column min-vh-100">
        <div class="d-md-inline-block light order-0">
            light
        </div>
        <div class="d-md-inline-block blue order-2">
            blue
        </div>
        <div class="d-md-inline-block purple order-1">
            purple
        </div>
        <div class="d-md-inline-block yellow order-3">
            yellow
        </div>
    </div>
</div>

您需要的唯一额外 CSS 是针对较大 (md) 桌面宽度上的列的媒体查询。 flexbox 排序将在移动设备上启动..

@media (min-width: 768px) {
    .d-md-columns {
        display: inline-block !important;
        column-count: 2;
        -webkit-column-gap: 0
        -moz-column-gap: 0;
        column-gap: 0;
    }
}

https://codeply.com/go/QWIlredUTk

这特别适用于这 4 列布局。但是，一般来说，flexbox 列并不像“砌体”布局那样垂直组合在一起：Is it possible for flex items to align tightly to the items above them?

Answer 2

我认为没有纯 CSS 解决方案（至少不使用 CSS-grid 或 display:contents）。我认为的每一种 CSS 方式都有错误：float & column flexbox simple 在这种特殊情况下不起作用。

如果我们使用没有固定高度的内容并且浮动无法创建“masonry”布局，则列 flexbox 无法正确包装项目。 Bootstrap card-columns 也不是解决方案，因为您的主要目标是在高度上对齐左右列。

我知道，您不想要 glitchy javascript，但我认为有必要创建您的布局。因此，我在不使用任何 d-none 类的情况下向您发布我的解决方案（一个 jquery 解决方案）来防止重复的 HTML 和 SEO 问题。

此外，您正在使用 Bootstrap 并且该框架广泛使用 jQuery，所以我认为向 jQuery 寻求一点帮助不是问题。这个帮助：

  function move(){
    if($(".main .col-lg-8").css('display')=='block'){
      $('.purple').insertAfter('.gray');
    } else {
      $('.purple').insertBefore('.yellow'); 
    }
  }

  $(window).resize(function(){move()})
  $(document).ready(function(){move()})

当.col-lg-8 有display:block 时，将我们的紫色 div 移动到第二个位置

这是所有的代码：

function move(){
  if($(".main .col-lg-8").css('display')=='block'){
    $('.purple').insertAfter('.gray');
  } else {
    $('.purple').insertBefore('.yellow'); 
  }
}

$(window).resize(function(){move()})
$(document).ready(function(){move()})

.gray{
  background-color: gray;
}

.blue{
  background-color: blue;
}

.purple{
  background-color: purple;
}

.yellow{
  background-color: yellow;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="container mt-5">
  <div class="row main">
      <div class="col-lg-4 d-lg-flex flex-lg-column">
        <div class="gray mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales finibus faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem.</div> 
        <div class="blue flex-fill mb-4 mb-lg-0">
        Lorem ipsum dolor sit amet, consectetur.Quisque sodales finibus </div>
      </div>
      <div class="col-lg-8 d-lg-flex flex-lg-column">
        <div class="purple mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem. </div>
        <div class="yellow flex-fill">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
  </div>
</div>

等待一个纯 CSS 解决方案，这可能是一种方法。