<div style="width: 100%;">
<!-- flex-start -->
<div style="padding: 24px;">
<div style="text-align:center; padding: 0 0 12px;">
<span style="color: #718096">justify-content:</span> flex-start
</div>
<div style="display: flex; justify-content: flex-start; background-color: #EDF2F7; padding: 8px; ">
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
</div>
</div>
<!-- center -->
<div style="padding: 24px;">
<div style="text-align:center; padding: 0 0 12px;">
<span style="color: #718096">justify-content:</span> center
</div>
<div style="display: flex; justify-content: center; background-color: #EDF2F7; padding: 8px; ">
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
</div>
</div>
<!-- flex-end -->
<div style="padding: 24px;">
<div style="text-align:center; padding: 0 0 12px;">
<span style="color: #718096">justify-content:</span> flex-end
</div>
<div style="display: flex; justify-content: flex-end; background-color: #EDF2F7; padding: 8px; ">
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
<div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
</div>
</div>
</div>
body {
display: flex;
height: 100vh;
margin: 0;
align-items: center;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div {
/* padding: 12px; */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.