Как построить макет с помощью flexbox? (float: left | right)

Question

Мне нужно знать, как построить этот макет с помощью 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>

Мой текущий результат:

Цвета и (min | max) высота, которую я добавил для теста. На телефоне я хочу иметь список с divs: парковка, опции, контакт, оплата, доска объявлений.

Answer 1

#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>

Answer 2

Вы можете изменить структуру вашего 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 здесь .