CODEWITHSUNDEEP
htmlcssflexbox
Billy Logan
Billy Logan

Reputation: 2520

How to rotate two flexbox rows?

I have two flexbox rows that look like this.

enter image description here

Is this possible to rotate them 90 degres so that are located next to each other? I need them to look like this.

enter image description here

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

Upvotes: 3

Views: 614

Answers (3)

pan.goth
pan.goth

Reputation: 1485

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>

Upvotes: 3

user3691763
user3691763

Reputation: 95

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.

Upvotes: 2

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

Related Questions