Before the CSS Flexbox Layout module, there were four layout modes:
- Block, for sections in a web page
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
- CSS Flexbox is a whole module and not a single CSS property, it involves a set of properties.
- Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
- The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container.
- The main idea behind the flex layout is to give the container the ability to alter its item’s width/height (and order) to best fill the available space
- A flex container expands items to fill available free space, or shrinks them to prevent overflow.
- Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
Working with Flexbox-
- When working with flexbox we need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
- Items will be laid out either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
Properties for the Parent (flex container):
- display: flex | inline-flex; – Allows us to create a flex container (a flex context for all its direct children),
- flex-direction : row | row-reverse | column | column-reverse – Allows us to change the direction in which our flex items display. default is row.
- flex-wrap: nowrap | wrap | wrap-reverse; – Specifies whether the flex items should wrap or not. nowrap is default.
nowrap(default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
- flex-flow: <‘flex-direction’> || <‘flex-wrap’> : is a shorthand property for setting both the flex-direction and flex-wrap properties.
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; : This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
flex-start(default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
- align-items: stretch | flex-start | flex-end | center | baseline; – property is used to align the flex items vertically.
stretch(default): stretch to fill the container (still respect min-width/max-width)
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
- align-content: flex-start | flex-end | center | space-between | space-around | stretch; 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
Properties for the Children (flex items):
- order: <integer>; By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
- flex-grow: <number>/* default 0 */; property specifies how much a flex item will grow relative to the rest of the flex items. If all items have
flex-growset to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others
- flex-shrink: <number>; /* default 1 */ – property specifies how much a flex item will shrink relative to the rest of the flex items.
- flex-basis: <length> | auto; /* default auto */ –
- flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] – is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties
- align-self: auto | flex-start | flex-end | center | baseline | stretch;