您可以创建一个伸缩框,而另一个伸缩框可以伸缩吗?

问题描述 投票:-1回答:2

我当前的布局如下图所示:

current layout

包含两个div的父级divflex-box设置为flex-direction: column;。左边的一个设置为flex-basis: initial;,右边的一个设置为flex: 1;

[我想知道是否可以使用div编辑右边的flex-box的子元素,以便当您扩大浏览器窗口时,底部的子元素的高度会增加,而其他的元素会缩小,如下图所示:] >

layout on expanded browser

到目前为止,我尝试使用

#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:初始;右边的设置为...

html css flexbox
2个回答
1
投票

结果


1
投票

因此,如果我的理解是正确的,您希望根据视口宽度来更改右上div的高度,并希望右下div进行相应的调整。假设您将right-top-div和right-bottom-div包裹在right-div-wrapper中(给了flex:1)。您可以做的是:

© www.soinside.com 2019 - 2024. All rights reserved.