Flex Layout Tutorial: Syntax
The layout of a web page is a key application of CSS.
The traditional solution for layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to implement.
In 2009, the W3C proposed a new solution — Flex layout for easy, complete and responsive implementation of various page layouts. It is now supported by all browsers, which means that this feature can be used quite safely now.
The Flex layout has probably become the preferred solution. This article introduces its syntax and the next article gives a Flex writeup of common layouts.
The following content is based on the following two articles: A Complete Guide to Flexbox and A Visual Guide to CSS3 Flexbox Properties.
1. What is the Flex layout?
Flex stands for Flexible Box and is used to provide maximum flexibility for box models. Any container can be specified as a Flex layout.
.box{
display: flex;
}Flex layout can also be used for in-line elements.
.box{
display: inline-flex;
}For browsers with a Webkit kernel, the -webkit prefix must be added.
.box{
display: -webkit-flex; /* Safari */
display: flex;
}Note that the float, clear and vertical-align property of child elements will be disabled when set to a Flex layout.
2. Basic concepts
An element with a Flex layout is called a Flex container, or “container” for short. All its children automatically become members of the container and are called flex items.
The container has two axes by default: the horizontal main axis and the vertical cross axis. The start of the main axis (the intersection with the border) is called main start and the end is called main end; the start of the cross axis is called cross start and the end is called cross end.
By default, items are arranged along the main axis. The space occupied by a single item is called main size and the space occupied by the cross axis is called cross size.
3. Properties of containers
The following 6 properties are set on the container.
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction property
The flex-direction property determines the orientation of the main axis (i.e. the direction in which items are arranged).
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
It may have 4 values.
- row (default): the main axis is horizontal, starting at the left end.
- row-reverse: the main axis is horizontal and starts at the right end.
- column: the main axis is vertical and starts at the top edge.
- column-reverse: the main axis is vertical and starts at the bottom edge.
3.2 flex-wrap property
By default, items are arranged on a single line (aka “axis”). flex-wrap defines how to wrap the line if an axis does not fit.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}It may take three values.
(1) nowrap (default): no line feed.
(2) wrap: line feed, first line above.
(3) wrap-reverse: line feed, first line below.
3.3 flex-flow property
The flex-flow property is a shorthand form of the flex-direction property and the flex-wrap property, with the default value of row nowrap.
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}3.4 justify-content property
The justify-content property defines the alignment of the item on the main axis.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
It may take 5 values, the exact alignment being related to the orientation of the axes. The following assumes that the main axis is left to right.
- flex-start (default): left-aligned
- flex-end: right-aligned
- centre: centred
- space-between: aligned at both ends, with equal spacing between items.
- space-around: each item is equally spaced on both sides. So, the spacing between items is twice as large as the spacing between items and the border.
3.5 align-items property
The align-items property defines how items are aligned on the intersecting axes.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
It may take 5 values. The exact alignment is related to the direction of the cross-axis, which is assumed below to be from top to bottom.
- flex-start: alignment of the start of the cross-axis.
- flex-end: alignment of the end of the intersecting axes.
- center: alignment of the midpoint of the intersection axis.
- baseline: alignment of the baseline of the first line of text of the item.
- stretch (default): if the item has no height set or is set to auto, it will take up the entire height of the container.
3.6 align-content property
The align-content property defines the alignment of multiple axis lines. If the project has only one axis, this attribute does not work.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
This property may take 6 values.
- flex-start: aligned with the start of the intersecting axes.
- flex-end: aligned with the end of the intersection axis.
- centre: aligned with the midpoint of the intersecting axes.
- space-between: aligned with the ends of the intersecting axes, with the axes evenly spaced apart.
- space-around: both sides of each axis are equally spaced. So, the spacing between axes is twice as large as the spacing between axes and border.
- stretch (default): the axes occupy the whole of the intersecting axes.
4. Properties of the item
The following 6 properties are set on the item.
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order properties
The order property defines the order of the items. The smaller the value, the higher the order; the default is 0.
.item {
order: <integer>;
}
4.2 flex-grow property
The flex-grow property defines the enlargement ratio of the item and defaults to 0, i.e. if there is space left, it is not enlarged.
.item {
flex-grow: <number>; /* default 0 */
}
If all items have a flex-grow property of 1, they will share the remaining space (if any) equally. If one item has a flex-grow attribute of 2 and all other items are 1, the former will take up twice as much of the remaining space as the other items.
4.3 flex-shrink property
The flex-shrink property defines the shrink ratio of the item and defaults to 1, i.e. the item will shrink if there is not enough space.
.item {
flex-shrink: <number>; /* default 1 */
}
If all items have a flex-shrink property of 1, they will all shrink in equal proportion when there is not enough space. If one item has a flex-shrink property of 0 and all other items are 1, the former will not shrink when there is not enough space.
Negative values are not valid for this property.
4.4 flex-basis property
The flex-basis property defines the main axis space (main size) that the item occupies before excess space is allocated. Based on this property, the browser calculates whether there is excess space in the main axis. Its default value is auto, which is the original size of the item.
.item {
flex-basis: <length> | auto; /* default auto */
}It can be set to the same value as the width or height property (e.g. 350px) and the item will take up a fixed amount of space.
4.5 flex property
The flex proerty is shorthand for flex-grow, flex-shrink and flex-basis, with a default value of 0 1 auto. the last two attributes are optional.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}This property has two shortcut values: auto (1 1 auto) and none (0 0 auto).
It is recommended that this property is used in preference to writing three separate properties, as the browser will impute the relevant values.
4.6 align-self property
The align-self propery allows a single item to have a different alignment from other items, and can override the align-items property. The default value is auto, which means that it inherits the align-items property from the parent element, or if there is no parent, it is equivalent to stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This property may take six values, all of which are identical to the align-items property except for auto.
(end)
