Getting Started with Flexbox
Background
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Basics and terminology
Flexbox is an entire module rather than a single property, it involves several different things in addition to its entire set of properties. Some of them should be placed on the container (parent element, also known as "flex container"), while others should be placed on the children (also known as "flex items").
Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
main axis
The main axis of a flex container is the primary axis along which flex items are laid out. It is not necessarily horizontal; it depends on the flex-direction property (see below).
main-start | main-end
The flex items are placed within the container starting from main-start and going to main-end.
main size
A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
cross axis
The axis perpendicular to the main axis is called the cross-axis. Its direction depends on the main axis direction.
cross-start | cross-end
Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
cross size
The width or height of a flex item, whichever is in the cross dimension, is the item’s cross-size. The cross-size property is whichever of "width" or "height" that is in the cross dimension.
Flex properties
Display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
Flex-direction
Sets the direction of the flex-items.
row (default): left to right, right to left
row-reverse: right to left, left to right
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top
Flex-wrap
Flex items will by default attempt to fit on a single line. With this property, you can alter that and permit the pieces to wrap as necessary.
nowrap(default): all flex items will be on one linewrap: flex items will wrap onto multiple lines, from top to bottom.wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
Justify-Content
justify-content is a CSS property that helps to align and distribute flex items along the main axis of a flex container. It controls the horizontal alignment of the flex items when the flex-direction is set to either row or row-reverse.
flex-start: This aligns the flex items to the start of the main axis of the flex container.flex-end: This aligns the flex items to the end of the main axis of the flex container.center: This centers the flex items along the main axis of the flex container.space-between: This distributes the flex items evenly along the main axis of the flex container. The first item is placed at the start of the main axis, the last item is placed at the end, and the remaining items are evenly distributed in between.space-around: This distributes the flex items evenly along the main axis of the flex container, with equal space around each item.space-evenly: This distributes the flex items evenly along the main axis of the flex container, with equal space between and around each item.
Align-items
align-items is a CSS property that helps to align flex items along the cross-axis of a flex container. It controls the vertical alignment of the flex items when the flex-direction is set to either column or column-reverse.
stretch: This is the default value, and it stretches the flex items to fill the container along the cross-axis.flex-start: This aligns the flex items to the start of the cross-axis of the flex container.flex-end: This aligns the flex items to the end of the cross-axis of the flex container.center: This centers the flex items along the cross-axis of the flex container.baseline: This aligns the flex items such that their baselines are aligned.
Align-content
This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-wrapis set to its default value, no-wrap) will not reflect align-content.
Gap
gap is a CSS property that sets the size of the gap between the rows and columns of a grid container. It is a shorthand property for the row-gap and column-gap properties, which set the size of the gap between the rows and columns of a grid container, respectively.
Order
The order CSS property sets the order to lay out an item in a flex or grid container.
.item {
order: 3; /* default is 0 */
}
flex-grow
flex-grow is a CSS property that defines the ability of a flex item to grow and fill any remaining space along the main axis of a flex container.
