Flexbox

About Flexbox

Flexbox is a code on CSS that allows you to organize a website. Flexbox is an easier way of using float or positioning. Some browsers that support flexbox are Google Chrome, Safari, and Firefox.

Flexbox Elements:

• flex-direction: defines the direction the container wants to stack the flex items you create

• flex-wrap: specifies whether the item you want is going to be wrapped or not

• flex-flow: is a shortened way to perform or set both the flex-direction and flex-wrap properties

• justify-content: horizontally aligns flex items
  align-items: Vertically aligns the flex items

• align-content: Flex-wrap property's behavior can be modified using this

• flex-flow: flex-direction and flex-wrap shortened property

• order: Specifies the order of a flexible item according to the ret of the items in the container you created

• align-self: Container's align property can be overwritten by using this property.

• flex: flex-grow, flex-shrink, and the flex-basis properties shortened way of doing

Example of Flexbox (Made on Figma)

Example of Flexbox used on a Website

I was asked to create a website using flexbox. Before coding the website I created a template on Figma to guide me. I used flexbox instead of float to align the photos, align the navbar, and align the boxes with content.

Body Container

I created a simple body container containing information about the player:

Html of the Container

<div class="body-container">
    <div class="body-info"><h1>Michael Jordan</h1>
     <br></br></br> <p> Championships: 6<br></br>Years in NBA: 15<br></br>Teams played for: Chicago Bulls, Washington Wizards </p>
    </div>
    <div class="body-info"><h1>Lebron James</h1><br></br></br><p>Championships: 4<br></br>Years in NBA: 17<br></br>Teams played for: Miami Heat, Cleveland Cavailers, Los Angelos Lakers</p></div>
    <div class="body-info"><h1>Kareem Abdul-Jabbar</h1><br></br></br><p>Championships: 6<br></br>Years in NBA: 20<br></br>Teams played for: Milwaukee Bucks, Los Angelos Lakers<p></div>
    <div class="body-info"><h1>Bill Russel</h1><br></br></br><p>Championships: 11<br></br>Years in NBA: 13<br></br> Teams played for: Boston Celtics</p></div>
  </div>

CSS of the Container

.body-container{
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: flex-end;
 height: 350px;
 color: black;
}

To display all the text on the CSS you have to use, display: flex;. I used flex-direction: row; to make the boxes align horizontally across the website. If you create the boxes without using justify-content: space-evenly;. it creates the boxes without being evenly spaced. By using align-items: flex-end;, you can place containers at the end of a specified height.

Flexbox on Images

I used four images of the basketball players I described in the container.

Html used for the Images

<div class="body-images">
     <div class="body-img" id="img1"></div>
     <div class="body-img" id="img2"></div>
     <div class="body-img" id="img3"></div>
     <div class="body-img" id="img4"></div>
   </div>

CSS used for the Images

.body-images {
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 height: 450px;
}

To display all the images on the CSS you have to use, display: flex;. Then after writing display: flex; I added justify-content: space-evenly; align-items: center; this allows the images to be spaced evenly and center on your website.

End result after using Flexbox

Conclusion

In conclusion, I hope by seeing this blog it will help you better understand how to properly use flexbox next time you code. By using flexbox it makes centering things on your website easier and faster rather than using float.

Resources

https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css3_flexbox_responsive.asp
https://repl.it/@NicholasGuzman/Flexbox-Website#index.html
https://www.figma.com/file/gDaYzw81T4mYot804nDtNN/Flexbox-Website?node-id=0%3A1