Flexbox "nowrap" value isn't working - html

Question

This is the section of my code that doesn't work:
.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>
Do you know why flexwrap: nowrap; isn't working? My icons are below the span instead of being placed to the right.

Answer 1

It's not working because flex-wrap: nowrap applies to flex items, not the text inside the item. You need to target the text with 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

Answer 2

Just give your copyright class display: inline-block;

Answer 3

Just need a common wrapper such a div and 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>

Answer 4

I just needed to update <p class="copyright"> with <div class="copyright">
Or I could use display:block for the p.copyright

Answer 5

which ever elements or icons you want to see in a line and in order, then place those in a div element which is having flex.
and you dont need flex-wrap property as with proper html order ,just a display:flex property will take care of most of the things
See here https://jsfiddle.net/b6vw9t2y/38/
<div style='display: flex'>
<i>icon1></i>
<i>icon2</i>
<i>icon3</i>
</div>
output: icon1 icon2 icon3
go through below link for flexbox basics , its understandable and it will surely makes ur life much easier when u get the grip of flexbox
https://www.w3schools.com/css/css3_flexbox.asp