I've recently delved into the world of web development through an intriguing course on this platform. Currently, I find myself tinkering with the code snippet below in order to deepen my understanding of flexbox. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Exploring Flexbox Features</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
Relevant CSS snippets:
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
A preview of the webpage design: https://i.sstatic.net/SD3dT.png
I'm curious about how to align the main div either to the right or left within the background. Which specific style or command should be applied for this purpose?
UPDATE: While I can handle the alignment of smaller squares inside the divs, I'm particularly interested in shifting the large blue-ish rectangle in the container's background to either side – rather than it being centered by default. My apologies if this clarification was lacking in my earlier question.