CSS Flex - Basic

<style> .wrapper{ display: flex; justify-content: space-around; } .wrapper .block{ width: 100px; height: 100px; background-color: rgb(200,44,54,0.4); border: red 2px solid } </style> Justify Content: Space Around

<pre data-lang="CSS"><code>&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;

&lt;style&gt; .wrapper{ display: flex; justify-content: space-around; } .block{ width: 100px; height: 100px; background-color: rgb(200,44,54,0.4); border: red 2px solid } &lt;/style&gt;</code></pre> <style> .wrapper2{ display: flex; height: 500px; justify-content: space-between; align-items: center; } .wrapper2 .block{ width: 100px; height: 100px; background-color: rgb(200,44,54,0.4); border: red 2px solid } </style> Justify Content: Space Between Align Items: Center <pre data-lang="CSS"><code>&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;style&gt; .wrapper2{ display: flex; height: 500px; justify-content: space-between; align-items: center; } .wrapper2 .block{ width: 100px; height: 100px; background-color: rgb(200,44,54,0.4); border: red 2px solid } &lt;/style&gt;</code></pre>