There is:

There is a test menu implemented on flexs; you need to press a certain menu item to the left or right edge.

.nav { display: flex; flex-direction: row; background: bisque; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; // ie fix margin: 0; padding: 0; } .nav__item { background: orange; padding: 10px; } 
 <ul class="nav"> <li class="nav__item">Пункт 1</li> <li class="nav__item">Пункт 2</li> <li class="nav__item">Пункт 3</li> <li class="nav__item">Пункт 4</li> <li class="nav__item">Пункт 5</li> </ul>

What happened:

I chose the 3rd item as a test subject, made it extreme through the order and then pressed it to the right margin through the margin-left: auto; .

It works everywhere, but is it correct to solve a problem in this way? Can there be a more competent way?

 .nav { display: flex; flex-direction: row; background: bisque; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; // ie fix margin: 0; padding: 0; } .nav__item { background: orange; padding: 10px; } .nav__item:nth-child(3) { order: 999; margin-left: auto; } 
 <ul class="nav"> <li class="nav__item">Пункт 1</li> <li class="nav__item">Пункт 2</li> <li class="nav__item">Пункт 3</li> <li class="nav__item">Пункт 4</li> <li class="nav__item">Пункт 5</li> </ul>

  • If they do not change dynamically, then I would just wrap items that are on the one hand in a div and made space-between . If some kind of interactive is supposed, then yes order good solution. - Alexandr Tovmach
  • I wanted to find a solution in flexbox like in cssgrid , so that out of the коробки you could change the position of elements without additional костылей . Unfortunately, apparently this is not ... - Mike_Ro

0