Set the recording mode / text direction from bottom to top

Question

I can’t find a solution for the green elements to start in the lower right corner of the container, for example, in the right image ("Need").

Does CSS provide a way to align / orient elements below?

“Default” and “Required” are shown.

SNIPPET

.cnt { width:200px; height:300px; border:1px solid green; text-align:center; display: table-cell; vertical-align: bottom; } .itm { transform: translate(0px, 0px) scale(1); display: inline-block; padding:10px; width:20px; margin:10px; background: green; color: white; transition:transform 0.5s; } .itm:hover { transform: translate(0px, -3px) scale(1.1); } 

 <div class="cnt"> <div class="itm">1</div> <div class="itm">2</div> <div class="itm">3</div> <div class="itm">4</div> <div class="itm">5</div> <div class="itm">6</div> <div class="itm">7</div> <div class="itm">8</div> </div> 

Answer 1

Does CSS provide a way to align / orient elements below?

Surprisingly, in horizontal recording mode this is not so.

There are various properties, including writing-mode , direction , text-orientation and flex-direction , which allow you to reconfigure the content stream.

But none of them allows you to lay out content in horizontal recording mode, starting from the bottom right. Maybe someone can fix me about this.

At the same time, hack here (pure CSS):

 .cnt { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; text-align: center; width: 200px; height: 300px; border: 1px solid green; transform: scaleY(-1); } .itm { padding: 10px; width: 20px; margin: 10px; background: green; color: white; transform: translate(0px, 0px) scaleY(-1) scaleX(1); transition: transform 0.5s; } .itm:hover { transform: translate(0px, -3px) scaleY(-1.1) scaleX(1.1); } 

 <div class="cnt"> <div class="itm">8</div> <div class="itm">7</div> <div class="itm">6</div> <div class="itm">5</div> <div class="itm">4</div> <div class="itm">3</div> <div class="itm">2</div> <div class="itm">1</div> </div> 

https://jsfiddle.net/o7hr07k6/

Answer 2

It is easy if you can reorder the itms in the source.

 .cnt { width:200px; height:300px; border:1px solid green; text-align:center; display: table-cell; vertical-align: top; transform:rotate(180deg); } .itm { display: inline-block; padding:10px; width:20px; margin:10px; background: green; color: white; transform:rotate(180deg); } 

 <div class="cnt"> <div class="itm">8</div> <div class="itm">7</div> <div class="itm">6</div> <div class="itm">5</div> <div class="itm">4</div> <div class="itm">3</div> <div class="itm">2</div> <div class="itm">1</div> </div> 

Answer 3

I know that this is not entirely true, but it is the closest that I could get with a pure CSS solution. This is pretty ugly. By sending more so that others can see it and use it to get the right answer.

 .cnt { width:200px; height:300px; border:1px solid green; text-align:center; display: table-cell; vertical-align: bottom; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: flex-end; } .itm { transform: translate(0px, 0px) scale(1); display: inline-block; padding:10px; width:20px; height: 20px; margin:10px; background: green; color: white; transition:transform 0.5s; } .itm:hover { transform: translate(0px, -3px) scale(1.1); } .itm:nth-child(1) { order: 8; } .itm:nth-child(2) { order: 7; } .itm:nth-child(3) { order: 6; } .itm:nth-child(4) { order: 5; } .itm:nth-child(5) { order: 4; } .itm:nth-child(6) { order: 3; } .itm:nth-child(7) { order: 2; } .itm:nth-child(8) { order: 1; } 

 <div class="cnt"> <div class="itm">1</div> <div class="itm">2</div> <div class="itm">3</div> <div class="itm">4</div> <div class="itm">5</div> <div class="itm">6</div> <div class="itm">7</div> <div class="itm">8</div> </div>