Learn CSS Flexbox in 5 Minutes!
Tags: css, html, flexbox
Published: 2021-08-16 11:10:48

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmqezw3fwjcbpetcakq9.jpg)

<p style="text-align: center;">&nbsp;</p><div style="text-align: left;"><span style="font-family: Poppins;"><br /></span></div><p></p><p><span style="font-family: Poppins;"><b>THIS POST WAS WRITTEN BY ME ALSO MY BLOG. YOU MAY READ IT AT <a href="https://codingporium.blogspot.com/2021/08/learn-css-flexbox-in-5-minutes-collab.html" target="_blank">HERE</a></b></span></p><p><span style="font-family: Poppins;">Hey friends, today I'll explain all you need to know to start using a CSS Flex box. Before we dive in, i'll introduce myself.</span></p><div><p><span style="font-family: Poppins;">I'm CodingPorium and I make coding tutorials and provide Free Source Code. I'm a newbie to YouTube, but I have experience in front-end web development for over 3 years. Do check out my YouTube channel at&nbsp;<a href="https://youtube.com/channel/UCLjS1fau8etNm-24r5kgxhQ" target="_blank">here</a>&nbsp;or by searching for CodingPorium on YouTube for more!</span></p><h3 style="text-align: left;"><span style="font-family: Poppins;">Basics</span></h3><p><span style="font-family: Poppins;">Alright, let's dive in to the tutorial now. Flex is a display type that enables cards or any div to appear beside each other in a row. There are certain properties of flex box that make it famous such as it's responsiveness and more. Let's see how to use the basic flex display followed by other properties.</span></p><p><span style="font-family: Poppins;">We first add the HTML code below:</span></p></div>

<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #007700;">&lt;div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"flex-box"</span><span style="color: #007700;">&gt;</span>
  <span style="color: #007700;">&lt;div&gt;</span>1<span style="color: #007700;">&lt;/div&gt;</span>
  <span style="color: #007700;">&lt;div&gt;</span>2<span style="color: #007700;">&lt;/div&gt;</span>
  <span style="color: #007700;">&lt;div&gt;</span>3<span style="color: #007700;">&lt;/div&gt;</span>  
<span style="color: #007700;">&lt;/div&gt;</span>
</pre></div>


<p><span style="font-family: Poppins;">Then, we add the CSS Code below:</span></p>
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #bb0066; font-weight: bold;">.flex-box</span> {
  <span style="color: #008800; font-weight: bold;">display</span><span style="color: #333333;">:</span> flex;
}
<span style="color: #bb0066; font-weight: bold;">.flex-box</span> <span style="color: #333333;">&gt;</span> <span style="color: #007700;">div</span> {
  <span style="color: #008800; font-weight: bold;">background</span><span style="color: #333333;">:</span><span style="color: #007020;">white</span>;
  box<span style="color: #333333;">-</span>shadow<span style="color: #333333;">:</span> rgba(<span style="color: #6600ee; font-weight: bold;">0</span><span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0</span><span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0</span><span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0</span><span style="color: #333333;">.</span><span style="color: #6600ee; font-weight: bold;">24</span>) <span style="color: #6600ee; font-weight: bold;">0px</span> <span style="color: #6600ee; font-weight: bold;">3px</span> <span style="color: #6600ee; font-weight: bold;">8px</span>;
  <span style="color: #008800; font-weight: bold;">margin</span><span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">10px</span>;
  <span style="color: #008800; font-weight: bold;">border</span><span style="color: #333333;">-</span>radius<span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">10px</span>;
  <span style="color: #008800; font-weight: bold;">padding</span><span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">20px</span>;
  <span style="color: #008800; font-weight: bold;">font-size</span><span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">30px</span>;
}
</pre></div><div><br /></div><span style="font-family: Poppins;">The output would look like this:</span><div><span style="font-family: Poppins;"><div class="separator" style="clear: both; text-align: left;"><a href="https://lh3.googleusercontent.com/-U7VhoQ6BgMg/YQtpFUSt3QI/AAAAAAAAAFA/6y2VGJ53vtYaqO-ReYx0HUIZc--FYD7pQCLcBGAsYHQ/image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="672" data-original-width="1366" height="157" src="https://lh3.googleusercontent.com/-U7VhoQ6BgMg/YQtpFUSt3QI/AAAAAAAAAFA/6y2VGJ53vtYaqO-ReYx0HUIZc--FYD7pQCLcBGAsYHQ/image.png" width="320" /></a></div></span></div><div><span style="font-family: Poppins;">If you observe the CSS code, you will understand that we only added display of flex for our flex box. Below it, we styled the boxes by giving them padding,color,and more. The main code necessary here is the </span><span style="background-color: #cccccc; font-family: courier;">display:flex;</span><span style="background-color: white; font-family: Poppins;">&nbsp;Next, we will look on the properties of flex to make it better.</span></div><div><span style="font-family: Poppins;"><br /></span><h3 style="text-align: left;"><span style="background-color: white; font-family: Poppins;">1. Flex Direction</span></h3><div><span style="background-color: white; font-family: Poppins;">The flex-direction property determines whether you would like the flex to arrange from left to right, right to left, top to bottom or bottom to top. Below is the code for all these 4 directions. Row is for horizontal and Column is for vertical.&nbsp;</span></div><div><span style="background-color: white; font-family: Poppins;"><br /></span></div></div>

<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;">   <span style="color: #007700;">flex-direction</span><span style="color: #555555; font-weight: bold;">:row</span><span style="color: #333333;">;</span>
   <span style="color: #007700;">flex-direction</span><span style="color: #555555; font-weight: bold;">:row-reverse</span><span style="color: #333333;">;</span>
   <span style="color: #007700;">flex-direction</span><span style="color: #555555; font-weight: bold;">:column</span><span style="color: #333333;">;</span>
   <span style="color: #007700;">flex-direction</span><span style="color: #555555; font-weight: bold;">:column-reverse</span><span style="color: #333333;">;</span>
</pre></div><div><br /></div><span style="font-family: Poppins;">For an example, I will be using flex-direction:column in the photo below. The output would look like:</span><div><br /></div><div><div class="separator" style="clear: both; text-align: left;"><a href="https://lh3.googleusercontent.com/-3uySrDeAnNU/YQtp_N8XBRI/AAAAAAAAAFI/G2gWJS0PPFofXyNf8JGl4TqgietoQqTngCLcBGAsYHQ/image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="672" data-original-width="1366" height="157" src="https://lh3.googleusercontent.com/-3uySrDeAnNU/YQtp_N8XBRI/AAAAAAAAAFI/G2gWJS0PPFofXyNf8JGl4TqgietoQqTngCLcBGAsYHQ/image.png" width="320" /></a></div><h3 style="text-align: left;"><span style="font-family: Poppins;">2. Flex Grow</span></h3><div><span style="font-family: Poppins;">In this property,we can grow our flex boxes in a row to fill up the row completely if necessary. In other words, it defines how much space each flexbox should take up. For an example, we can make one out of 3 flex-boxes to grow even more longer. A perfect example would be the image below.</span></div><div><span style="font-family: Poppins;"><div class="separator" style="clear: both; text-align: left;"><a href="https://lh3.googleusercontent.com/-WmwZe1VktwU/YQuhrQ2WssI/AAAAAAAAAFQ/zRvYnxbReDgO6C1rYV4P283nPy0NgEIFQCLcBGAsYHQ/image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="672" data-original-width="1366" height="157" src="https://lh3.googleusercontent.com/-WmwZe1VktwU/YQuhrQ2WssI/AAAAAAAAAFQ/zRvYnxbReDgO6C1rYV4P283nPy0NgEIFQCLcBGAsYHQ/image.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">Now that you understand the concept, you will need to add this block of code below to enable it in our CSS file.</div></span></div><br /></div>

<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #007700;">div</span><span style="color: #555555; font-weight: bold;">:nth-of-type</span><span style="color: #333333;">(</span><span style="color: #007700;">1</span><span style="color: #333333;">)</span> {flex<span style="color: #333333;">-</span>grow<span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">1</span>;}
<span style="color: #007700;">div</span><span style="color: #555555; font-weight: bold;">:nth-of-type</span><span style="color: #333333;">(</span><span style="color: #007700;">2</span><span style="color: #333333;">)</span> {flex<span style="color: #333333;">-</span>grow<span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">3</span>;}
<span style="color: #007700;">div</span><span style="color: #555555; font-weight: bold;">:nth-of-type</span><span style="color: #333333;">(</span><span style="color: #007700;">3</span><span style="color: #333333;">)</span> {flex<span style="color: #333333;">-</span>grow<span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">1</span>;}
</pre></div><div><br /></div><span style="font-family: Poppins;">If you set flex grow as 1, it will divide the spaces to be equal with the other boxes.</span><h3 style="text-align: left;"><span style="font-family: Poppins;"><br /></span></h3><h3 style="text-align: left;"><span style="font-family: Poppins;">3. Flex Wrap</span></h3><div style="text-align: left;"><span style="font-family: Poppins;">By default, flexbox will try it's best to fit into one tray/row/collumn. However, we can set extra flexboxes to move down/side into another tray by using the flex wrap property. The image below explains it even more.&nbsp;</span></div><div style="text-align: left;"><span style="font-family: Poppins;"><div class="separator" style="clear: both; text-align: left;"><a href="https://lh3.googleusercontent.com/-UvXIshOGJIE/YQukqgeV9mI/AAAAAAAAAFY/drtsNbV0TkAU7UOwmt8BCbLYhMskWRPmwCLcBGAsYHQ/image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="672" data-original-width="1366" height="157" src="https://lh3.googleusercontent.com/-UvXIshOGJIE/YQukqgeV9mI/AAAAAAAAAFY/drtsNbV0TkAU7UOwmt8BCbLYhMskWRPmwCLcBGAsYHQ/image.png" width="320" /></a></div>Now, for this property, we will just add the following one-line code only. Do remember to remove the flex-grow property before testing this property.</span></div><div style="text-align: left;"><span style="font-family: Poppins;"><br /></span></div>

<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #007700;">flex-wrap</span><span style="color: #333333;">:</span> <span style="color: #007700;">wrap</span><span style="color: #333333;">;</span>
</pre></div><br /><h3 style="text-align: left;"><span style="font-family: Poppins;">4. Flex-flow</span></h3><div><span style="font-family: Poppins;">In this property, the flex-direction and flex-box properties are combined together. The default value of this property is </span><span style="background-color: #cccccc; font-family: courier;">row nowrap</span><span style="font-family: Poppins;"> . The image below is used for an example of </span><span style="background-color: #cccccc; font-family: courier;">flex-flow: column wrap</span><span style="font-family: Poppins;"> .</span></div><div><span style="font-family: Poppins;"><div class="separator" style="clear: both; text-align: left;"><a href="https://lh3.googleusercontent.com/-V-kMEwd9IRY/YQunyUn07hI/AAAAAAAAAFg/UXUVzhX1XfIgKLIFldEy_S6wR33UJt_igCLcBGAsYHQ/image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="672" data-original-width="1366" height="157" src="https://lh3.googleusercontent.com/-V-kMEwd9IRY/YQunyUn07hI/AAAAAAAAAFg/UXUVzhX1XfIgKLIFldEy_S6wR33UJt_igCLcBGAsYHQ/image.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">The code would look like this:</div></span></div>

<div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #bb0066; font-weight: bold;">.flex-box</span> {
  <span style="color: #008800; font-weight: bold;">display</span><span style="color: #333333;">:</span> flex;
  flex<span style="color: #333333;">-</span>flow<span style="color: #333333;">:</span> column wrap;
}
</pre></div><div><br /></div><h3 style="text-align: left;"><span style="font-family: Poppins;">5. Flex</span></h3><div><span style="font-family: Poppins;">Now that you have learned the 4 common properties, you will understand this property pretty well too. This property is a shorthand property (a easier line of code) to execute flexbox properties. By example, we can add the code of </span><span style="background-color: #cccccc; font-family: courier;">flex: 1</span></div><div><br /></div><h3 style="text-align: left;"><span style="font-family: Poppins;">Browser Support</span></h3><div><span style="font-family: Poppins;">Now that you have learnt flexbox, you might feel like using it in all of your projects. However, flexbox is only supported in some browsers. Flexbox works in modern browsers but does not work in Internet Explorer 10 or earlier versions. Thus, you might want to keep that in mind. But besides that, I believe you should definetely try using flexbox.</span></div><div><span style="font-family: Poppins;"><br /></span></div><div><span style="font-family: Poppins;">This tutorial is just on the basics of flexbox. There are many more properties on flexbox. If you're interested for a part 2 of this tutorial, do comment down below or email me at <span style="color: #800180;">codingporium@protonmail.com</span></span></div><div><span style="font-family: Poppins;"><br /></span></div><h3 style="text-align: left;"><span style="font-family: Poppins;">Thank You!</span></h3><div><span style="font-family: Poppins;">If you have any doubts,uncertainties or suggestions, do comment down below or you can email me at <span style="background-color: white;"><span style="color: #800180;">codingporium@protonmail.com</span></span> . I hope this flexbox tutorial was useful for all of you and I would like to thank Code with Random for giving me the chance to write here. I hope to see you all in future posts. Goodbye!</span></div>