Блог

Главная - Вопросы по программированию - Гибкие элементы и разрывы строк

Гибкие элементы и разрывы строк

#css #flexbox

#css #flexbox

Вопрос:

У меня есть этот макет (проверьте в codepen) с этим кодом:

HTML:

 <div class="line-up">

  <!--line up list-->
  <ul class="line-up__list">

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha"><strong>Anetha</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone amp;amp; Shlømo présentent Luxor (Live) "><strong>Antigone amp;amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure"><strong>Bonaventure</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel"><strong>Ciel</strong></a></li>
  </ul>
</div>

SCSS:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;

  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;

  line-height: 1.45;

  //decoration element
  amp;:after {
    margin-left: 3px;

    font: {
      size: 25px;
    }

    content: '•';
  }

  amp;:last-child {

    amp;:after {
      display: none;
    }
  }
}

//line up links styles
a.line-up__link {

  //bigger item styles
  strong {
    display: inline-block;
    margin: 0 3px;

    font: {
      size: 19px;
    }

    amp;:first-child {
      margin-left: 0;
    }
  }
}
  

 @charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}

.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
}

.line-up__item:last-child:after {
  display: none;
}

a.line-up__link strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 19px;
}

a.line-up__link strong:first-child {
  margin-left: 0;
}  
 <div class="line-up">

  <!--line up list-->
  <ul class="line-up__list">

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha"><strong>Anetha</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone amp;amp; Shlømo présentent Luxor (Live) "><strong>Antigone amp;amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure"><strong>Bonaventure</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel"><strong>Ciel</strong></a></li>
  </ul>
</div>

Проблема в длинной ссылке, которая просто не разрывается и оставляет много пустого места:
введите описание изображения здесь И я просто хочу, чтобы этот текст разбивался на 2 строки без <br> тега или чего-то еще, потому что этот макет должен быть адаптивным. Есть ли какой-либо способ сделать ссылку разрываемой?

Ответ №1:

Просто создайте свои элементы inline и удалите flexbox. Вы не можете достичь желаемого с помощью flexbox, поскольку ваши элементы являются элементами уровня блока:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  list-style-type: none;
}

.line-up__item {
  display: inline;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}
.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
  vertical-align:middle; /*added this too*/
}
.line-up__item:last-child:after {
  display: none;
}

a.line-up__link strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 19px;
}
a.line-up__link strong:first-child {
  margin-left: 0;
}  
 <div class="line-up">

      <!--line up list-->
      <ul class="line-up__list">
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha"><strong>Anetha</strong></a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone amp;amp; Shlømo présentent Luxor (Live) "><strong>Antigone amp;amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure"><strong>Bonaventure</strong></a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel"><strong>Ciel</strong></a></li>
      </ul>
    </div>