👩‍💻 Flexbox Review

HTML

<!DOCTYPE html>

<html>

<head>

<title>Flexbox Demo</title>

<link rel="stylesheet" href="main.css">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">

</head>

<body>

<div class="container">

<div class="item item1">1</div>

<div class="item item2">2</div>

<div class="item item3">3</div>

<div class="item item4">4</div>

<div class="item item5">5</div>

<div class="item item6">6</div>

</div>

</body>

</html>

CSS

.container {

display: flex;

padding:10px;

background-color: #042135;

min-height: 300px;

font-family: 'PT Mono', monospace;

color: #042135;

font-size: 36px;

text-align: center;

}

/*this tells the browser to account for any border and padding in the values you specify for an element's width and height.*/

* {box-sizing: border-box;}

.item {

margin: 10px 10px;

width: 300px;

}

.item1 {

background-color: #ff62f4;

}

.item2 {

background-color: #00a4ff

​​​👩‍💻​ Flexbox Review