Flexbox Back
1. Basic Introduction
Before the Flexbox layout module, there were four types of layout module:
- Block: for sections in a site
- Inline: for text
- Table: for two-dimensional table data
- Positioned: for the explicit position of an element
With the Flexbox layout module, we can easily define a responsive layout without using float or position. However, since it was released by CSS3, it can only be used under IE11+.
In order to use such a flexible layout module, we should put elements into a flex container, which can be defined with display: flex:
See the Pen oaPWrK by aleen42 (@aleen42) on CodePen.
As the article "Display Module Level 3" mentioned, each value of display is described as a combination of two things: an outer display model and an inner display model. When we define a container with display: flex，it is defined as display: block flex, which means that the container will act as a block element while the inner elements are flexible.
Certainly, since we can be defined as flex, we can also define the container with a value of inline-flex, so that the container can act like an inline element.
See the Pen MPqowB by aleen42 (@aleen42) on CodePen.
2. Direction
The direction of a defined flexible container can be specified with a CSS property, named flex-direction, which has the value of row by default. Other values for this property are:
columnrow-reversecolumn-reverse
See the Pen yRxXeE by aleen42 (@aleen42) on CodePen.
Certainly, there are two axes of Flexbox: the main axis and the cross axis. While using flex-direction to define the direction of a flexible container, what we specify is the main axis of this container. When we set the main axis along the row, with the row value, the cross axis is down the columns, while we set the main axis down the column, the cross axis is along the row.
When it comes to the order of a flexible container along the row, it depends on the writing mode of the system language. For instance, if we are working in a right-to-left language such as Arabic, like defined direction: rtl, the order should be from right towards left:
See the Pen JmaJxX by aleen42 (@aleen42) on CodePen.
Similarly, if we have defined the writing-mode property of the flexible container with the value vertical-lr, we should get a vertical column visualization even we set the container with row.
See the Pen dgqREv by aleen42 (@aleen42) on CodePen.
Understanding the fact that a row or a column can run in different physical directions helps understand some of the terminology being used for Grid and Flexbox.
3. Alignment
As explained in the Flexbox specification, any specification of the Box alignment will ultimately replace the alignment specification in the Flexbox.
3.1 Main Axis Alignment
When it comes to the alignment of the main axis, any CSS alignment property which begins with the justify- prefix, like justify-content, then it should apply to the main axis of the flexible container. The initial value of justify-content for a flexible container is flex-start, and other values can be:
flex-endcenterspace-aroundspace-betweenspace-evenly(added in Box alignment)
See the Pen Edevyy by aleen42 (@aleen42) on CodePen.
Note: justify-content can only affect if there is spare space to distribute.
3.2 Cross Axis Alignment
align-items CSS property is mainly used to define the alignment of the cross axis of a flexible container, which is stretch by default. It means that the item will be stretched to fit the flexible container. Other values can be:
flex-startflex-endcenterbaseline
See the Pen XxPazj by aleen42 (@aleen42) on CodePen.
Besides, we can also use the align-self property to specify alignments for the specific item in the flexible container, which has the same value as align-items.
Note: why is there no justify-self? CSS Flexbox module only wants to focus more on spare space distribution of a group of items, but not a specific one.
3.3 Multiple-line Alignment
When a flexible container has too many elements resulting in layouts with multiple lines, the align-content property can help us specifying the alignment of each line.
Its default value is stretch, and other values can be:
flex-startflex-endcenterspace-aroundspace-betweenspace-evenly(added in Box alignment)
See the Pen YJOYBj by aleen42 (@aleen42) on CodePen.
3.4 Shorthand
In the Box alignment, there is a shorthand property place-content, which we can specify justify-content and align-content at once.
.container {
display: flex;
place-content: stretch flex-start; /** <align-content> <justify-content> */
}
The snippet above is same as:
.container {
display: flex;
align-content: stretch;
justify-content: flex-start;
}
If we want to set both properties with the same value flex-start, the shorthand can be more simple like this:
.container {
display: flex;
place-content: flex-start;
}
3.5 Auto Margins
As we knew that if a block has been centred in CSS, the margin set with auto will try to become as big as it can in the direction it has been set in. Auto margins work nicely in Flexbox to align items or groups of items on the main axis.
For the following snippet, the third item has been set with margin-left: auto. It means that the item will try to get as much space as possible from the left side, which also means that the item will be aligned to the right.
See the Pen VEGXLY by aleen42 (@aleen42) on CodePen.
3.6 Fallback Alignment
What if I style a flexible container with justify-content: space-between, but there is only one element in that container? CSS has a fallback alignment of flex-start for such a situation, which means that it is the same as justify-content: flex-start. In the case of justify-content: space-around, a fallback alignment of center is used.
4. Flexible Items
Finally, there are some CSS properties use to describe items in a flexible container, like flex-grow, flex-shrink, and flex-basis. While the flex property is a shorthand property for these three all.
Note: the flex property has a default value as 0 1 auto, and here we want to know what they describe.
Firstly, flex-grow means that the item in the flexible container will try to take up any available space in the container when it's set with a positive value. Besides, different positive value can be specified as the ratio of spaces which have been taken up.
See the Pen JmayeO by aleen42 (@aleen42) on CodePen.
Secondly, flex-shrink means that the item will try to shrink itself before overflow the flexible container when it is specified with a positive value. This is a sensitive property when the flex-basis property is set with a specified value, but not auto
See the Pen gBdxVy by aleen42 (@aleen42) on CodePen.
Before knowing what auto means for flex-basis, you may need to know that the CSS Working Groups spend a lot of time figuring out what auto means in any context, as this talk of spec editor Fantasia explains.
When it comes to what auto means when used as a flex-basis, the term defined followed should help us know:
"When specified on a flex item, the auto keyword retrieves the value of the main size property as the used
flex-basis. If that value is itself auto, then the used value iscontent."
Taking the former part of the sentence above as thinking, if our flex-basis is auto, Flexbox has a look at the defined main size property.
See the Pen mzGBOZ by aleen42 (@aleen42) on CodePen.
In the example above, the main size property is itself auto, so the Flexbox has content as the value of the flex-basis property.
So what the spec says about the content keyword?
"Indicates an automatic size based on the flex item's content. (It is typically equivalent to the max-content size, but with adjustments to handle aspect ratios, intrinsic sizing constraints, and orthogonal flows"
Note: this value can only be supported under specific browsers, and please check the compatibility tables.
When there are more items in the flexible container, resulting in overflow, the item will break out of the flex container, as flex-wrap, another property has nowrap as its default value.
See the Pen ReYBaa by aleen42 (@aleen42) on CodePen.
5. References
- "What Happens When You Create A Flexbox Flex Container?", Rachel Andrew, Smashing Magazine.
- "Everything You Need To Know About Alignment In Flexbox", Rachel Andrew, Smashing Magazine.
- "Flexbox: How Big Is That Flexible Box?", Rachel Andrew, Smashing Magazine.
As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.
Notice: This plugin has used Cookie to store your token with an expiration.