How can flexbox items be removed?

Andrii Zaitsev 0
Viewed 33

How can flexbox items be removed on wrapper shrink? For example, YouTube removes elements when shrinking the window without wrapping them to the next line. Screen1 So that the video containers do not go down when compressed and do not move the lower container, but are simply removed. So that there is no such thing as on the 2nd screen enter image description hereScreen2

flexbox css
2 Answers

This is one of the ways you can achieve it by simply using media queries and overflow hidden. Don't forget the flex-shrink

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  width: 80vw;
  height: 90vh;
  border: 1px solid red;
  border-radius: 12px;
  /* IMPORTANT */
  overflow: hidden;
}

section article {
  display: grid;
  place-items: center;
  /* IMPORTANT */
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit
}

/* IMPORTANT */
@media (min-width: 768px) {
  section article {
    width: 50%;
  }
}

/* IMPORTANT */
@media (min-width: 1024px) {
  section article {
    width: 33%;
  }
}

/* IMPORTANT */
@media (min-width: 1200px) {
  section article {
    width: 25%;
  }
}
<section>
  <article style="background-color: blue">1</article>
  <article style="background-color: orange">2</article>
  <article style="background-color: green">3</article>
  <article style="background-color: pink">4</article>
</section>

Amini0

Look at the YouTube analogy. There are 2 rows of videos, when we reduce the screen, the boxes go to the next row, but they do not move Shorts box

Andrii Zaitsev0
Related