我当前的布局如下图所示:
包含两个div
的父级div
,flex-box
设置为flex-direction: column;
。左边的一个设置为flex-basis: initial;
,右边的一个设置为flex: 1;
。
[我想知道是否可以使用div
编辑右边的flex-box
的子元素,以便当您扩大浏览器窗口时,底部的子元素的高度会增加,而其他的元素会缩小,如下图所示:] >
到目前为止,我尝试使用
#pick_top { margin: 10px 10px 5px; flex: 0 1 270px; width: 100%; } #pick_bottom { margin: 5px 10px 10px; flex: 1 0 270px; width: 100%; }
但是这没用,我想是因为
shrink
是在div
缩小的高度而不是宽度上工作?这是我需要媒体查询的东西吗?
下面的代码:
.play_area { display: flex; justify-content: space-between; flex: 3; min-height: 540px; } .play_section { display: flex; flex-direction: column; justify-content: space-between; width: 215px; flex: initial; } .play_choice { display: flex; justify-content: center; align-items: center; height: 160px; margin: 10px 0; } .choice_button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 170px; width: 200px; border-radius: 15px; } .choice_image { display: flex; justify-content: center; height: 110px; } .pick_section { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 0 215px; } #pick_top { margin: 10px 10px 5px; flex: 0 1 270px; width: 100%; } #pick_bottom { margin: 5px 10px 10px; flex: 1 0 270px; width: 100%; } #my_play_image { flex: 1; }
<div class="play_area"> <div class="play_section"> <div class="play_choice"> <div class="choice_button" id="button_a"> <div class="choice_image"> <img id="img_a" src=""> </div> <p>X</p> </div> </div> <div class="play_choice"> <div class="choice_button" id="button_b"> <div class="choice_image"> <img id="img_b" src=""> </div> <p>X</p> </div> </div> <div class="play_choice"> <div class="choice_button" id="button_c"> <div class="choice_image"> <img id="img_c" src=""> </div> <p>X</p> </div> </div> </div> <div class="pick_section"> <div class="pick" id="pick_top"> <p class="pick">Your<br>pick</p> </div> <div class="pick" id="pick_bottom"> <div id="my_play_image"> <img src=""> </div> </div> </div> </div>
我当前的布局如下图所示:父div包含两个div弹性框,它们的弹性框设置为flex-direction:column;。左边的设置为flex-basis:初始;右边的设置为...
结果
因此,如果我的理解是正确的,您希望根据视口宽度来更改右上div的高度,并希望右下div进行相应的调整。假设您将right-top-div和right-bottom-div包裹在right-div-wrapper中(给了flex:1)。您可以做的是: