Flexbox会改变包裹元素的宽度？

Question

从这个粗略的图中，黑色轮廓是flexbox元素，蓝色/红色是flexbox内部的两个嵌套元素：

我该如何使用flexbox达到这个结果？

Answer 1

那么，我们开始吧，让我们从标记开始吧

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

现在您需要为容器设置属性，我们首先将其设置为移动设备，所以我添加了flex-direction: column;

.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #000;
  height: 50vh;
}

然后设置div的高度

.div1{
  height: 100%;
  background-color: blue;
}

.div2{
  height: 100%;
  background-color: red;
}

最后，您需要对台式机进行媒体查询

@media only screen and (min-width: 768px){
  .container{
      flex-direction: row;
  }

  .div2{
    width: 20%;
    max-width: 500px;
  }

  .div1{
    width: 80%;
  }
}

Here，您有一个密码笔！让我知道是否有帮助！