Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page.
The layout consists of a full-screen column with a background image. The first element within the column is a mock header bar. The second element should be a div with flex-direction set to row, but the colored divs inside still act as if they are in a column.
https://i.sstatic.net/ppNWA.jpg
html, body { box-sizing: border-box; height: 100%; width: 100%;
margin: 0; padding: 0; border: 0; cursor: default }
.workspace {
background: url("../../../assets/Images/WhatIsHunter2.jpg") no-repeat center center fixed;
background-size: cover;
height: 100vh;
width: 100vw;
h1 {
color: #E0B228;
}
h2 {
color: #2856E0;
}
}
The HTML:
<div class='workspace' [ngStyle]="{'display': 'flexbox', 'flex-direction': 'column'}">
<div [ngStyle]="{'width': '100vw', 'height': '60px', 'background-color': 'beige'}">
This row represents the header bar at the top of the column
</div>
<div [ngStyle]="{'margin-top': '20px', 'display': 'flexbox', 'flex-direction': 'row', 'justify-content': 'space-evenly'}">
<div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'red'}">
</div>
<div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'green'}">
</div>
<div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'blue'}">
</div>
</div>
</div>