Wie rotiere ich zwei Flexbox-Reihen?

Question

Ich habe zwei Flexbox-Zeilen, die so aussehen.

Ist dies möglich, sie 90 degres zu drehen, so dass nebeneinander angeordnet sind? Ich brauche sie, um so auszusehen.

<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 mit zusätzlichen div, dann machen Sie einige Transformation auf sie.

.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 zweite flex-container als Spalte nth-child selector wie unten,

.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) 
} 

habe ich ein Elternteil, so dass ich die beiden Flex-Container nebeneinander stellen können. Dann habe ich jeden Flex-Gegenstand einzeln gedreht.