CSS Tricks
CSS Trick

Zigzag Layout with Flexbox

Alternate card layouts without changing HTML using nth-child and flex-direction.

#css #flexbox #layout #nth-child

Browser Support

✓ Chrome 29+ ✓ Firefox 28+ ✓ Safari 9+ ✗ Edge

Zigzag Layout

Alternate card layouts using flex-direction: row-reverse on even items.

.card {
  display: flex;
}


.card:nth-child(even) {
  flex-direction: row-reverse;
}

Live Demo

Zigzag Layout
FLEXBOX
1rem
40px
CSS Code
.zigzag-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 300px;
}
.zigzag-card {
display: flex;
gap: 1rem;
align-items: center;
padding: 0.75rem;
border-radius: 0.5rem;
}
.zigzag-card:nth-child(odd) {
background: rgba(139, 92, 246, 0.1);
}
.zigzag-card:nth-child(even) {
flex-direction: row-reverse;
background: rgba(6, 182, 212, 0.1);
}
.zigzag-card:nth-child(even) .zigzag-text {
text-align: right;
}
.zigzag-icon {
width: 40px;
height: 40px;
border-radius: 0.375rem;
flex-shrink: 0;
}
.zigzag-card:nth-child(odd) .zigzag-icon {
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
.zigzag-card:nth-child(even) .zigzag-icon {
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
}
.zigzag-title {
margin: 0;
font-weight: 600;
font-size: 0.875rem;
}
.zigzag-desc {
margin: 0;
font-size: 0.75rem;
opacity: 0.7;
}

Same HTML structure for all cards - CSS handles the visual alternation.

Share this CSS trick

Comments