How to adapt Display:flex?

there is a section with 4 divами in a row 25% of the width
when magnifying a page, there is no adaptability, i.e., reaching the size of a cell or tablet all 4 elements still remain in place in a number. how to make so that when you reduce the screen to 50%, 2 item was postponed to the next row, and 75% of 1 element per line?
PS
there is a Hover effect which increases each unit up to 30% when hovering
April 3rd 20 at 18:30
2 answers
April 3rd 20 at 18:32
#timeline {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

and min-width , e.g. 200px; children set. Hovering - slightly more than the value of min-width:
no. then when you hover e-t immediately transferred to another line - jorge commented on April 3rd 20 at 18:35
Then you can try with media queries and more complex layout, a couple of blocks to wrap in a wrapper. For each and every occasionally flex. When you reduce the width to set flex-direction: column. - Della21 commented on April 3rd 20 at 18:38
April 3rd 20 at 18:34
Do you want to?
https://jsfiddle.net/z648hf9L/

spoiler

<div class="block">

 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>

</div>


* {
 box-sizing: border-box
}

html
body {
background: #eee;
}


.block {
 display: flex;
 width: 80%;
 margin: auto;
 background: #fff;
}
.item {
 width: 25%;
 height: 200px;
 border: 1px solid deepskyblue;
}
.item:hover {
 flex-basis: 30%;
}

@media (max-width: 600px) {
 .block {
 flex-wrap: wrap;
}
 .item {
 flex-grow: 1;
 width: 40%;
}
 .item:hover {
 width: 60%;
}
}
@media (max-width: 400px) {
 .item {
 width: 100%;
}
 .item:hover {
 width: initial;
}
}

Find more questions by tags CSS