How to Reverse Flexbox Direction on Wrap to Achieve "Snake Wrap"

How can I reverse flexbox direction on wrap to achieve snake wrap?

A CSS grid solution similar to this one that works with a fixed number of elements per row (aka fixed number of columns).

.flex-container {  width: 500px;  background: orange;  display: grid;  grid-template-columns:repeat(5,1fr); /*define the number of column*/  grid-auto-flow:dense; /* this is important to fill all the space*/  grid-gap:20px;  padding:10px;}
.item {  background: purple;  height: 80px;  line-height: 80px;  color: white;  font-weight: bold;  font-size: 2em;  text-align: center;}
.item:nth-child(10n + 6)  {grid-column:5}.item:nth-child(10n + 7)  {grid-column:4}.item:nth-child(10n + 8)  {grid-column:3}.item:nth-child(10n + 9)  {grid-column:2}/*.item:nth-child(10n + 10) {grid-column:1} not needed*//* For N = number of columns   .item:nth-child((2xN)n + (N+1)) { grid-column:N; }  .item:nth-child((2xN)n + (N+2)) { grid-column:(N-1); }  ....  .item:nth-child((2xN)n + (2xN)) { grid-column:1; }
*/
.item:before {  content:counter(num);  counter-increment:num;}body {  font: 400 14px 'Arial', sans-serif;  counter-reset:num;}

<div class="flex-container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

Flexbox: Alternate row and row-reverse according to row's number

Given the fact the items have a known width, this can be done using order and media queries, not with row/reverse-row, unless each row has a wrapper, which won't be possible in your case.

Stack snippet

body {margin: 0}
.flexbox-container {  display: flex;  flex-wrap: wrap;}
.flex-item {  width: 380px;  height: 100px;  background: red;  margin: 5px;  font-family: sans-serif;  color: white;  text-align: center;  font-size: 2em;  line-height: 150%;}@media (min-width: 796px) {  .flex-item:nth-child(3)   { order: 2; }  .flex-item:nth-child(4)   { order: 1; }  .flex-item:nth-child(n+5) { order: 2; }    .flex-item:nth-child(7)   { order: 4; }  .flex-item:nth-child(8)   { order: 3; }}@media (min-width: 1176px) {  .flex-item:nth-child(3)   { order: 0; }  .flex-item:nth-child(4)   { order: 3; }  .flex-item:nth-child(5)   { order: 2; }  .flex-item:nth-child(6)   { order: 1; }  .flex-item:nth-child(n+7) { order: 3; }  .flex-item:nth-child(8)   { order: 3; }}@media (min-width: 1556px) {  .flex-item:nth-child(3)   { order: 0; }  .flex-item:nth-child(4)   { order: 0; }  .flex-item:nth-child(5)   { order: 4; }  .flex-item:nth-child(6)   { order: 3; }  .flex-item:nth-child(7)   { order: 2; }  .flex-item:nth-child(8)   { order: 1; }}

<div class="flexbox-container">  <div class="flex-item">1</div>  <div class="flex-item">2</div>  <div class="flex-item">3</div>  <div class="flex-item">4</div>  <div class="flex-item">5</div>  <div class="flex-item">6</div>  <div class="flex-item">7</div>  <div class="flex-item">8</div></div>

Snake-like alignment in css

If you create your HTML structure with parent - rows - items you can use flex-direction: row-reverse on .row:nth-child(2n) elements and that will create 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>

grid-auto-flow in snake lines?

Here is an idea if we consider the fact that you will always have 3 rows:

.container {  display:grid;  grid-template-rows:20px 20px 20px;  grid-auto-columns:20px;  grid-auto-flow:column dense;}
.container > div:nth-child(6n + 4) { grid-row:3; }.container > div:nth-child(6n + 5) { grid-row:2; }/*.container > div:nth-child(6n + 6) { grid-row:1; }  to illustrate the pattern but not needed */
/* Irrelevant styles */.container {  grid-gap:5px;  counter-reset:num;  margin:10px;}
.container > div {  border:1px solid;}.container > div:before{  content:counter(num);  counter-increment:num;}

<div class="container">  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="container">  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="container">  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

How to wrap second child around a first child using Flexbox

You cannot do this using flexbox or CSS grid (it's simply impossible). You have two possibilies.

Either using float:

.flex-child-1 {  font-weight: bold;  float:left;  margin-right:5px;}

<div class="flex-parent">  <div class="flex-child-1">Mr. Bond</div>  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div></div>

How can I move tiles in circularly in a multi-row carousel?

I've used absolute position formula from index to (top, left). Then i've used jQuery to animate that. That's lame but can be improved if that's an issue. It looks nice.

const containerBox = document.querySelector('#container')
let divs = [...containerBox.querySelectorAll('div')]
var size = 100
var margin = 2

function get_top_left(pos) {
  if (pos < divs.length / 2) {
    return {
      left: pos * size + margin * (pos),
      top: 0
    }
  } else {
    return {
      left: (divs.length - pos - 1) * size + margin * (divs.length - pos - 1),
      top: size + margin
    }
  }
}

var offset = 0

function draw() {

  divs.forEach(function(div, index) {
    var len = divs.length
    index = ((index + offset) % len + len) % len
    var pos = get_top_left(index);
    //div.style.left = pos.left + "px"
    //div.style.top = pos.top + "px"
    $(div).animate({
      "left": pos.left + "px",
      "top": pos.top + "px"
    })
  })

}

next.onclick = _ => {
  offset += 1
  draw()
}
prev.onclick = _ => {
  offset -= 1
  draw()
}

draw();

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  height: 260px;
  margin: 10px;
  position: relative;
}

#container>div {
  width: 100px;
  height: 66px;
  color: white;
  text-align: center;
  font-size: 24px;
  border: 1px solid white;
  padding-top: 34px;
  box-sizing: content-box;
  background: #2a80b9;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="prev">Prev</button>
<button id="next">Next</button>

<div id="container">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

---

Related Topics