How to build layout with flexbox? (float: left|right) - html

Question

I need to know how to build this layout with flex.
My vue component:
<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>
My current result:
Colors and (min|max) height I added for test.
On the phone I want to have list with divs: parking, options, contact, payment, noticeboard.

Answer 1

You could change the structure of your html template and apply CSS like below:
.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>
You can check the JSFiddle here.

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