html中的网格仅使用flexbox

Question

我在创建模拟中显示的网格时遇到问题。仅使用 Flexbox 如何做到这一点？

Answer 1

你可以使用这个，或者我建议你使用网格模板功能

.main-container {
  width: 100%;
  height: 100%;
  display: flexbox;
}

.centered-div {
  background-color: #191919;
  height: 50vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-section {
  display: inline-flex
  width: 100%
  height: 50vh;
}

.small-left {
  background-color: #191fff;
  height: 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
}

.small-right {
  background-color: #191fff;
  height: 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px
}

<div class="main-container">

  <div class="centered-div">
    <h1>Centered Div</h1>
  </div>
  
  <section class="bottom-section">
    <div class="small-left">
      <h1>Small Right</h1>
    </div>

    <div class="small-right">
      <h1>Small Right</h1>
    </div>
  </section>

</div>