How can flexbox items be removed?

Question

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

you can use a media Query to hide the parts of the item you don't need under a specific screen size — Ahmed Eid, Sep 17 '22 at 09:16
They use [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to hide elements based on viewport [width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width) (not screen size). — Erik Philips, Sep 17 '22 at 09:18
Does this answer your question? [Hide div element when screen size is smaller than a specific size](https://stackoverflow.com/questions/13476267/hide-div-element-when-screen-size-is-smaller-than-a-specific-size) — gre_gor, Sep 17 '22 at 09:41

score 1 · Answer 1 · answered Sep 17 '22 at 09:26

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>

score 0 · Answer 2 · answered Sep 17 '22 at 10:54

0

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

answered Sep 17 '22 at 10:54

Andrii Zaitsev

1
2

answer is a comment – Zach Jensz Sep 22 '22 at 23:21

How can flexbox items be removed?

2 Answers2