Question

所以我有一个简单的flexbox布局，由一个包含两个子元素的父元素组成。第一个子元素（.child1）代表我的菜单，它位于左侧，占据了我的视口大约0.125并跨越父元素的整个高度。第二个子元素（.child2）表示我的内容，它占用页面宽度的剩余部分。

我已经设置了当视口缩小到某一点时.child2命中它的弹性基础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>

Answer 1

非常简单..

将弹性基础从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}
}

这将交换东西，但保持相似的比例..

当然，如果您决定要在移动设备中使用更大或更小的导航。

您可以将以下内容添加到媒体查询中。

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

如何让我的Flex框导航为移动设备调整较小的高度

1 个答案: