Is it possible to implement proper block wrapping without a media query/grid?

A

alekamisleforma2019-02-19 17:05:49

css

alekamisleforma, 2019-02-19 17:05:49

Hello. Is it possible to implement correct block wrapping without referring to media queries? The problem is that when the screen width decreases, the block from the top line jumps to the bottom one, and as a result, an empty space remains on the top line. To avoid this, you need to either write the container justify-content: center; , or change the width of blocks in media queries. The first option does not suit the fact that with justify-content: center; bottom row blocks are not centered properly. And the second option, with media queries / grid, seems to me too cumbersome and therefore I want to find a more beautiful solution. Does it exist?)

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="wrapper">
    <div class="container">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
      <div class="block">5</div>
    </div>
  </div>

</body>
</html>

CSS code

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: calc(33.3% - 40px);
  height: 100px;
  min-width: 150px;
  background-color: blue;
  margin: 20px;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

MainCorp, 2019-02-19
@MainCorp

Add flex-grow: 1; to the .block selector