如何使用 flexbox 构建布局？（浮动：左|右）答案

【问题标题】：How to build layout with flexbox? (float: left|right)如何使用 flexbox 构建布局？（浮动：左|右）
【发布时间】：2020-07-02 14:50:00
【问题描述】：

我需要知道如何用 flex 构建这个布局。

我的 vue 组件：

<template functional>
  <div class="dashboard-wrapper">
    <div id="your-parking">Parking</div>
    <div id="options">
      <div id="parking-menu">Options</div>
      <div id="parking-contact"> Call to ...</div>
      <div id="payment">Payment</div>
    </div>
    <div id="noticeboard">Noticeboard</div>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 100%;
}

#your-parking{
  background-color: cornflowerblue;
  order: 1;
  width:50%;
  min-height: 50%;
}

#options {
  order: 2;
  min-width:50%;
}

#parking-menu{
  max-height: 10vh;
}

#parking-contact{
  min-width:50%;
}

#payment{
  order: 4;
  min-width:50%;
  height: 60vh;
  background-color: red;
}

#noticeboard{
  order: 5;
  width:50%;
  background-color: goldenrod;
  min-height: 50%;
}
</style>

我目前的结果：

我为测试添加的颜色和（最小|最大）高度。在电话上，我想列出带有 div 的列表：停车、选项、联系方式、付款、布告栏。

【问题讨论】：

标签： html css vue.js sass

【解决方案1】：

您可以更改 html 模板的结构并应用 CSS，如下所示：

.dashboard-container {
  height: 15vh;
  border-bottom: 1px solid gray;
}

.content-container {
  display: flex;
  height: 85vh;
  box-sizing: border-box;
}

.left-content, .right-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.parking, .noticeboard {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  border: 1px solid black;
}

.options, .contact {
  flex: 1;
  border: 1px solid black;
}

.payment {
  flex: 4;
  width: 90%;
  margin: auto;
  border: 1px solid black;
}

.parking, .noticeboard, .options, .contact, .payment {
  margin-bottom: 5vh;
}

<div class="container">
   <div class="dashboard-container">
      <p>
         DASHBOARD
      </p>
   </div>
   <div class="content-container">
      <div class="left-content">
         <div class="parking">
            <p>
               PARKING
            </p>
         </div>
         <div class="noticeboard">
            <p>
               NOTICEBOARD
            </p>
         </div>
      </div>
      <div class="right-content">
         <div class="options">
            <p>
               OPTIONS
            </p>
         </div>
         <div class="contact">
            <p>
               CONTACT
            </p>
         </div>
         <div class="payment">
            <p>
               PAYMENT
            </p>
         </div>
      </div>
   </div>
</div>

您可以查看 JSFiddle here。

【讨论】：

【解决方案2】：

#dashboard{
   width:80%;
   margin:0 auto;
   border:solid 1px grey;
   height:10vh;
   }
   
   #container{
   display:flex;
   width:80%;
   height:90vh;
   border:solid 1px grey;
   margin:0 auto;
   }
   
   #left,#right{
   display:flex;
   width:50%;
   height:90vh;
   border:solid 1px red;
   flex-direction:column;
   justify-content:flex-start;
   align-items:center;
   
   }
   
   #parking,#noteboard{
   width:100%;
   height:35vh;
   border:solid 1px green;
   margin-bottom:2vh;
   
   }
   
   #options,#contact{
   width:100%;
   height:10vh;
   border:solid 1px blue;
   margin-bottom:2vh;
   }
   
   #payment{
      width:80%;
      height:46vh;
      border:solid 1px pink;
      
      }

<div id='dashboard'>Dashboard</div>
<div id='container'>
   <div id='left'>
      <div id='parking'>parking
      </div>
      <div id='noteboard'>noteboard
      </div>      
   </div>
   <div id='right'>
      <div id='options'>options
      </div>
      <div id='contact'>contact
      </div>
      <div id='payment'>payment
      </div>
   </div>




</div>

【讨论】：