如何旋转两个flexbox行？

Question

我有两个看起来像这样的flexbox行。

是否可以将它们旋转90度，使它们彼此相邻？我需要它们看起来像这样。

<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

使用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); }设置为列，如下所示

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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容器放在一起。然后我单独旋转每个弹性项目。

Answer 3

用另外的div包裹.flex-container，然后对其进行一些转换。

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