mirror of
https://github.com/SerenityOS/serenity
synced 2026-05-15 03:16:44 +02:00
57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!doctype html>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
width: 300px;
|
|
height: 30px;
|
|
border: 2px solid #333;
|
|
}
|
|
.item {
|
|
background-color: rebeccapurple;
|
|
}
|
|
</style>
|
|
<div class="container" style="justify-content: start;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: end;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: center;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: stretch;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: space-between;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: space-around;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
<div class="container" style="justify-content: space-evenly;">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|