我如何讓我的Flex盒導航調整到一個較小的高度移動

-1

所以我有一個簡單的flexbox佈局，由包含兩個子元素的父元素組成。第一個子元素（.child1）表示我的菜單，它位於左側，佔用了我的視口的大約0.125，並跨越父元素的整個高度。第二個子元素（.child2）表示我的內容，它佔用了頁面寬度的其餘部分。我如何讓我的Flex盒導航調整到一個較小的高度移動

我將它設置爲當視口縮小到一點時.child2命中它的flex-basis爲400px，它在下面包裝並且頁面佈局變爲僞裝「列」樣式佈局。當.child2包裝時，我希望.child1的高度縮小到50px或更適合移動導航的高度。但是，在我的代碼中，當視口縮小到移動大小時，兩個子元素都佔用相等的高度。

當元素包裝時，我如何縮小.child1的高度，但當元素沒有包裝時，它的高度是多少？

*如果可以做到這一點沒有媒體查詢，這將是理想的。

.parentContainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: LightCoral; 
 
    padding: 20px; 
 
    height: 100vh; 
 
    max-width: 100vw; 
 
    align-content: stretch; 
 
    align-items: stretch; 
 
    justify-content: flex-start; 
 
} 
 

 
.child1 { 
 
    background-color: DarkTurquoise; 
 
    flex: 2 2 100px; 
 
} 
 

 
.child2 { 
 
    background-color: DodgerBlue; 
 
    flex: 20 1 400px; 
 
}

<div class="parentContainer"> 
 
    <div class="childContainer child1"> 
 
    </div> 
 
    <div class="childContainer child2"> 
 
    </div>  
 
</div>

來源

2017-06-05 CALEBUNGA

JavaScript的解決方案將是檢測是否子元素改變大小，但是這是一個有點過時，花一些時間來學習CSS媒體查詢，https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries –

我敢肯定你將不得不使用媒體查詢當你作爲一個屬性擊中斷點或者兩個人需要改變他們的價值。你爲什麼反對媒體查詢？ – hungerstar

@hungerstar我不反對他們，我只是好奇，如果沒有他們可以完成。這似乎是可能的，我只是想盡量減少我的代碼。謝謝您的幫助！ – CALEBUNGA

它很簡單..

變化從PX柔性依據％

如：

.child1 { 
background-color: DarkTurquoise; 
flex: 2 2 25%; 
} 

.child2 { 
background-color: DodgerBlue; 
flex: 20 1 75%; 
}

然後在這個簡單的添加媒體查詢..

@media (max-width:768px) { 
.parentContainer{ flex-direction: column} 
}

這會掉東西輪，但保持類似的比例..

如果，當然你決定要在移動更大或更小的NAV。

您可以添加以下到媒體查詢..

@media (max-width:768px) { 
.child1{ 
flex-basis: 50% 
} 
.child2{ 
flex-basis: 50% 
} 
}

來源

2017-06-05 23:26:42 johnashu

我如何讓我的Flex盒導航調整到一個較小的高度移動

回答

相關問題