如何旋轉兩個Flexbox行？

這可能使其旋轉90個degres使被毗鄰對方？我需要他們看起來像這樣。

<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; 
}

來源

2017-02-28 Billy Logan

將它放到一個額外的容器，旋轉......嗎？ – CBroe

我試圖應用CSS *轉換：旋轉（90deg）*但沒有運氣。 –

@CBroe好主意，讓我試試吧。 –

將.flex-container換算爲附加div，然後對其進行一些轉換。

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

來源

2017-02-28 15:27:54

設置第二flex-container如使用nth-child selector如下柱，

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

來源

2017-02-28 15:26:27 frnt

@Billy Logan檢查更新的代碼。 – frnt

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

我創建了一個家長，這樣我就可以把兩個Flex容器彼此相鄰。然後我分別旋轉每個彈性項目。

來源

2017-02-28 15:27:31 user3691763

如何旋轉兩個Flexbox行？

回答

相關問題