Lin Yang, 4 months ago
I never truly figured out how positioning and float work, and always have an urge to smash my head to the keyboard whenever I have to use them, until I meet flexbox. Suddenly, it becomes the solution to almost everything.
Wanna try it for yourself? Start with Flexbox Froggy to get some fun!
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page...
Yep, the layout mode! Just like the grid system we use heavily, it is a way for us to arrange the elements in the page. Unlike the grid system, flexbox calculates the size of the elements for us when using
flex attribute. Even better, we have more control over the relative position of the elements.
With the help of flexbox, you would not need to deal with the margin, float, and positioning as much as you did, or even try to debug the headache causing by using these attributes, just like me...
Throughout my journey of learning flexbox, I figured out that it is very important to master the four basic concepts before replacing everything with flexbox. Otherwise, you will find yourself just as confused as you were using the positioning and float before.
First and foremost concept is parent and children (some people call it container and items). There is always a single parent, when you add the
display: flex to the parent, all the child elements become the flex items.
Flex attributes could be categorized into two groups, one could only be applied to parent element, while the one only for child elements.
By giving parent certain flex attributes, it could manipulate the position of all the child elements. When single child element is assigned with specific flex attributes, it could decide its own position within the parent.
The main axis and cross axis is defined by
flex-direction (parent attribute). If you want to do anything related to alignments, you have to understand main axis and cross axis.
Imagine a Cartesian coordinate, when
flex-direction: row, the main axis is along the x-axis, and the cross axis is the y-axis. The child elements will be laid out along the x-axis(main axis), from left to right.
In this case, if you want to center all the child elements, you could apply
justify-content: center;. Other options include,
To align all the child elements along the y-axis,
align-items come in handy. Think of it as
vertical-align. The options include
center (align middle),
height: 100%;) and
baseline will align the baseline of text contained in the child elements.
If one of the child elements would like to be distinguished from other child elements,
align-self could help, which will override the default or assigned
align-items on parent element only for that child element.
Everything above is based on
flex-direction: row. Think about how
align-self will behave when
flex-direction: column. Or even try it out by yourself with the codepen above.
flex-wrap defines whether a new line will form when there are two many child elements. Very easy to understand, right? But it could get very tricky, when you combine with
flex is a shorthand for three attributes together:
flex-basis, could only be applied to child elements.
flex-grow defines how the child elements will grow when there are extra space in the parent element. While
flex-shrink defines how the child elements will shrink when there is no enough space in the parent element.
flex-basis defines the basis size of the child element before the remaining space is distributed. You could think it as the
It is always recommend to use
flex, instead of using three attributes separately.
Check with caniuse to see if you could use flexbox for the browser compatibility.
For anyone interested in learning flexbox, I recommend all three resources below:
If you have a treehouse account and already paid for it, go for the treehouse tutorial. The instructor illustrates really well about the parent and children concept, and helped me a lot when I started to learn flexbox.
Wes Bos is a really great guy, he offered this 'What The Flexbox' to the community for free. His tutorial would be great for people who learn things by doing. The tutorial also contains real-life example, and clearly demonstrates to users why flexbox just make the frontend developers' lives so much easier.
A Complete Guide to Flexbox is my go-to reference for flexbox. The explanation for each attribute is short and concise, with a simple box and arrow illustration. It might be overwhelming when you first read it. However, after you grasp the basic concepts of flexbox, you will find it is super easy to use. Thanks to its two-column parent-children layout!