This blog is late. I was supposed to blog yesterday but it was a very busy day.
Anyway, coincidentally, there was a theme on my coding journey yesterday. I attend a class from the New York Public Library twice a week. Today we talked about flexbox in class. Although I came across flexbox before, I never really took the time to look into it further until today.
It was coincidental because the project for JS30 today was on making flexpanels using flexbox.
I watched the JS30 video, as always, to get an idea of how to tackle this project. After that, I started building it from scratch. However, at some point, I found myself copy/pasting a lot of stuff.
I wasn’t completely understanding how flexbox worked. So, I stopped to do some learning.
To learn more about flexbox, I went to http://flexboxfroggy.com/. Someone shared this site to me a while ago. But, I just stashed it on my collections of want to learn. So, I dusted it off and started working on the exercise.
It was a fun site and I highly recommend it for learning flexbox.
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
It is another layout model much like block or inline. It makes it easier for us web developers to design responsive sites.
Learning flexbox was fairly easy (I mean I haven’t completely memorized the syntax yet, but, I have a fairly good grasp of it). There are only a few properties and most of the property values have the same names/naming convention.
Below, I explain what each one does. I also have videos of each property in action.
display: flex
The what:
display: flex; goes inside the parent container. On the video, you’ll see that when I applied this to the parent container, the 3 child elements got rearranged to be side by side. This happened because I defined a minimum width of 200px for each element.If this was not present, there would be no noticeable difference.
However, if you add flex: 1; to the child element, the child elements will go side by side and occupy the same amount of space.
align-items
The what:
This property aligns child elements vertically. There are 5 possible values for this.
Values:
stretch – this is the default value. It stretches the elements to occupy the entire height of the parent element.
baseline – this aligns the elements based on the base content of the child elements. You’ll see on the video that I gave the 3 divs different heights and the text we’re all aligned center vertically (Note: I applied flexbox properties to the child elements and their children – you can nest flexbox. Cool right?!). So, they align based on the position of the text.
flex-start – The elements go to the top of the parent element.
flex-end – The elements go to the bottom of the parent element.
center – Elements go to the vertical center of the parent element.
flex-direction
The what:
This property dictates how the children line up.
Values:
row – This is the default value. Children are lined up horizontally.
row-reverse – Same as row but the elements are aligned in reverse order on the right.
column – The child elements are lined up on top of each other.
column-reverse – Same as column but the elements are aligned in reverse order at the bottom.
flex-wrap
The what:
If there are more items within the parent the elements than the available parent element space, this can dictate whether items wrap around to fit in the parent element or not.
Values:
nowrap – This leaves the items as is. The items flow out of the parent element if they don’t fit
wrap – This wraps the items around to fit the parent element.
wrap-reverse -This wraps the items around to fit the parent element in reverse order.
flex-flow
The what:
This is a combination of flex-direction and flex-wrap . Since these 2 properties are commonly used together, this property was created as a shortcut.
Values:
Same values as flex-direction and flex-wrap . Values are separated by a space.
justify-content
The what:
This property aligns child elements horizontally. There are 5 possible values for this.
Values:
flex-start – The elements go to the left of the parent element. This is the default.
flex-end – The elements go to the right of the parent element.
center – Elements go to the horizontal center of the parent element.
space-between – Equal space spaces are added between elements.
space-around -Equal space spaces are added around elements.
align-content
The what:
This is similar to justify-content. However, it spaces the child elements vertically if there is more than one line of children elements.
Values:
flex-start – The elements are packed on the top of the parent element.
flex-end -The elements are packed on the bottom of the parent element.
center -The elements are packed on the vertical center of the parent element..
space-between – Equal space spaces are added between elements vertically.
space-around -Equal space spaces are added around elements vertically.
stretch – Lines stretch to take up remaining space.
NOTE: Sorry, I forgot to show a sample of stretch.
align-self
The what:
This property aligns specific child elements vertically. This is added on the child element instead of the parent element.
Values:
stretch – this is the default value. It stretches the elements to occupy the entire height of the parent element.
baseline – this aligns the elements based on the base content of the child elements. You’ll see on the video that I gave the 3 divs different heights and the text we’re all aligned center vertically (Note: I applied flexbox properties to the child elements and their children – you can nest flexbox. Cool right?!). So, they align based on the position of the text.
flex-start – The elements go to the top of the parent element.
flex-end – The elements go to the bottom of the parent element.
center – Elements go to the vertical center of the parent element.
If you want to learn more about flexbox, here are some resources.
This blog is late. I was supposed to blog yesterday but it was a very busy day.
Anyway, coincidentally, there was a theme on my coding journey yesterday. I attend a class from the New York Public Library twice a week. Today we talked about flexbox in class. Although I came across flexbox before, I never really took the time to look into it further until today.
It was coincidental because the project for JS30 today was on making flexpanels using flexbox.
I watched the JS30 video, as always, to get an idea of how to tackle this project. After that, I started building it from scratch. However, at some point, I found myself copy/pasting a lot of stuff.
I wasn’t completely understanding how flexbox worked. So, I stopped to do some learning.
To learn more about flexbox, I went to http://flexboxfroggy.com/. Someone shared this site to me a while ago. But, I just stashed it on my collections of want to learn. So, I dusted it off and started working on the exercise.
It was a fun site and I highly recommend it for learning flexbox.
So, What did I learn? What is Flexbox?
According to MDN:
It is another layout model much like block or inline. It makes it easier for us web developers to design responsive sites.
Learning flexbox was fairly easy (I mean I haven’t completely memorized the syntax yet, but, I have a fairly good grasp of it). There are only a few properties and most of the property values have the same names/naming convention.
Below, I explain what each one does. I also have videos of each property in action.
display: flex
The what:
display: flex;goes inside the parent container. On the video, you’ll see that when I applied this to the parent container, the 3 child elements got rearranged to be side by side. This happened because I defined a minimum width of 200px for each element.If this was not present, there would be no noticeable difference.However, if you add
flex: 1;to the child element, the child elements will go side by side and occupy the same amount of space.align-items
The what:
This property aligns child elements vertically. There are 5 possible values for this.
Values:
stretch– this is the default value. It stretches the elements to occupy the entire height of the parent element.baseline– this aligns the elements based on the base content of the child elements. You’ll see on the video that I gave the 3 divs different heights and the text we’re all aligned center vertically (Note: I applied flexbox properties to the child elements and their children – you can nest flexbox. Cool right?!). So, they align based on the position of the text.flex-start– The elements go to the top of the parent element.flex-end– The elements go to the bottom of the parent element.center– Elements go to the vertical center of the parent element.flex-direction
The what:
This property dictates how the children line up.
Values:
row– This is the default value. Children are lined up horizontally.row-reverse– Same as row but the elements are aligned in reverse order on the right.column– The child elements are lined up on top of each other.column-reverse– Same as column but the elements are aligned in reverse order at the bottom.flex-wrap
The what:
If there are more items within the parent the elements than the available parent element space, this can dictate whether items wrap around to fit in the parent element or not.
Values:
nowrap– This leaves the items as is. The items flow out of the parent element if they don’t fitwrap– This wraps the items around to fit the parent element.wrap-reverse-This wraps the items around to fit the parent element in reverse order.flex-flow
The what:
This is a combination of
flex-directionandflex-wrap. Since these 2 properties are commonly used together, this property was created as a shortcut.Values:
Same values as
flex-directionandflex-wrap. Values are separated by a space.justify-content
The what:
This property aligns child elements horizontally. There are 5 possible values for this.
Values:
flex-start– The elements go to the left of the parent element. This is the default.flex-end– The elements go to the right of the parent element.center– Elements go to the horizontal center of the parent element.space-between– Equal space spaces are added between elements.space-around-Equal space spaces are added around elements.align-content
The what:
This is similar to justify-content. However, it spaces the child elements vertically if there is more than one line of children elements.
Values:
flex-start– The elements are packed on the top of the parent element.flex-end-The elements are packed on the bottom of the parent element.center-The elements are packed on the vertical center of the parent element..space-between– Equal space spaces are added between elements vertically.space-around-Equal space spaces are added around elements vertically.stretch– Lines stretch to take up remaining space.NOTE: Sorry, I forgot to show a sample of stretch.
align-self
The what:
This property aligns specific child elements vertically. This is added on the child element instead of the parent element.
Values:
stretch– this is the default value. It stretches the elements to occupy the entire height of the parent element.baseline– this aligns the elements based on the base content of the child elements. You’ll see on the video that I gave the 3 divs different heights and the text we’re all aligned center vertically (Note: I applied flexbox properties to the child elements and their children – you can nest flexbox. Cool right?!). So, they align based on the position of the text.flex-start– The elements go to the top of the parent element.flex-end– The elements go to the bottom of the parent element.center– Elements go to the vertical center of the parent element.If you want to learn more about flexbox, here are some resources.
http://flexboxfroggy.com/
https://yoksel.github.io/flex-cheatsheet/
I also created a codepen for this blog. You can fork it if you want and play around with it.