I make tags for the site. Previously used display: inline-block

enter image description here

But it is necessary that the alignment was not on the left but in width. This can be done using flexbox.

 .myclass { display: flex; flex-wrap: wrap; justify-content: space-between; }

But the problem is that the last line does not look nice with justification:

enter image description here

And if, instead of justify-content: space-between use justify-content: flex-start , then there will be no more justification when decreasing the resolution:

enter image description here

Question : Is it possible to access the last line in flexbox? I need alignment to be in width, and in the last line on the left side. The solution can be implemented using javascript

Everything turned out thanks to the answer of the user Vadim Ovchinnikov , for which he thanks a lot. Here is what I needed: enter image description here

2 answers 2

The same as the @Qwertiy answer without

 div:after { content: ""; display: inline-block; width: 100%; } 

 div { text-align: justify; } span { display: inline-block; border: 1px solid; padding: .25em; border-radius: .5em; margin-top: .5em; } 
 <div> <span>Assembler</span> <span>C</span> <span>C#</span> <span>C++</span> <span>CorelDraw</span> <span>HTML & CSS</span> <span>Java</span> <span>JavaScript</span> <span>Microsoft Office</span> <span>Pascal</span> <span>Photoshop</span> <span>PHP</span> <span>Sketch</span> <span>SQL</span> <span>База данных</span> <span>Графика</span> </div>

  • Yes, this is exactly what I need, when reducing the resolution or adding more tags, the alignment will be the width of the parent block, and the last line is aligned on the left side. Thank you so much - Abmin
  • Yes, not at all :) It was nice to help you. - Vadim Ovchinnikov

 div { text-align: justify; } span { display: inline-block; border: 1px solid; padding: .25em; border-radius: .5em; margin-top: .5em; } div:after { content: ""; display: inline-block; width: 100%; } 
 <div> <span>html</span> <span>css</span> <span>верстка</span> <span>flexbox</span> <span>html</span> <span>css</span> <span>верстка</span> <span>flexbox</span> <span>html</span> <span>css</span> <span>верстка</span> <span>flexbox</span> <span>html</span> <span>css</span> <span>верстка</span> <span>flexbox</span><!-- no spaces here --></div>

  • The fact that you did it, I showed in screenshot 2, the problem is that the last row was aligned not so much as the width, but to the left - Abmin
  • @Abmin, well, it was a little uneven, but certainly not on the left. Corrected. i.stack.imgur.com/1faS6.png - Qwertiy ♦
  • @Qwertie, in screenshot # 2, I have not along the left edge, but like you. This is on the screenshots # 1 and # 3 on the left. But anyway, thanks for the effort - Abmin
  • @Abmin, I finally read the question carefully. I specifically did the alignment to the width. It is necessary to remove the rule for div:after , then the last line will be along the left edge. - Qwertiy ♦