Show the flex lines with spaces all around with CSS

CSSWeb DevelopmentFront End Technology

<p>Use the<em>&nbsp;align-content</em> property with value <em>space-around&nbsp;</em>to add space around the flex lines.</p><p>You can try to run the following code to implement the <em>space-around</em> value</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/4JPfpI" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.mycontainer { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #884EA0; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-content: space-around; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.mycontainer &gt; div { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #00FF00; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 60px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 5px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Queue&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;mycontainer&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q1&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q2&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q3&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q4&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q5&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q6&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q7&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q8&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 25-Jun-2020 07:30:43

Advertisements