Show the flex lines with spaces all around with CSS

---

<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>

• Related Questions & Answers
• Align flex lines with CSS
• Show the flex lines with equal space between them
• Display the flex items with space between the lines in CSS
• Display the flex lines in the center of the container with CSS
• Display the flex lines in the end of the container with CSS
• Display the flex lines at the start of the container with CSS
• Wrap the flex items with CSS
• Create a glow around the object with CSS
• Set the flex items vertically with CSS
• Set the flex items horizontally with CSS
• Set a border around navbar with CSS
• Set the text shadow around a text with CSS
• Avoid wrapping flex items with CSS
• Show the background image only once with CSS
• Wrap the flex items in reverse order with CSS