There is an example of layout. When the window is resized, everything, as it should be, for the <a> tags, the width changes and their number on the line changes.

But if the last line of <a> elements is less than in the previous lines, then these elements are stretched.

Is it possible to make so that in the last line the width of <a> matches the elements from the previous lines.

PS For clarity. Now, as in the red blocks, I would like as in the green enter image description here

PSS With the help of JS, I know how to do this, it is precisely CSS that interests me.

 B.addEventListener("click", add); C.addEventListener("click", take); function add() { A.style.width = A.offsetWidth + 50 + "px"; } function take() { A.style.width = (A.offsetWidth - 50) + "px"; } 
 .work { display: flex; min-width: 67.5em; max-width: 96em; min-height: 55em; /*-----*/ font-size: 4px; padding: 3.75em; background-color: hsla(0, 0%, 100%, 0.7); box-sizing: border-box; } .faculty { display: block; /*-----*/ background-color: #F0E68C; } .container_link { display: flex; flex-direction: row; flex-wrap: wrap; } a { min-width: 5em; flex: 1; display: block; /*-----*/ font-size: 2.25em; margin: 1.3em 0.5em 0; background-color: hsla(0, 0%, 90%, 1); text-decoration: none; border: 1px dashed #3B8686; padding: 0.83em; } 
 <button id="B">+ Width khaki</button> <button id="C">- Width khaki</button> <div id="A" class="work"> <div class="faculty" id="GF"> <div class="container_link"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> </div> </div>

  • You can poporbovat prisobachit column ... - Qwertiy ♦
  • 2
    And how wide the block will change on the project? Using js or in a natural way. If in a natural way, then you can try to do in using calc () and media expressions. - dmitryshishkin
  • Naturally with js. For now, just js looks at the size of the first link and all links whose width is higher is set to max-width equal to the width of the first link. But this is in my opinion quite a crutch. - Jarry Roxwell
  • 2
    I think otherwise it will not work out exactly until css can take values ​​from the parent (or neighboring) selector and use it. So far, you can really attach to the size of the viewport and use a media expression. More simply there is nothing to tie. Well, or look for a solution in the grids, although they, it seems, are not about that. - dmitryshishkin

2 answers 2

What you want to achieve with pure CSS is possible, but the flexbox will not help here, because it is one-dimensional and is not suitable for a full mesh. Use for this display: grid , and for browsers that do not support, slip your JS solution.

Here is a small example of a grid; even media expressions are not needed (expand to full screen and move the edge of the browser):

 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px 10px; background-color: black; } .grid__item { background-color: red; height: 40px; } 
 <div class=grid> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> <div class=grid__item></div> </div>

Your link has a flex: 1 property, which means that the block will be stretched or compressed as soon as space allows.

 flex: 1; => flex: 1 1 auto;

by specification it

 flex: flex-grow flex-shrink flex-basis;

If flex-grow is equal to 1, then it allows the block to stretch as you like. 0 - prohibits. Also for flex-shrink, only he is responsible for block compression. flex-basis is the default width depending on the settings.

You just need to add this property to the link:

 flex-grow: 0;
  • 2
    But they have to stretch. He wants the last line to be the same width, but stretched in full lines. - Qwertiy ♦
  • Not that @Qwertiy understood everything correctly, but if you add flex-grow: 0; , then they will not be pulled, and their width will be in content or at least 5em - Jarry Roxwell
  • It is not clear what you want. The pictures clearly indicate that the blocks do not stretch. The fact that in one case in row four in another is five blocks, this does not mean stretching them (css is not a programming language) but that you clearly indicated how many blocks fit in a line. for example, setting them relative width in calc (25% - margin). If you want the blocks themselves to calculate the optimal number of themselves and the size, then with only a different width of the parent block, it is only js. Bypasses in the CSL are tied to a hard number of blocks in width. - Olga Kramarchuk
  • 3
    With a different width of the parent block, the blocks themselves calculate the optimal number of themselves and the size, with this marking and without js. But if the block moves to the next line and it is in it alone, then the block is stretched to the entire free space. And this block stretched over the whole line and I want to compress to the size of all the other blocks preceding it. - Jarry Roxwell