html flexbox 2个元素垂直和一个在左侧[重复]

Question

我完全迷失了用于 css3 的 flexbox，我似乎无法弄清楚如何让它正常工作:(。

我想要这样的布局：

|-----| |----|
------- |----|
|-----| |----|

（左边的|----|是2个div，右边是一个）

在移动设备上，我希望正确的 div 低于其他 2 个 div... 而且我似乎无法弄清楚。

它只是排列不正确，或者左边的 2 个 div 不会像右边的那么大。

我正在为此使用 bootstrap 4.0...所以也许是这样？

我目前在以下代码：

它周围有一个容器div

<div id="container">
  <div class="d-flex row">
    <div class="flex-row flex-fill">
      <div class="d-flex flex-column">
        <div class="card d-flex flex-fill">
          <div class="card-body">
            <form>
              <div class="form-group">
                <label>xxx</label>
                <input type="text" class="form-control date" id="birthdatepicker" data-toggle="daterangepicker" data-single-date-picker="true">
              </div>

              <button type="submit" class="btn btn-primary waves-effect waves-light">{{ __('Submit') }}</button>
            </form>
          </div>
        </div>
        <div class="card d-flex flex-fill mb-4 mb-md-0">
          <div class="card-body">
            <h4 class="card-title">{{ __('Progress') }}</h4>
            <div class="progress mb-2">
              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-row col-12 col-md-4 col-lg-2">
      <div class="d-flex flex-fill card mb-4 mb-md-0">
        <div class="card-body">
          <h5>xx</h5>
          <p>
            xx
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是我认为您希望实现的一个简单示例。

.flexbox{
  display: flex;
  flex-direction: row;
  width: 400px;
  height: 400px;
}
@media only screen and (max-width: 478px){
  .flexbox{
    flex-direction: column;
  }
}
.left{
  width: 50%;
  height: 100%;
}
.top-left{
  height: 50%;
  width: 100%;
  position: relative;
  background: red;
}
.bottom-left{
  height: 50%;
  width: 100%;
  position: relative;
  background: green;
}
.right{
  width:50%;
  height:100%;
}
.center-right{
  width: 100%;
  height: 100%;
  background: blue;
}

<div class="flexbox">
  <div class="left">
    <div class="top-left">
    
    </div>
    <div  class="bottom-left">
    
    </div>
  </div>
  <div class="right">
    <div class="center-right">
    
    </div>
  </div>
</div>