Question 245195 in Html Question posted in
Some basic documentation can be found here.

Html – How do I change the direction of every other "row" in a wrapped row flex container?

I’m looking for a way to display an ordered list of components in an "S" pattern (where you can trace the start to the end of the list without lifting up your pen, for example).

This is what the end goal looks like:
enter image description here

For the life of me, I can’t come up with a way to do this. If it was a column with a set number of rows, I could do something like :nth-child(even) { flex-direction: row-reverse; } as this post suggests.

Here is the basic markup:

.flex-container {
  display: flex;
  flex-flow: wrap;
  place-content: flex-start;
  align-items: flex-start;
  flex: 1 1 320px;
}

.flex-item {
  flex: 0 0 calc(33.33% - 10px);
  /* Adjust the width as needed */
  margin: 5px;
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}


/* This doesn't work */

.flex-container:nth-child(even) {
  flex-direction: row-reverse;
}
<div class="flex-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 class="flex-item">9</div>
  <!-- this list is dynamic! -->
</div>

Here is a jfiddle with the basic setup I have in a production application. One thing to keep in mind is this is coming from a 3rd party application (Inductive Automation’s Ignition Perspective), so I pretty much need to do things this way, as I’ll have a dynamic number of components in the list.

Tags:

2

Answers


  1. 0

    This is a good question with, apparently, no good answers yet. It’s probably not possible to achieve a snake-like flow with CSS alone, without some constraints (such as a fixed number of items).

    In any case, here are some references—too many to list in the comments, but also not clear duplicates. Perhaps they will provide useful guidance.

    Login or Signup to reply.
  2. 0

    Doable using CSS grid if you know the number of columns. I have a (long) article detailing such techniques that worth reading in case you need more complex configuration: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#grid-patterns

    For 2 columns

    .container {
  display: grid;
  grid-auto-flow: dense;
  gap: 5px;
  padding: 5px;
}

.item:nth-child(4n + 4) {
  grid-column: 1;
}
.item:nth-child(4n + 3) {
  grid-column: 2;
}

.item {
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}
    <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <!-- this list is dynamic! -->
</div>

    And for 3 columns:

    .container {
  display: grid;
  grid-auto-flow: dense;
  gap: 5px;
  padding: 5px;
}

.item:nth-child(6n + 6) {
  grid-column: 1;
}
.item:nth-child(6n + 5) {
  grid-column: 2;
}
.item:nth-child(6n + 4) {
  grid-column: 3;
}

.item {
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}
    <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <!-- this list is dynamic! -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search