How do we get started?
Well we need a container. Something that is going to point to the code inside of it and say, “hey, the children here can be handled with flexbox.” Simply enough we assign a class or id to the parent and declare the following CSS.
.<yourClassName> { display: flex; }
Great! You’ve got a flexible container.
Attributes you can apply to your flex container + and short description.
flex-direction => determines which direction the container is going to connect the children of the flex-container. column for example will stack them vertically. *row is default
flex-wrap => states whether the items should wrap or not. The magic really starts to happen here since it will change with screen resize ( the flex in flexbox *default is nowrap
flex-flow => Shorthand property for setting both the flex-direction and flex-wrap properties. Something like this flex-flow: row wrap which would connect the items horizontally and wrap them if needed
justify-content => used to for horizontal alignment of the children of your flex container. The most common one I use is center
align-items => used for the vertical alignment of the children of your flex container. Center is my most common here as well assuming the container is tall enough that we are worried about vertical alignment.
align-content => ( the most confusing for me to wrap my head around ) Handles the alignment of the children of the flex container and the spacing in between them. For example if you have a square container and you had three children divs. If you want them all on the top and the white space on the bottom you should choose flex-start if you wanted some space at the top and bottom as well as in between you should choose space-around ( this ) is a link to css-tricks where they have a great graphic explaining the different options and how they work.
So, what can we do with the stuff inside of the container? ( we’ll call them flex items )
The great news here is that all children of an element that has been made a flex-container are automatically flex items. We don’t need to assign a property to each of them to get it to work. There are still some special things that we can do with flexbox.
order => can be used to change the order of the flex items inside of the container. By default they are laid out in the order they are presented in the code. If you want to change that you can set it manually on each item. The value is an integer.
flex-grow => Used to determine how much a flex item will grow in relationship to the other flex items inside of the container. Value must be a number and the default is 0. For example if you want something to take up twice as much space as other items you would set it to 2 when the other items are set to 1
flex-shrink => ( shameless copy and paste of the flex-grow but with shrink; it does the same but in reverse. ) Used to determine how much a flex item will shrink in relationship to the other flex items inside of the container. Value must be a number and the default is 1. For example if you want something to take up half as much space as other items you would set it to 0 when the other items are set to 1
flex-basis => specifies the initial length of a flex item. Can be done with pixels, auto, and em values for specific widths or sizing keywords fill max-content min-content fit-content
flex => shorthand for the flex-grow, flex-shrink and flex-basis properties. Might look something like this. flex: 2 0 200px
align-self => specifies the alignment for the item inside of the flexible container. ** this is going to override any alignment set by the containers align-items.
There are lots of great resources out there regarding flexbox and this is only the tip of the iceberg when it comes to understanding what flexbox is capable of. I’ve linked to a few of the better resources i’ve found, but definitely take the time to make a <div> container with a bunch of <div>s inside of it and start messing with them individually. An image gallery for say a faux photography site would be an awesome project to build with it as well.
Happy Hacking!
Resources:
In case you would like to connect and chat more about code, woodworking, cooking, wine, you know that sort of stuff. I’m new to the development world so I’m always looking to connect with new people and learn from each other.
