𝐖𝐡𝐚𝐭 𝐢𝐬 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

• Allows you to organize information smoothly
• Is used for small scale layouts
• Is not at all complicated to use

𝐇𝐨𝐰 𝐭𝐨 𝐬𝐭𝐚𝐫𝐭 𝐮𝐬𝐢𝐧𝐠 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

1. the first thing you wanna do first in order to start using a flexbox is define it
2. in HTML you will first need to give a div a class which you can name it whatever fits you but for right we will call the class flexbox
3. Then in CSS you will put .flexbox {} and in the braces you will put display: flex; which will start your flexbox
4. If done correctly you will see just the things you put in your div in a row which will mean you are on a good start from there you can add more to your flexbox to give it more caliber
5. Some simple tags you could use to make your flexbox more pronounce instead of just having the things you put in your div in a row are background-color: black; , margin: 20px padding:, 20px font-size: 50px; these tags will be put in CSS and would just give your flexbox more characteristics and if done correctly should look like this

𝐅𝐥𝐞𝐱𝐛𝐨𝐱 𝐭𝐚𝐠𝐬 𝐭𝐨 𝐞𝐧𝐡𝐚𝐧𝐜𝐞 𝐲𝐨𝐮𝐫 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

• Now that you have a basic understanding of how to operate your flex here are some tags you can use to better it align
• flex-direction allows you to change direction of info
• flex-wrap makes it so if your info doesn't fit into one line it goes onto the next so that it looks more neat
• flex-flow is a short cut which lets you control both direction and whether to wrap or not
• justify-content lets you control where the info goes in your flexbox
• align-items is similar to justify content but allows you to control where the info goes on the cross axis instead of the main axis
• align-content allows you to control the flex lines and how info is placed

𝐂𝐒𝐒 𝐅𝐥𝐞𝐱𝐛𝐨𝐱 𝐞𝐱𝐚𝐦𝐩𝐥𝐞

Made in Figma

Me and my partner made our sample like this because we knew we anted to show what we could do with flexbox so we made website based off of a European food recipe website and we wanted to make this website simply using flexbox

Example after being made in HTML, CSS

and this is how it turned out

𝐖𝐡𝐲 𝐲𝐨𝐮 𝐬𝐡𝐨𝐮𝐥𝐝 𝐮𝐬𝐞 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

You should use flexbox because it is so easy to use. It's so easy that it took only two weeks for me and my partner to already start using and implementing flexbox into our websites. Not to mention the fact flexbox is used frequently in professional websites so really there is no reason you should use flexbox for your website.

𝐇𝐨𝐰 𝐦𝐞 𝐚𝐧𝐝 𝐦𝐲 𝐩𝐚𝐫𝐭𝐧𝐞𝐫 𝐜𝐫𝐞𝐚𝐭𝐞𝐝 𝐨𝐮𝐫 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

It did take us some time but after understanding the gist of it we figured what was best to make our website look like a European based recipe website

<div class="recipe-gallary">
    <div class="recipe-card">
      <img src="./Images/Crepes.jpg" alt="">
      <div class="recipe-info">
        The best crepes in all of France!
        <a href="https://www.delish.com/cooking/recipe-ideas/recipes/a52114/easy-basic-crepe-recipe/">recipe</a>
      </div>
    </div>

after getting our pictures, links and putting them all into divs and classifying them we move on to the CSS

.recipe-gallary{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
}
.recipe-card{
  display: flex;
  flex-direction: column;
  height: 450px;
  width: 400px;
  background-color:black;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 10px 15px;
}

In the CSS we used flex tags to help the recipe-gallery which affected all photos and we used flex items to help individual info in recipe-cards

𝐂𝐨𝐧𝐜𝐥𝐮𝐬𝐢𝐨𝐧

Flexbox is a fantastic and easy to use tag which can be used and is used in so many websites and can format things easily and make your website look professional in just a few tags. This is one tag I know me and my peers will be taking advantage of any chance we get so that our websites will look as clean as possible I hope this blog helps convince to do the same.

Websites used

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp