Логическое оформление последнего ряда элементов только на основе количества элементов в CSS - PullRequest
Новая
       8

Логическое оформление последнего ряда элементов только на основе количества элементов в CSS

0 голосов
/ 17 июня 2020

Я хочу добавить ширину к последней строке элементов на основе количества элементов, присутствующих в последней строке, для этого я написал такой код

Мой пример 

    <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

ul{
     display: flex;
            flex-wrap: wrap;
            margin-right: -1%;
            margin-left: -1%;
            justify-content: center;
            padding: 0;

        li{
          position: realtive;
                width: 100%;
                min-height: 1px;
                margin: 0.5% 1%;
                flex-direction: column;
                display: flex;
                padding: 0;
                max-width: 15%;
                flex: 1 1 160px;
        border:1px solid blue;



                &:nth-child(1n + 1),
                &:nth-last-child(-n+1) ~ li{
                    max-width: 34%;
                }

                &:nth-child(2n + 1),
                &:nth-last-child(-n+2) ~ li{
                    max-width: 29.5%;
                }

                &:nth-child(3n + 1),
                &:nth-last-child(-n+3) ~ li{
                    max-width: 19%;
                }

                &:nth-child(4n + 1),
                &:nth-last-child(-n+4) ~ li{
                    max-width: 19%;
                }
                &:nth-child(5n + 1),
                &:nth-last-child(-n+5) ~ li{
                    max-width: 18.4%;
                }

                &:nth-child(6n + 1),
                &:nth-last-child(-n+6) ~ li{
                    max-width: 15%;
                }
        }
}

Если в последней строке присутствуют два элемента, я хотел бы добавить эти элементы последней строки шириной 34% и соответственно. Пожалуйста, помогите мне с этим, хотите применить ширину только к последней строке элементов в соответствии с количеством представленных элементов.

...