flex-shrink не обновляет ширину элемента

Question

Обновление: Я думаю, что нет простого решения, если мне придется использовать flexbox. Я просто использую «flex-shrink: 0» и использую медиа-запросы для настройки дизайна. В любом случае, спасибо за вашу помощь.

У меня есть горизонтальный список (display: flex) с несколькими элементами. Когда я уменьшаю размер окна, элементы списка начинают уменьшаться. К сожалению, ширина элементов практически не меняется. Элементы li занимают слишком много места. Я хочу, чтобы размер элемента li соответствовал содержанию. Если я добавлю «flex-shrink: 0» к элементу li, ширина будет правильной, но мне нужна эта переноска слов.

Как это исправить?

С flex-shrink: 0

С flex-shrink: 1

#categories ul {
    border-top: 1px solid lightgrey;
    display: flex;
    margin: 0 0 -1px 0;
    padding: 7px 0 0 0;
}

#categories li {
    padding: 0 0 7px 0;
    margin-right: 15px;
    list-style-type: none;
}

<nav id="categories">
                <ul>
                    <li><a href="#">

Спасибо и всего наилучшего, Марк

Answer 1

Помните, что свойство flex-shrink устанавливает flex-shrink элемента гибкого контейнера. Таким образом, элементы будут сжиматься, чтобы соответствовать контейнеру, если они больше, чем размер контейнера. В вашем случае, я думаю, что установка flex-shrink в 2 приведет к переносу слов, как вы и просили. Проверьте этот фрагмент кода. Надеюсь, это поможет!

function myFunction(val) {
  document.getElementById("example-element").style.flexShrink = val;
}

* {
  font-family: arial;
}

.buttons-section {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
}

.example-container {
  background-color: #eee;
  border: .2em solid;
  padding: .75em;
  border-radius: 10px;
  width: 70%;
  margin-left: 20px;
  max-height: 300px;
  display: flex;
}

.example-container>div {
  margin: 10px;
}

.first-solution>div {
  background-color: rgba(0, 255, 0, 0.2);
  border: 3px solid green;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}

p {
  margin-left: 20px;
}

small {}

.second-solution {
  flex: 1 1 0;
  justify-content: space-evenly;
}

.second-solution>div {
  background-color: rgba(255, 0, 0, 0.2);
  border: 3px solid red;
  text-align: center;
}

.third-solution {
  flex-wrap: wrap;
}

.third-solution>div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  flex-basis: 100px;
  text-align: center;
}

<section class="buttons-section">
  <div>
    <pre><code>flex-shrink: 0;

Применить

flex-shrink: 1;

Применить

flex-shrink: 2;

Применить

Я сжимаюсь

Пункт второй Пункт третий

Добавлены дополнительные примеры после первого комментария. Не стесняйтесь изменить размер экрана, чтобы увидеть поведение?

Все элементы одинакового размера, контейнер с flex: 1 1 0;
Добавлено justify-content: space-evenly; который помогает распределить дополнительное свободное пространство

Элемент один

Элемент два

Элемент три

Предложение: использование flex-wrap: wrap; на контейнере, так что предметы всегда будут соответствовать контейнеру

Элемент один

Элемент два

Элемент три