<div id="container">
<div class="flex__container">
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
<div class="flex__container">
<div class="flex__item"></div>
<div class="flex__item" style="order: 1"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
<div class="flex__container">
<div class="flex__item"></div>
<div class="flex__item" style="order: -1"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
margin: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
font-size: 100%;
letter-spacing: 0.1rem;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
:root {
--writingMode: horizontal-tb;
--direction: ltr;
--flexDirection: row;
--flexWrap: nowrap;
--justifyContent: center;
--alignItems: center;
}
#container {
writing-mode: var(--writingMode);
direction: var(--direction);
display: flex;
justify-content: center;
align-items: center;
}
.flex__container {
display: flex;
flex-direction:var(--flexDirection);
flex-wrap: var(--flexWrap);
justify-content: var(--justifyContent);
align-items: var(--alignItems);
inline-size: 60vh;
block-size: 20vh;
border: 1px dashed #E91E63;
border-color: #FFEB3B #FF5722 #fff #00BCD4;
position: relative;
counter-reset: listCounter;
margin: 2vh;
padding: 2vh;
}
.flex__item {
display: flex;
justify-content: center;
align-items: center;
inline-size: 15vh;
block-size: 15vh;
counter-increment: listCounter;
}
.flex__item::before {
content: "[" counter(listCounter) "]";
font-size: 1.5rem;
background: rgba(0,0,0,.65);
padding: 4px;
border-radius: 4px;
}
.flex__item:nth-child(1) {
background-color: #f36;
}
.flex__item:nth-child(2) {
background-color: #CDDC39;
}
.flex__item:nth-child(3) {
background-color: #2196F3;
}
.flex__item:nth-child(4) {
background-color: #FF5722;
}
.flex__item:nth-child(5) {
background-color: #F22;
}
.flex__item:nth-child(6) {
background-color: #722;
}
.flex__item:nth-child(7) {
background-color: #FF5;
}
.flex__item:nth-child(8) {
background-color: #9f9f9f;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.