如何旋转两个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行？

回答

相关问题