How to rotate two flexbox rows? - html

Question

I have two flexbox rows that look like this.
Is this possible to rotate them 90 degres so that are located next to each other? I need them to look like this.
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: black;
border: 1px solid black;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}

Answer 1

Wrap .flex-container with additional div, then make some transformation on it.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: black;
border: 1px solid black;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}
.container {
transform: translateY(-100%) rotate(90deg);
transform-origin: left bottom;
}
<div class="container">
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</div>

Answer 2

Set second flex-container as column using nth-child selector as below,
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-container:nth-child(2){
flex-direction:column;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: black;
border: 1px solid black;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}
.flex-container:nth-child(2) > .flex-item{
transform:rotate(90deg);
}
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>

Answer 3

HTML
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</div>
CSS
.parent
{
display: flex;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: column;
}
.flex-item {
color: black;
border: 1px solid black;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
transform: rotate(90deg)
}
I created a parent so that I can put the two flex containers next to each other. Then I rotated each flex item individually.