1. The background

Flexible box layout provides a more efficient way to arrange, allocate space, and lay out items in a container. Flexible means items can be used even if their size is unknown or dynamic!

The idea behind this layout is to give the container the ability to adjust the width, height, and order of items to make the most of the space available in the container — even to accommodate almost any device and screen size.

And, more importantly, the direction of the elastic box layout is unknown, this in contrast to the conventional layout (block layout is vertical line is horizontal reference), although the direction of this concept for pages is very good, but it lacks the flexibility to support larger, more complex applications (especially when the direction of change, the size change, narrow stretch)

Note: The elastic box model is more suitable for componentized applications and for small scale layouts, where Grid layouts can be used

2. Basics and terminology

This section introduces the container and Item properties in the elastic box model

2.1 Container Properties

display

We need to define a container as Flexbox with the display property

.container {
  display: flex; /* or inline-flex */
}
Copy the code

flex-direction

You can use this property to define the orientation of the item axis in the container, along which items are arranged. The Flexbox is a single-directional layout model. You can consider arranging items horizontally or vertically.

Note: Some of the diagrams and examples below are written with Flex-direction as row.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
  • Row (default) : horizontal forward alignment
  • Row-reverse: horizontal and reverse order
  • Column: indicates the vertical and forward array
  • Column-reverse: indicates the vertical reverse order

flex-wrap

By default, items in an elastic container tend to be arranged in a single line. You can use this property to allow containers to try multi-line layouts.

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

Nowrap (default): single-line layout is allowed. Wrap: multi-line layout is allowed. Wrap-reverse: multi-line layout is allowed.

flex-flow

The default property is Row Nowrap:

The flex - flow: < > 'flex - direction' | | < > 'flex - wrap'Copy the code

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Copy the code
  • Flex-start (default): left-aligned (according to flex-direction)
  • Flex-end: right-aligned (same as above)
  • Start: left-align (but not according to flex-direction, but according to the writing-mode attribute of the root element, which determines the orientation of the entire page row layout)
  • End: right-align (ibid.)
  • Left: left-aligned (left edge of container, same as start if flex-direction attribute does not apply)
  • Right: right aligned (ditto)
  • Center: a center
  • Space-between: the first and last child components are arranged along the main axis with equal spacing. The distance between the parent component and the first and last child components is 0
  • Space-around: along the main axis, evenly spaced, with the first and last child components 1/2 of the distance from the parent component

Note that different browsers support the above properties differently. Currently, the best properties include flex-start, Flex-end, and Center.

Finally, we can add an additional attribute safe and unsafe:

  • Safe: Make sure you can’t render things that are already out of the screen and that browser content can’t reach for processing
  • Unsafe: The preceding operations are acceptable

align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Copy the code
  • Stretch (default) : Stretches the item to fill the container, but with min-width and max-width properties
  • Flex-start /start/self-start: left-aligned, depending on whether it is flex-direction or writing-mode
  • Flex-end /end/self-end: right-align, same difference as above
  • Center: a center
  • Baseline: aligned with their baseline

align-content

This is also arranged for the sub-axis. The difference is that this property is useless if there is only one row.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Copy the code

The specific properties are not clear.

2.2 the items property

order

This property is used to determine the order of items in the Flex container, with the larger the order, the later the order

.item {
  order: <integer>; /* default is 0 */
}
Copy the code

flex-grow

This property defines the ability of an item to expand its size if necessary, and defines the percentage of space that can be occupied by the item itself in the Flex container.

If this value is set to 1 for all items, then the available space in the container will be equally distributed to all sub-items. If the attribute value of one sub-item is 2, it will occupy twice the space of the other items

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

flex-shrink

This attribute defines the ability of an item to be miniaturized, similar to the above attribute:

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

flex-basis

This property defines the default size of an element before the remaining space is allocated, such as 20% or 5rem.

The auto keyword means that the container looks at the width or height of the item itself (currently via the main-size keyword) and allocates it based on the value of flex-Grow

The content keyword means that the default size refers to the content size of the item.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

flex

Flex -grow, flex-shrink, and flex-basis.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

It is recommended to use this property instead of the above.

align-self

This property is used to override the default arrangement of the container for a single item (specified by align-items)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

3. Browser support

Differentiated by different Flexbox versions:

  • (new) means the recent syntax from the specification (e.g. display: flex;)
  • (tweener) means an odd unofficial syntax from 2011
  • (e.g. display: flexbox;) (old) means the old syntax from 2009 (e.g. display: box;)

4. Reference materials

CSS – was catnip guidance

React-native Flex layout

Align-items vs. align-content in flex layout