如何使用 flex 创建布局？答案

【问题标题】：How to create a layout using flex?如何使用 flex 创建布局？
【发布时间】：2020-01-21 06:10:07
【问题描述】：

我正在尝试为我的一个网络项目创建以下布局。使用 HTML、CSS (Flex) 创建它的最佳方法是什么？

我正在为桌面屏幕中的 C 和 D 以及移动屏幕中的 D 的底边距而苦苦挣扎。

【问题讨论】：

向我们展示到目前为止你有什么代码。
“我正在为桌面屏幕中的 C 和 D 以及移动屏幕中的 D 的下边距而苦苦挣扎。” - 为元素指定通用 margin-bottom: 30px，覆盖在移动媒体查询:last-child，然后……完成了吗？
您应该提供minimal reproducible example，而不是图片。

【解决方案1】：

here your go..

.cs-t20 {
  width: 100%;
  height: 30px;
}

.continer {
  width: 100%;
  height: 100%;
}

.webpage-page-display {
  float: none;
  display: table-cell;
}

.webpage-page-column {
  z-index: 1;
  float: left;
  position: relative;
  min-height: 1px;
}

.webpage-page-half {
  margin-left: 6%;
  width: 47%;
}

.webpage-page-first {
  margin-left: 0px;
  clear: left;
}

.webpage-page-half {
  width: 100%;
}

.webpage-page-column {
  margin: 0;
  margin-bottom: 20px;
  width: 100%;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .webpage-page_column_table_cell {
    display: block;
  }
  .webpage-page-half {
    width: 100%;
  }
  .webpage-page-column {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }
}

<div id="webpage_section">
  <div class="container">

    <div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">

      <p>Write text here A</p>
    </div>
    <div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
      <p>Write text here B</p>
    </div>
    <div class="cs-t20"></div>
  </div>

</div>
<div id="webpage_section">
  <div class="container">

    <div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">

      <p>Write text here C</p>
    </div>
    <div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
      <p>Write text here D</p>
    </div>
    <div class="cs-t20"></div>
  </div>

</div>

【讨论】：

【解决方案2】：

你可以这样做。

.main_container {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
}

.sections {
  height: 200px;
  text-align: center;
  background-color: aqua;
}


/*here for mobiles inside mobile media query put this*/

.main_container {
  display: grid;
  grid-template-columns: auto;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
}

<div class="main_container">
  <div class="sections">A</div>
  <div class="sections">B</div>
  <div class="sections">C</div>
  <div class="sections">D</div>
</div>

【讨论】：

OP 需要使用 flexbox，而不是 grid :)

【解决方案3】：

由于我们没有您的代码，因此根据您的问题，我提供解决方案，如果您有任何问题，请告诉我..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
      <div class="col-md-6 mb-5">
         <div class="card p-5">
            A
         </div>
      </div>
      <div class="col-md-6 mb-5">
         <div class="card p-5">
            B
         </div>
      </div>
      <div class="col-md-6 mb-5">
         <div class="card p-5">
            C
         </div>
      </div>
      <div class="col-md-6 mb-5">
         <div class="card p-5">
            D
         </div>
      </div>
   </div>
</div>

【讨论】：

【解决方案4】：

<div class="row">
   <div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
      <p>Write text here A</p>
   </div>
   <div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
      <p>Write text here B</p>
   </div>
</div>
<div class="cs-t20">
   <!-- spacer -->
</div>
</div>  
<div class="row">
   <div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
      <p>Write text here C</p>
   </div>
   <div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
      <p>Write text here D</p>
   </div>
</div>
<div class="cs-t20">
   <!-- spacer -->
</div>
</div>  
<style>
   .cs-t20{
   width: 100%;
   height: 30px;
   }
</style>

希望对你有帮助！！万事如意！！

【讨论】：

所以你需要纯HTML、CSS？
我不需要，但我相信 OP 需要 :)