如何使用javascript/jquery/css3製作響應式flex？

我的HTML和CSS這個樣子的如何使用javascript/jquery/css3製作響應式flex？

.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），那麼它應該返回到顯示：flex。

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

感謝

來源

2016-09-06 omega

僅僅使用CSS，你應該可以通過[flex-wrap]（https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap）和媒體查詢來實現。 – AA2992

但flex如何檢測固定寬度的元素？ – omega

如果在'section'上應用'flex-wrap：wrap'，並且媒體查詢在設備寬度達到'x'寬度時在'zone'上應用'flex-grow：1'。 flex-wrap將它堆疊起來，flex-grow填充容器的空間 – AA2992

我想你想模仿響應，而無需編寫任何斷點。因此，您可以創建兩個變量來確定屏幕大小，而不是顯式指定它們。

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

如果使用兩個以上的元素，您也可以使用數組或映射方法。只是想一想如何做到這一點。有可能肯定是一個更好的方法。

來源

2016-09-06 23:18:00 AA2992

在我的情況下，它不是固定的560，它的動態值必須手動計算。 – omega

如何使用javascript/jquery/css3製作響應式flex？

回答

相關問題