javascript - 如何使用 javascript/jquery/css3 制作响应式 flex？

Question

我的 html 和 css 是这样的

.section {
  display: flex;
}
.section > .zone:first-child {
  flex: 1;
}

<div class="section">
  <div class="zone">
    [content]
  </div>
  <div class="zone">
    [content]
  </div>
</div>

这就是我想要的，它是两列，第一列的宽度最大化，第二列的宽度最小。但问题是，如果 [content] 部分中有固定宽度(或最小宽度)的元素。当窗口宽度足够小时，flex 会忽略它，只是将区域重叠在彼此之上。我想要这样，就在它们开始重叠之前(比如在窗口宽度 X)，它应该移除 flex，以便区域以最大宽度垂直堆叠。

但是如果窗口宽度再次扩大(超过窗口宽度 X)，那么它应该返回到 display:flex。

有谁知道如何使用 jquery 来实现这一点？

谢谢

Answer 1

我认为您正在尝试模仿响应能力而无需编写任何断点。因此，您可以创建两个变量来确定屏幕尺寸，而不是明确指定它们。

Fiddle Example for flex-wrap method.

.zones 通常堆叠，如果它们的总宽度 大于容器宽度。这是基本的环绕。 那个 sum-width 就是你的 X。当它大于容器宽度时，你的固定大小的元素开始重叠。

Add the outerWidth() of each .zone and assign any screen size below or equal to this as a small device.

xWidth = zone1 + zone2;
var smallDevice = windowWidth <= xWidth;

Flex 通常分配容器内的空间，因此如果包装，当有足够空间时元素不会堆叠。使用它，我们确定最宽的 .zone 和将其与 xWidth 组合以创建另一个断点条件。这在从小视口(viewport)缩小时很有用。因为按比例缩小，所以所有堆叠元素的宽度都是 100%。或多或少。

A size wider than the the largest .zone AND the xWidth could be a large device.

dynamicBreakpoint = Math.max(zone1, zone2); // determine the greater zone
var largeDevice = windowWidth > xWidth && windowWidth > dynamicBreakpoint;

然后，您可以根据窗口 resize() 事件将样式表附加到文档头部或从文档头部移除样式表。请记住检查样式表是否已添加。

stylesheet = "<style type='text/css' id='checkCSS'>" + styles + "</style>";

if (checkCSS === 0 && smallDevice) {
  $(stylesheet).appendTo('head');
} else if (checkCSS === 1 && largeDevice) {
  $('#checkCSS').remove();
}

如果处理两个以上的元素，您还可以使用数组或映射方法。只是想一想如何做到这一点。 肯定有更好的方法。