andead
@andead
друпал девелопер

Как в flexbox сделать ширину элемента равной ширине контента?

Есть меню на флексах:

<ul>
  <li>Itemitemitemitemitem itemitemitemitemitem 1</li>
  <li>Itemitem 2</li>
  <li>Itemitem 3</li>
  <li>Itemitem 4</li>
  <li>Itemitem 5</li>
</ul>


ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  margin: 2px;
  padding: 5px 10px;
  background: #E1E1E1;
}


https://jsfiddle.net/xandeadx/fLj9s3ug/14/

Когда элементам не хватает ширины текст в них переносится на новую строку и получается такая картина:

5dcab5aa5879a505276687.png

Вопрос - как сделать так, чтобы длинные элементы правильно рассчитывали ширину (не прописывая ширину отдельных элементов):

5dcab5ddb67b3955593558.png
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 3
IceRD
@IceRD
предложу добавить для li flex:1
https://jsfiddle.net/ucsox3m8/
Ответ написан
Igor_307
@Igor_307
Фрилансер
если я правильно понял, так

li:first-child{
    white-space: nowrap;
}

https://jsfiddle.net/kbag0j9h/
Ответ написан
Natalia_ai
@Natalia_ai
люблю вёрстку
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы