media query css tranistion #CSS #transition

explination

can animate the flex-basis property using CSS transitions in a media query:

In this example, we have a flex container with three flex items, each with a different flex-basis. When the screen width is less than or equal to 768px, the media query is triggered and we want the flex items to stack vertically. We set the flex-basis to 100% for each item, which causes them to take up the full width of the container.

We also add an .active class to the items we want to animate. In this case, we're animating the second and third boxes to have a smaller flex-basis when the screen width is reduced. The first box remains at flex-basis: 100% because we want it to take up the full width of the container at all times.

To animate the flex-basis property, we add a transition property to the .box class. In the media query, we then change the flex-basis property of the active boxes to the desired value, and the transition effect takes care of the rest.

flexbass transition

  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>

  .box1 {
    flex-basis: 20%;
  }
  
  .box2 {
    flex-basis: 30%;
  }
  
  .box3 {
    flex-basis: 40%;
  }
  
  @media screen and (max-width: 768px) {
    .container {
      flex-wrap: wrap;
    }
    
    .box {
      flex-basis: 100%;
    }
    
    .box1, .box2, .box3 {
      flex-basis: 100%;
      margin: 10px 0;
    }
    
    .box1.active {
      flex-basis: 100%;
    }
    
    .box2.active {
      flex-basis: 50%;
    }
    
    .box3.active {
      flex-basis: 30%;
    }
    
    .box.active {
      margin: 10px;
    }
  }