To make contentes responsive without media query

Now we are using media queries of all screen width we can avoid this by using flex property & flex wrap to wrap and setting its base to some value so when there is no place for the content in particular screen width it will wrap into a new line so that no space will be left and contents would be responsive

An example is given below
HTML
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS
.container {
  display:flex;
  flex-wrap:wrap; /* this */
  gap:10px;
}
.container > div {
  height:100px;
  flex:max(400px, 100%/3 - 20px); /* and this */
  background:red;
}

Leave a comment

Your email address will not be published. Required fields are marked *