CSS Flexbox Survival Guide
CSS Flexbox is one of the more important tools you will need as a front-end developer. Flexbox is going to be used one-dimensionally, which means it will go in one direction (left to right, right to left, top to bottom, or bottom to top). In this blog, I will quickly go over the properties of the flexbox container.
Main-axis
This means the direction that the flexbox is going.
Cross-axis
This means the axis that is perpendicular to the main axis.
Flexbox Container/Parent Element
For your parent element or the flexbox container, you will need to have certain properties to use flexbox, this includes the display, flex-direction, flex-wrap, flex-flow, justify-content, and align-items. Now let’s take a look at each one!
display
Using the display property and setting it to flex is what you need to define a flex container so that it will enable the other flex properties to be used for its children
flex-direction
This property is how you get your flexbox to go in the direction that you want it to. You will be using the following to get the specific direction you would like.
row: if you want it to go left to right.row-reverse: if you want it to go right to left.column: if you want it to go top to bottom.column-reverse: if you want it to go bottom to top.
flex-wrap
This property will allow you to get your items to wrap in either in single or multiple lines, by default flexbox will try to fit all your flex items in a single line. To change this, you can assign specific values.
nowrap: which will have all your flex items be on one line.wrap: This will allow your flex items to be on multiple lines from top to bottom.wrap-reverse: This will allow your flex items to be on multiple lines but from bottom to top.
flex-flow
This is the shorthand way to do both flex-direction and flex-wrap, all you need to do is specify the direction you would like first, then the flex-wrap you would like. By default, this property will be assigned as row nowrap.
Justify-content
This property is used to align the items within the container along the main axis. Some of the values you can assign are the following.
flex-start: items will be aligned and packed to where the flexbox container starts.flex-end items will be aligned and packed to where the flexbox container ends.center: centered within the flexbox container.space -between: items will be evenly spaced within the line, having the first item on the start and the last item on the end.space-around: items will be evenly spaced around the item.
align-items
This property is used to align the items within the container along the cross axis. It has some similar values to justify-content (flex-start, flex-end, and center). However, they have a couple of different values that we will go over.
stretch: will stretch to fill the containerbaseline: will align items so the baseline is aligned (baseline means where the text sits).
Conclusion
This wraps up the quick survival guide for the container of flexbox! Next week I will be writing about the children properties!
