CSS Only Dynamic Column Flexbox Example

by Posted on

In this post I am going to share css flexbox example. Here you’ll learn how to use flixbox to display parallel column, below example you can click on + button to dynamically add column see flex design adjust column dynamically.

CSS Only Dynamic Column Flexbox

HTML

<div class="background">
  <div class="container" data-container>
    <div class="card" data-card style="background-image: url('https://source.unsplash.com/random/1')">1</div>
    <div class="card" style="background-image: url('https://source.unsplash.com/random/2')">2</div>
    <div class="card" style="background-image: url('https://source.unsplash.com/random/3')">3</div>
    <div class="card" style="background-image: url('https://source.unsplash.com/random/4')">4</div>
    <div class="card" style="background-image: url('https://source.unsplash.com/random/5')">5</div>
    <div class="card" style="background-image: url('https://source.unsplash.com/random/6')">6</div>
  </div>
  <div class="buttons">
    <button data-remove>–</button>
    <button data-add>+</button>
  </div>
</div>


CSS

.container {
  background: #FF678C;
  box-sizing: border-box;
  display: flex;
  flex-flow: column wrap;
  height: 80vh;
  margin-bottom: 5vh;
  text-align: center;
  text-transform: uppercase;
  width: 90vw;
}
 
.card {
  align-items: center;
  background: white;
  background-size: cover;
  border: 5px solid white;
  box-sizing: border-box;
  color: white;
  display: flex;
  flex-grow: 0;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  height: 50%;
  justify-content: center;
  outline: 5px solid white;
  text-shadow: 0 0 5px black;
 
  // Setting the heights of the elements so they meet
  // nicely at the bottom of the container
  &:nth-child(6n - 5) {
    height: 25%;
  }
 
  &:nth-child(6n-4) {
    height: 75%;
  }
 
  &:nth-child(6n-3) {
    height: 50%;
  }
 
  &:nth-child(6n-2) {
    height: 50%;
  }
 
  &:nth-child(6n-1) {
    height: 66.666%;
  }
 
  &:nth-child(6n) {
    height: 33.333%;
  }
}
 
// Presentational Styles
 
body {
  margin: 0;
}
 
.background {
  align-items: center;
  background: #FF678C;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}
 
button {
  background: white;
  border: 2px solid transparent;
  border-radius: 0;
  color: #FF648A;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 
  &:hover {
    background-color: #FF648A;
    border: 2px solid white;
    color: white;
  }
}


JS

// This JS is not needed for the layout to work.
// All it does it add/remove images.
 
const add = document.querySelector('[data-add]');
const remove = document.querySelector('[data-remove]');
const card = document.querySelector('[data-card]');
const container = document.querySelector('[data-container]');
let number = 7;
 
add.addEventListener('click', () => {
  const addCard = card.cloneNode(true);
  const image = `url('https://source.unsplash.com/random/${Math.floor(Math.random() * 100)}')`;
  addCard.style.backgroundImage = image;
  addCard.innerHTML = number;
  container.appendChild(addCard);
  number++;
});
 
remove.addEventListener('click', () => {
  if (container.childElementCount > 0) {
    container.removeChild(container.lastElementChild);
  }
 
  if (number > 1) {
    number--;
  }
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by CAWeissen. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin