Значение Flexbox "nowrap" не работает - PullRequest
Новая
       12

Значение Flexbox "nowrap" не работает

0 голосов
/ 26 июня 2018

Это раздел моего кода, который не работает: 

.copyright {
  display: flex;
  flex-wrap: nowrap;
  /* This is not working */
  color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
  </li>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </li>
</span>
<br><br>
<p class="copyright">
  <span>I want this left from icons</span>
  <span>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
   </li>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </li>
  </span>
</p>

Знаете ли вы, почему flexwrap: nowrap; не работает? Мои значки находятся ниже промежутка, а не расположены справа.

Ответы [ 5 ]

0 голосов
/ 26 июня 2018

какие элементы или значки вы хотите видеть в строке и по порядку, затем поместите их в элемент div, имеющий flex. и вам не нужно свойство flex-wrap, как при правильном порядке html, просто свойство display: flex позаботится о большинстве вещей

Смотрите здесь https://jsfiddle.net/b6vw9t2y/38/
<div style='display: flex'> <i>icon1></i> <i>icon2</i> <i>icon3</i> </div> вывод : icon1 icon2 icon3

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

https://www.w3schools.com/css/css3_flexbox.asp

0 голосов
/ 26 июня 2018

Это не работает, потому что flex-wrap: nowrap применяется к гибким элементам, а не к тексту внутри элемента. Вам нужно нацелить текст с помощью white-space: nowrap. 

.copyright {
     display:flex;
     flex-wrap: nowrap;   /* will prevent flex items on the same line from wrapping */
     white-space: nowrap; /* will prevent text from wrapping */
}

jsFiddle demo

0 голосов
/ 26 июня 2018

Просто укажите свой класс авторского права display: inline-block;

0 голосов
/ 26 июня 2018

Просто нужна обычная обёртка, такая как div и display flex 

div {
display: flex;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </li>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
 </li>
</span>
<br><br>
<p class="copyright">
  <div>
    <span>I want this left from icons</span>
    <span>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </li>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
 </li>
</span>
  </div>

</p>
0 голосов
/ 26 июня 2018

Мне просто нужно обновить <p class="copyright"> с <div class="copyright">

Или я мог бы использовать display:block для p.copyright

...