Foundation Flex 网格向左浮动单个元素，向右浮动多个元素答案

【问题标题】：Foundation Flex grid float single element to the left and multiple elements to the rightFoundation Flex 网格向左浮动单个元素，向右浮动多个元素
【发布时间】：2017-08-12 01:46:03
【问题描述】：

我有以下 HTML：

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

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

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

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

【问题讨论】：

我不确定如何使用基础，但仅使用 CSS。这个帮助？ codepen.io/anon/pen/ZeraEy
第一张图片是它最初的样子还是中间断点的样子？在大屏幕上，三个元素都排成一行（没有堆叠）？
@MichaelCoker 我还需要有可能将元素 A 放在堆栈的左侧和右侧。初始（小）断点显示在第二张图像上，而 medium+ 总是有一个元素位于其余元素旁边。

标签： css layout grid flexbox

【解决方案1】：

Foundation Float 网格无法做到这一点（可能其他弹性网格也没有）。它们根本不是为这种用途而设计的。大多数 FE 框架都提供了基于 Flex 和其他技术的其他网格，这可能会也可能不会给出实现它的方法。

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

一种可能的解决方案是使用带有浮动和源排序的自定义 CSS。唯一的问题是，如果“B”+“C”的高度小于“A”的高度，你必须知道/设置你的“A”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中找到默认断点的媒体查询。

【讨论】：