Flex panels image gallery

This challenge focuses on the use of flex box to create a responsive layout that makes use of flex css properties and values. To begin the layout is created by setting the outer container to display flex and also...

  .panels {
  min-height: 100vh;
  overflow: hidden;
  display: flex;

}

From here we can select all children inside the panel.

Useful syntax for shorthand:

  flex: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

.panel > * {
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

The above code sets transition times for all items inside the panel. Sets the flex to grow 1, shrink 0 and basis auto. Flex basis can be change to fit the content, and other settings. Here's a link to more details.. We also set the child items to flex so they have the flex container. We can then use justify-content and align items, to center them horizontally.

We now want to position the text vertically by using:

    .panel {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

Flex:1 means the panel's are split evenly to 1 section each. flex-direction can be a number of different styles - for this we use column for the layout. display: flex defines the flex container.

On each panel we want to have a transition we can set this to include flex.

  .panel {
    transition: 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
   flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background  0.2s;  
 }

To start we want only the middle text to be visible so we use.

  .panel > *:first-child {
  transform: translateY(-100%);
}
.panel > *:last-child {
  transform: translateY(100%);
}

.panel.open-active > *:first-child {
  transform: translateY(0);
}
.panel.open-active > *:last-child {
  transform: translateY(0);
}

The open-active class resets the values of Y so the top and bottom text slide into position. We will toggle open-active and open using js.

  .panel.open {
  flex: 5;
  font-size: 45px;
}

This spreads the panel 5 wide and increases the font size with the transitions.

Now for the small amount of JS using ES6 fat arrows.

  const panels = document.querySelectorAll(".panel");

function toggleOpen() {
  this.classList.toggle("open");
}

function toggleActive(e) {
  if (e.propertyName.includes("flex")) {
    this.classList.toggle("open-active");
  }
}

panels.forEach(panel => panel.addEventListener("click", toggleOpen));
panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));

First select all panels. Create functions that toggle open. The toggleActive function checks if flex is present if so it toggles the class.

Loop through each panel and add an event listener on click to apply the toggleOpen function. Loop through each panel, checking if the transition has ended, if so toggle the flex grow.

Side note:

      function toggleActive(e) {
      console.log(e.propertyName);
    }

This code display what is being transitioned, it logs flex-grow, font-size and transform.

Things learnt

  1. Flex box css
  2. Horizontally align text with flex
  3. Transitioned
  4. e.propertyName

Complete project

See the Pen Flex panels image gallery by Harry Beckwith (@fun) on CodePen.


147 0 0