Practice Layouts using Flexbox CSS

body{
  font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover; 
  color:white;
}

.header{
    background:grey;
    width: 100%;
    min-height: 60px;
    display: flex;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
}
.main{
    display: flex;
    flex-wrap: wrap;
}
.orangebox{
    background: orange;
    min-width: 180px;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    display: flex;
}
.whitebox{
    min-height: 40px;
    min-width: 40px;
    background: white;
}

Practice Layouts using Flexbox HTML

<header class="header">
  <div class="whitebox">
  </div>
  <div class="whitebox">
  </div>
</header>
<main class="main">
    <section class="orangebox">
        <div class="whitebox">
        </div>
    </section>
</main>