如何使用 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 通常堆叠，如果它们的总和宽度大于容器宽度。这是基本的 Wrap。 总和宽度就是你的 X。当它大于容器宽度时，你的固定尺寸元素开始重叠。

添加每个.zone 的outerWidth() 并将任何小于或等于此的屏幕尺寸指定为小型设备。

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

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

比最大的.zone 更宽的尺寸并且xWidth 可能是一个大型设备。

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();
}

如果使用两个以上的元素，您还可以使用数组或映射方法。只是一个关于如何完成的想法。 肯定会有更好的方法。