<div class="wrapper">
<div class="example">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</div>
* {box-sizing: border-box;}
body {
background-color: grey;
font: 1.5em/1.3 Helvetica, Arial, sans-serif;
}
.wrapper {
background-color: white;
width: 800px;
margin: 40px auto;
padding: 20px;
}
.example {
display: flex;
flex-wrap: wrap;
background-color: rgb(255,157,10);
padding: 10px;
inline-size: 600px;
block-size: 300px;
justify-content: flex-end;
align-content: space-around;
}
.example > * {
border-radius: 10px;
background-color: rgb(43,91,128);
color: white;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.