CSS Flexbox for a Slithery Layout

Question

CSS Flexbox for a Slithery Layout

Struggling to solve a CSS challenge here. I need to arrange an unknown number of items (either spans or divs) in a snake-like pattern within a container.

To clarify, let's say I have 10 items, each 20px wide. I want them to display like this in a 60px wide container:

I've experimented with flexbox in CSS, but so far I can only achieve this layout:

If it helps, I know the width of individual items but not the container width. Any guidance would be greatly appreciated.

Thanks in advance!

css

Answer 1

Answer №1

To achieve the desired outcome of your HTML structure organized with parent, rows, and items, you can apply the CSS property flex-direction: row-reverse to elements with the class .row:nth-child(2n).

.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

To achieve the desired outcome of your HTML structure organized with parent, rows, and items, you can apply the CSS property flex-direction: row-reverse to elements with the class .row:nth-child(2n).

.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 3

Answer №2

To solve this issue within the constraints of your markup, you can utilize the structure and float values outlined below.

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

<div class="left-to-right">
  <div>0</div><div>1</div><div>2</div>
</div>
<div class="right-to-left">
  <div>3</div><div>4</div><div>5</div>
</div>
<div class="left-to-right">
  <div>6</div><div>7</div><div>8</div>
</div>

Answer 4

To solve this issue within the constraints of your markup, you can utilize the structure and float values outlined below.

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

<div class="left-to-right">
  <div>0</div><div>1</div><div>2</div>
</div>
<div class="right-to-left">
  <div>3</div><div>4</div><div>5</div>
</div>
<div class="left-to-right">
  <div>6</div><div>7</div><div>8</div>
</div>

Answer 5

Answer №3

To reverse the flow of your content, you can use the CSS property direction: rtl;

Check out a live 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;
}

Answer 6

To reverse the flow of your content, you can use the CSS property direction: rtl;

Check out a live 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;
}

Answer 7

Answer №4

utilize the flex method

function createItem(){
  var element = document.createElement('div')
  element.className = "item"
  element.style.setProperty("--i", list.children.length + 1)
  element.textContent = list.children.length + 1
  list.append(element)
  element.scrollIntoView()
}
function removeItem() {
  list.querySelector('.item:last-child').remove()
}

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  background: aliceblue;
}
.list{
  display: flex;
  width: 300px;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.item{
  width: calc( (100% - 30px) / 4 );
  aspect-ratio: 1/1;
  background: royalblue;
  color: #fff;
  font-size: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  order: var(--i);
  filter: hue-rotate(calc(var(--i) * 10deg));
}
.item:nth-child(8n + 5){
  order: calc(var(--i) + 3)
}
.item:nth-child(8n + 6){
  order: calc(var(--i) + 1)
}
.item:nth-child(8n + 7){
  order: calc(var(--i) - 1)
}
.item:nth-child(8n + 8){
  order: calc(var(--i) - 3)
}
.item:nth-child(8n + 5):last-child,
.item:nth-child(8n + 6):last-child,
.item:nth-child(8n + 7):last-child{
  margin-left: auto;
}
.action{
  margin-top: 20px;
}

<div class="list" id="list">
  <div class="item" style="--i: 1">1</div>
  <div class="item" style="--i: 2">2</div>
  <div class="item" style="--i: 3">3</div>
</div>
<div class="action">
  <button onclick="createItem()">Add</button>
  <button onclick="removeItem()">Remove</button>
</div>

Link to Flex Method Example

try utilizing the grid method

function createItem(){
  var item = document.createElement('div')
  item.className = "item"
  item.style.setProperty("--i", list.children.length + 1)
  list.append(item)
  item.scrollIntoView()
}
function removeItem() {
  list.querySelector('.item:last-child').remove()
}

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  background: aliceblue;
}

.list{
  display: grid;
  width: 300px;
  gap: 10px;
  margin-top: 20px;
  counter-reset: count;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
}

.item{
  counter-increment: count;
  aspect-ratio: 1/1;
  background: royalblue;
  color: #fff;
  font-size: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  filter: hue-rotate(calc(var(--i) * 10deg));
  
  &::before {
    content: counter(count);
  }
  
  &:nth-child(8n + 5){
    grid-column-end: -1;
  }
  
  &:nth-child(8n + 6){
    grid-column-end: -2;
  }
  
  &:nth-child(8n + 7){
    grid-column-end: -3;
  }
  
  &:nth-child(8n + 8){
    grid-column-end: -4;
  }
}
.action{
  margin-top: 20px;
}

/* Additional CSS Code for Enhancement */

<div class="list" id="list">
  <div class="item" style="--i: 1"></div>
  <div class="item" style="--i: 2"></div>
  <div class="item" style="--i: 3"></div>
</div>
<div class="action">
  <button onclick="createItem()">Add</button>
  <button onclick="removeItem()">Remove</button>
</div>

Link to Grid Method Example

Answer 8

utilize the flex method

function createItem(){
  var element = document.createElement('div')
  element.className = "item"
  element.style.setProperty("--i", list.children.length + 1)
  element.textContent = list.children.length + 1
  list.append(element)
  element.scrollIntoView()
}
function removeItem() {
  list.querySelector('.item:last-child').remove()
}

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  background: aliceblue;
}
.list{
  display: flex;
  width: 300px;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.item{
  width: calc( (100% - 30px) / 4 );
  aspect-ratio: 1/1;
  background: royalblue;
  color: #fff;
  font-size: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  order: var(--i);
  filter: hue-rotate(calc(var(--i) * 10deg));
}
.item:nth-child(8n + 5){
  order: calc(var(--i) + 3)
}
.item:nth-child(8n + 6){
  order: calc(var(--i) + 1)
}
.item:nth-child(8n + 7){
  order: calc(var(--i) - 1)
}
.item:nth-child(8n + 8){
  order: calc(var(--i) - 3)
}
.item:nth-child(8n + 5):last-child,
.item:nth-child(8n + 6):last-child,
.item:nth-child(8n + 7):last-child{
  margin-left: auto;
}
.action{
  margin-top: 20px;
}

<div class="list" id="list">
  <div class="item" style="--i: 1">1</div>
  <div class="item" style="--i: 2">2</div>
  <div class="item" style="--i: 3">3</div>
</div>
<div class="action">
  <button onclick="createItem()">Add</button>
  <button onclick="removeItem()">Remove</button>
</div>

Link to Flex Method Example

try utilizing the grid method

function createItem(){
  var item = document.createElement('div')
  item.className = "item"
  item.style.setProperty("--i", list.children.length + 1)
  list.append(item)
  item.scrollIntoView()
}
function removeItem() {
  list.querySelector('.item:last-child').remove()
}

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  background: aliceblue;
}

.list{
  display: grid;
  width: 300px;
  gap: 10px;
  margin-top: 20px;
  counter-reset: count;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
}

.item{
  counter-increment: count;
  aspect-ratio: 1/1;
  background: royalblue;
  color: #fff;
  font-size: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  filter: hue-rotate(calc(var(--i) * 10deg));
  
  &::before {
    content: counter(count);
  }
  
  &:nth-child(8n + 5){
    grid-column-end: -1;
  }
  
  &:nth-child(8n + 6){
    grid-column-end: -2;
  }
  
  &:nth-child(8n + 7){
    grid-column-end: -3;
  }
  
  &:nth-child(8n + 8){
    grid-column-end: -4;
  }
}
.action{
  margin-top: 20px;
}

/* Additional CSS Code for Enhancement */

<div class="list" id="list">
  <div class="item" style="--i: 1"></div>
  <div class="item" style="--i: 2"></div>
  <div class="item" style="--i: 3"></div>
</div>
<div class="action">
  <button onclick="createItem()">Add</button>
  <button onclick="removeItem()">Remove</button>
</div>

Link to Grid Method Example

CSS Flexbox for a Slithery Layout

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Content does not become interactive upon the initial loading of the page

What might be causing Flex not to function properly on my personalized landing page?

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

Ways to eliminate spacing from a bullet point in a list?

All pictures aligned with overflow

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Merge Various Ng-Loops

Iframe overlay feature functioning on Chrome but not on IE11

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

Is there a clash between ng-if and col col-50?

Attempting to utilize jQuery for altering the background URL leads to the unexpected removal of the -webkit-background-clip:text; effect

Text alignment in the horizontal direction does not function as expected within the `<span>` element in Bootstrap 4

Difficulty with collapsing and expanding levels in Bootstrap 4 sidebar navigation

jQuery animation not executing as expected due to transition issues

Transforming Button style in jQuery Mobile version 1.3.0

What causes the less-than-perfect smoothness in my CSS3/jQuery transitions and how can I improve their fluidity?

CSS Attribute Selector Wildcard Capture Tool

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

Assistance needed for aligning a div to the right using

Encountered a problem while executing CSS in Shiny R