CODEWITHSUNDEEP
htmlcsslayoutflexbox
Matías Fidemraizer
Matías Fidemraizer

Reputation: 64923

Stack up CSS3 rotated flexible boxes

I'm looking for horizontally stack up some rotated flexible boxes (i.e. display: flex).

The issue is when I rotate them, even when I set - for example - height: 1em, they stack up with a large space between each one.

My guess is that this is happening because when a box is rotated, it still occupies the non-rotated horizontal space.

How would you stack up rotated boxes horizontally and get rid of that undesirable margin?

In order to understand the whole problem better, I've created a sample in jsFiddle and I'm going to paste the code here:

HTML

<div id="container">
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
    <div class="inside">heyyyyyyyyyy</div>
</div>

CSS

#container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

.inside {
    min-width: 0;
   transform: rotate(-90deg);   
}

Upvotes: 1

Views: 2140

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

You have to update your HTML and CSS like below. It is very difficult to explain everything here. So Read this Article for More Explanation

HTML

<div id="container">
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
<div class="inside"><span class="test">heyyyyyyyyyy</span></div>
</div>

CSS

#container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}

.inside {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
min-width: 0;
transform: rotate(-90deg);   
}
.test
{
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.test:before
{
content: "";
float: left;
margin-top: 100%;
}

DEMO FIDDLE

EDIT:

The above solution was working fine on chrome but not in FF. After Matías Fidemraizer had research on that and come with the cross browser solution. Thank you so much for him.

CROSS BROWSER SOLUTION

Upvotes: 2

Related Questions