I work out I guess… by Flex Boxin’

Flex Box? Wuz dat?
What is flexbox you may ask? Flexbox allows you to efficiently lay out, align and distribute space in a container when the size (of the screen) is dynamic or unknown! It removes the use of floats, and it won’t collapse with the margins of its contents.


Ez Lief?
Awesome so we get to use more CSS and less of that pesky Javascript! Theres nothing to worry about… WRONG! By using flexbox, make your website’s performance go slower… and slower…. This is especially a problem when the project you are designing for is large-scale!


Gimmie Sample Yah?
flex-direction

.flex-container { 
 -webkit-flex-direction: row; /* Safari */
 flex-direction: row; 
}

“ This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or like columns vertically.”

With row direction the flex items are stacked in a row from left-to-right in ltr context
.flex-container { 
 -webkit-flex-direction: row-reverse; /* Safari */ 
 flex-direction: row-reverse; 
}
With row-reverse direction the flex items are stacked in a row from right-to-left in ltrcontext

flex-wrap

.flex-container { 
 -webkit-flex-wrap: nowrap; /* Safari */ 
 flex-wrap: nowrap; 
}

“ The initial flexbox concept is the container to set its items in one single line. The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.”

Flex items are displayed in one row, by default they are shrunk to fit the flex container’s width
.flex-container {
 -webkit-flex-wrap: wrap; /* Safari */ 
 flex-wrap: wrap; 
}
Flex items are displayed in multiple rows if needed from left-to-right and top-to-bottom

justify-content

.flex-container { 
 -webkit-justify-content: flex-start; /* Safari */ 
 justify-content: flex-start; 
}

“ The justify-content property aligns flex items along the main axis of the current line of the flex container. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.”

Flex items are aligned to the left side of the flex container in ltr context
.flex-container { 
 -webkit-justify-content: space-between; /* Safari */
 justify-content: space-between; 
}
Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container

Legit all my ideas… (jk all credit goes to these sites)
This site called scotch.io helped me a lot to understand how each of the properties work by providing examples of what each one did. CSS3 Tricks and W3Schools also helped me define what flexbox is. Hopefully going off from this, I can make the ultimate laggy website ❤

Show your support

Clapping shows how much you appreciated Zedrick Ara’s story.