Snake-like alignment in css

Question

I was struggling with the following issue in CSS. I have an arbitrary number of elements (spaces or divs) that I want to wrap inside a container in the form of a snake.

I mean, if I have 10 elements, each of which is 20 pixels wide, I would like them to appear as follows in a container of 60 pixels wide:

0 1 2 5 4 3 6 7 8 9 

I tried using flexbox in CSS, but I can only get the elements that will be displayed as follows:

 0 1 2 3 4 5 6 7 8 9 

If this can help, I know the exact width of the individual elements, but I don't know the width of the container.

Any help would be greatly appreciated.

Thank you in advance!

Answer 1

If you create your HTML structure using parent - rows - items , you can use flex-direction: row-reverse on .row:nth-child(2n) elements and create the desired result.

 .content { display: flex; flex-direction: column; } .row { display: flex; justify-content: space-between; } .row:nth-child(2n) { flex-direction: row-reverse; } .row:nth-child(2n):last-child .item { margin-right: auto; } 

 <div class="content"> <div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="row"> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class="row"> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <div class="row"> <div class="item">10</div> </div> </div> 

Answer 2

Without knowing the limitations of your markup, you can use the following structure and float values ​​to make it work.

 .ltr, .rtl { width: 60px; } .ltr div, .rtl div { width: 20px; height: 20px; display: inline-block; } .rtl div { float: right; } .ltr div { float: left; } 

 <div class="ltr"> <div>0</div><div>1</div><div>2</div> </div> <div class="rtl"> <div>3</div><div>4</div><div>5</div> </div> <div class="ltr"> <div>6</div><div>7</div><div>8</div> </div> 

Answer 3

Use css direction: rtl;

demo here: http://codepen.io/sol_b/pen/YpjGKK

 <div class="container"> <div class="row"> <span>1</span> <span>2</span> <span>3</span> </div> <div class="row2"> <span>4</span> <span>5</span> <span>6</span> </div> <div class="row"> <span>7</span> <span>8</span> <span>9</span> </div> </div> .row2 { direction: rtl; float:left; } .row { clear:both; }