1

Прошу помощи. Мне необходимо сделать вертикальное меню (видимо flex, по иному не знаю как), которое по высоте контейнера переносится во вторую колонку. Я сделал вот такой вот вариант, но мне необходимо, чтобы при уменьшении ширины браузера (читай, родителя) элементы флекс контейнера тоже ужимались. Как это сделать (без джс конечно, нативным css)? max-width, min-width что то не спасли

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 30em;
}

li {
  background: gray;
  width: 504px;
  min-width: 100px;
  height: 5em;
  margin: .5em;
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

0

1 ответ 1

3

Возможно я вас неправильно понял, но, возможно, вы что-то типа такого хотели сделать?

Как это работает:
Допустим, мы хотим, чтобы по умолчанию у нас 3 элемента по линии шли, каждый из них будет занимать 100%/3 ширины. Это если у нас не будет внешних отступов от элементов, если будут отступы между этими элементами, то надо будет из ширины вычитать эти отступы.
Чтобы сделать отступы, чтобы элементы друг друга отодвигали, нужно каждому не третьему элементу сделать отступы справа margin-right, допустим 10px, это записывается так:

ul > li:not(:nth-child(3n)) {
    margin-right: 10px;
}

Эта запись означает: в ul найти на первом уровне вложенности все теги li, которые не являются n*третьим ребенком.

Кроме отступов, нам нужно сделать правильную ширину, она запишется так:

ul > li:not(:nth-child(3n)) {
    margin-right: 10px;
}

ul > li {
    width: calc(100%/3 - 20px/3);
}

Ширина = 100% / кол-во элементов в линии - сумма всех отступов в линии / кол-во элементов в линии

Таким образом, мы в ширину вместим эти отступы, распределим эти отступы равномерно по ширине каждого элемента в линии.

На этом всё не заканчивается, нужно ещё сделать адаптивности.

Чтобы сделать 2 элемента в линии, нужно:

  1. Пересчитать высоту по нашему правилу
  2. Обнулить margin-right у каждого не n*третьего элемента
  3. Сделать margin-right у каждого не n*второго элемента
@media (max-width: 600px) {
    ul > li {
        width: calc(100%/2 - 10px/2);
    }

    ul > li:not(:nth-child(3n)) {
        margin-right: 0;
    }

    ul > li:not(nth-child(2n)) {
        margin-right: 10px;
    }
}

И тоже самую логику надо будет сделать для элементов, когда они в линию будут идти по одному, т.е. 100%.

Как вы понимаете, то здесь явно видна логика и притом математически это всё легко описывается. Поэтому я создал CSS переменные, которые отвечают за отступ справа, и кол-во элементов в линии. И уже не придётся это всё просчитывать в голове, можно просто поменять переменную.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

ul>li {
  --marginRight: 10px;
  --marginBottom: 15px;
  --elements: 3;
  background: gray;
  padding: 10px;
  margin-bottom: var(--marginBottom);
  width: calc( 100% / var(--elements) - ( ((var(--elements) * var(--marginRight)) - var(--marginRight)) / var(--elements)));
}

ul>li:not(:nth-child(3n)) {
  margin-right: var(--marginRight);
}

@media(max-width: 600px) {
  ul>li {
    --elements: 2;
  }
  ul>li:not(:nth-child(3n)) {
    margin-right: 0;
  }
  ul>li:not(:nth-child(2n)) {
    margin-right: var(--marginRight);
  }
}

@media(max-width: 300px) {
  ul>li {
    --elements: 1;
  }
  ul>li:not(:nth-child(2n)) {
    margin-right: 0;
  }
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.