基础Flex网格向左浮动单个元素，向右移动多个元素

Question

我有以下HTML：

<div>
    <div class="elemA"></div>
    <div class="elemB"></div>
    <div class="elemC"></div>
</div>

我想在中断点上实现以下结果：

有没有办法定位这样的元素，而不将B和C包装到额外的父容器中？ 这样的解决方案不是一个选项，因为元素A应该位于B和C之间的小断点上：

通过添加浮动左侧和浮动右侧样式，可以通过常规基础网格轻松实现，但是它会停止使用弹性网格...

Answer 1

Foundation Float （网格浮动）无法执行此操作（可能也没有其他flex网格可以执行此操作）。它们根本不是设计用于这种用途的。大多数FE框架都提供了基于Flex和其他技术的其他网格，这些网格可能会也可能不会。

但是，一旦您的项目使用了Flex网格，就没有什么帮助了。

一个可能的解决方案是将自定义CSS与浮点数和源顺序一起使用。唯一的问题是，如果“ B” +“ C”的高度小于“ A”的高度，则您必须知道/设置“ A” div的高度，因为外部的div只会增长适合“ B”和“ C”，并可能导致“ A”溢出外部div之后的其他元素。

/* Core of layout */

.wrapper {
  position: relative;
}

@media screen and (min-width: 40em) {
  .elemB {
    width: 50%;
    float: right;
  }

  .elemA {
    top: 0;
    position: absolute;
    width: 50%;
    clear: both;
  }

  .elemC {
    width: 50%;
    float: right;
    clear: both;
  }
}

/* If the height of B + C is less than height of A, unfortunatelly we need to know the height of A */

.elemA {
  height: 120px; /* must be known */
}

.wrapper {
  min-height: 120px; /* this must be set to the same as the height of A :( */
}


/* Nothing important below this line, only appearance for the example */

.wrapper {
  background-color: #bbb;
}

.wrapper div {
  color: white;
  text-align: center;
}

.elemB {
  background-color: #3a598e;
  height: 20px; /* simulate some content */
}

.elemA {
  background-color: #618745;
}

.elemC {
  background-color: #515658;
  height: 80px; /* simulate some content */
}

<div class="wrapper">
    <div class="elemB">B</div>
    <div class="elemA">A</div>
    <div class="elemC">C</div>
</div>

无论您使用什么网格，它都可以工作。

实际上，如果您想使用完全由网格定义的断点并不理想，但是实际上，如果您从Foundation来源编译CSS文件，则可以在Sass中使用media query mixins

另一方面，如果您使用预编译的Foundation CSS，则断点是固定的，您可以在自定义CSS上简单地使用它们。例如，要仅在上面的小列和两列上使用1 col布局，请使用上面的示例中的@media screen and (min-width: 40em)。您可以在the last part of this chapter中找到默认断点的媒体查询。