如何使用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 ），它應該除去柔韌性，以便區域以最大寬度垂直堆疊。

但是，如果窗口寬度應再次擴展（超過窗口寬度X ），則應返回到display：flex。

有誰知道我如何使用jQuery來實現這一目標？

謝謝

Answer 1

我認為您正在嘗試模仿響應能力，而不必編寫任何斷點。 因此，您可以創建兩個變量來確定屏幕尺寸，而不是顯式指定它們。

flex-wrap method小提琴示例。

如果.zones的總和寬度大於容器寬度 ，則通常會堆疊它們。 這是基本的包裝。 該總和寬度就是您的X。當其總和大於容器寬度時，固定大小的元素開始重疊。

添加每個.zone的outerWidth() ，並將小於或等於此大小的任何屏幕尺寸分配為小型設備。

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

Flex通常會在容器內部分配空間，因此如果將其包裝，則在有足夠空間時元素不會堆疊。 使用它，我們確定最寬的.zone並將其與xWidth組合以創建另一個斷點條件。 從較小的視口縮小時，這很有用。 Cos縮小，所有堆疊元素的寬度均為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();
}

如果使用兩個以上的元素，則也可以使用數組或map方法。 只是思考如何做到這一點。 肯定會有更好的方法。