This is my code taken from a tutorial:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
.flex-parent {
background: gray;
display: flex;
}
.flex-item {
padding: 0.5em;
background: #efefef;
border: 3px solid #333;
margin: 13px;
}
.container {
display: flex;
flex-wrap: wrap;
}
/* =========================
GENERAL STYLES
NOT RELATED TO THE TUTORIAL
============================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-primary: #ee6352;
--clr-secondary: #d16e8d;
--clr-accent: #f7f7ff;
--clr-gradient: linear-gradient(
-90deg,
var(--clr-primary),
var(--clr-secondary)
);
--ff-title: bungee, sans-serif;
--ff-body: canada-type-gibson, sans-serif;
--fw-body: 300;
--fw-bold: 800;
--fw-title: 400;
--fw-number: 800;
}
body {
min-height: 100vh;
font-family: var(--ff-body);
font-weight: var(--fw-body);
font-size: 1.25rem;
display: flex;
flex-direction: column;
}
.container {
width: min(95%, 45rem);
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-parent">
<div class="flex-item">
flex-item
</div>
<div class="flex-item">
flex-item
</div>
<div class="flex-item">
flex-item
</div>
<div class="flex-item">
flex-item
</div>
<div class="flex-item">
flex-item
</div>
<div class="flex-item">
flex-item
</div>
</div>
</div>
</body>
</html>It works and is functional, but the problem is I cannot get it as three flex-items per row, meaning after the third, it moves to a new line etc.
I've got the spaces in-between working with:
.flex-item {
padding: 0.5em;
background: #efefef;
border: 3px solid #333;
margin: 13px;
}
Margin set at 13px
What I cannot do is try and get these to have three flex-items per row without having to cut-and-paste flex-parent class each time.
I'm trying to keep this design simple.
This is far from production, just a sandbox.
If you could guide me on things it's appreciated!
