Как добиться Wordwrap элементов списка в макете Flexbox - PullRequest
Новая
       20

Как добиться Wordwrap элементов списка в макете Flexbox

0 голосов
/ 16 сентября 2018

Вот как выглядят элементы по моему вопросу на данный момент: Макет Flexbox

Я хочу добиться того, чтобы текст внутри элементов неупорядоченного списка был перенесен на следующую строку, если он слишком длинный. Теперь происходит то, что весь список переходит в новую строку (см. 2-й пример на связанном изображении).

Я хочу, чтобы список оставался прямо рядом с изображением в той же строке (до тех пор, пока не будет достигнут какой-либо медиа-запрос, который будет разрываться с flex-direction: column).

Любые возможные решения? 

.team-row {
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-flow: row wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-flow: row wrap;
  margin-top: 1em;
  border: 1px solid #efefef;
  padding: 5px;
}

.team-header {
  padding: 8px;
  background-color: #F6B80B;
  width: 100%;
}
<div class="team-row">
  <strong class="team-header">Wolfgang Niepel</strong>
  <img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/image.png" alt="Wolfgang Niepel" width="100" height="133">
  <ul class="team-description">
    <li>Fahrlehrer seit: 1964</li>
    <li>selbstständig seit: 1968</li>
    <li>sonstiges: Gründung der Fahrschule Niepel am 01.12.1968.</li>
  </ul>
</div>

<div class="team-row">
  <strong class="team-header">Jens Niepel</strong>
  <img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/jens_niepel_100.jpg" alt="Jens Niepel" width="100" height="133">
  <ul class="team-description">
    <li>Fahrlehrer seit: 1983</li>
    <li>bei Fahrschule Niepel seit: 1983</li>
    <li>sonstiges: Seit 2001 leite ich unser Büro und bin Ihr Ansprechpartner zu allen Fragen rund um Ihre Ausbildung.</li>
  </ul>
</div>

1 Ответ

0 голосов
/ 16 сентября 2018

Добавить flex: 1; к .team-description.

Это установит: 

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
...