FlexBox flex box layout

Web page layout (layout) is a key application of CSS.

Traditional solution for layout, based on box model , dependency  display property+  positionproperty+  floatproperty. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, W3C proposed a new scheme, Flex layout, which can realize various page layouts easily, completely and responsively. Currently, it is supported by all browsers, which means it is safe to use this feature now.

Flex layout will be the go-to for future layouts. This article describes its syntax, and the next article gives Flex notation for common layouts. Netizen  JailBreak  made a  Demo for all the examples in this article , you can also refer to it.

The following content mainly refers to the following two articles: A Complete Guide to Flexbox  and  A Visual Guide to CSS3 Flexbox Properties .

1. What is Flex Layout?

Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model.

Any container can be specified as a Flex layout.

.box{
  display: flex; } 

Inline elements can also use Flex layout.

.box{
  display: inline-flex; } 

Webkit-based browsers must be -webkitprefixed.

.box{
  display: -webkit-flex; /* Safari */ display: flex; } 

Note that after setting to Flex layout float, the clearand vertical-alignproperties of child elements will be invalid.

2. Basic Concepts

Elements that use Flex layout are called flex containers, or "containers" for short. All its child elements automatically become container members, called flex items (flex items), or "items" for short.

The container has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the frame) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end.

Items are arranged along the main axis by default. The space on the main axis occupied by a single item is called main size, and the space occupied by the cross axis is called cross size.

Third, the properties of the container

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

flex-directionThe property determines the orientation of the main axis (that is, 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, and the starting point is at the left end.
• row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.
• column: The main axis is in the vertical direction, and the starting point is at the top edge.
• column-reverse: The main axis is vertical, and the starting point is at the lower edge.

3.2 flex-wrap property

By default, items are arranged on a line (aka "axis"). flex-wrapAttribute definition, how to wrap if one axis cannot fit.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse; } 

It may take three values.

(1) nowrap(default): Do not wrap.

(2) wrap: Line feed, the first line is above.

(3) wrap-reverse: Line feed, the first line is below.

3.3 flex-flow

flex-flowAttribute is a shorthand for flex-directionattribute and attribute, and the default is .flex-wraprow nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>; } 

3.4 justify-content property

justify-contentThe 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, and the specific alignment is related to the direction of the axis. The following assumes that the main axis is left to right.

• flex-start(default): left-aligned
• flex-end: right-aligned
• center: center
• space-between: Both ends are aligned with equal spacing between items.
• space-around: equal intervals on both sides of each item. So, the spacing between items is twice as large as the spacing between items and the border.

3.5 align-items property

align-itemsProperties define how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch; } 

It may take 5 values. The specific alignment is related to the direction of the cross axis. The following assumes that the cross axis is from top to bottom.

• flex-start: The starting point of the cross axis is aligned.
• flex-end: Align the end point of the cross axis.
• center: Align the midpoint of the cross axis.
• baseline: Baseline alignment of the item's first line of text.
• stretch(default): If the item has no height or is set to auto, it will fill the entire height of the container.

3.6 align-content property

align-contentProperties define the alignment of multiple axes. This property has no effect if the item has only one axis.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 

This property may take 6 values.

• flex-start: Align with the starting point of the cross axis.
• flex-end: Align with the end point of the cross axis.
• center: Align with the midpoint of the cross axis.
• space-between: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
• space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the frame.
• stretch(default): The axis fills the entire cross axis.

The properties of the project

The following 6 properties are set on the item.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order attribute

orderThe property defines the order in which items are sorted. The smaller the value, the higher the ranking, the default is 0.

.item {
  order: <integer>; } 

4.2 flex-grow property

flex-growThe property defines the magnification of the item, the default is 0that if there is remaining space, it will not be enlarged.

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

If all items have a flex-growproperty of 1, they will equally divide the remaining space (if any). If one item has a flex-growproperty of 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.

4.3 flex-shrink property

flex-shrinkThe property defines the reduction ratio of the item, the default is 1, that is, if there is not enough space, the item will be shrunk.

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

If the property of all items flex-shrinkis 1, when there is insufficient space, they will be scaled down proportionally. If the flex-shrinkproperty of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.

Negative values ​​are invalid for this property.

4.4 flex-basis properties

flex-basisThe property defines the main size the item occupies before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. Its default value autois the original size of the item.

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

It can be set to the same value as the widthor heightproperty (such as 350px), and the item will occupy a fixed space.

4.5 flex properties

flexThe property is shorthand for flex-grow,  flex-shrink and  , and the default is . The last two properties are optional.flex-basis0 1 auto

.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 to use this property in preference to writing three separate properties, because the browser will infer the relevant value.

4.6 align-self property

align-selfAttributes allow individual items to have a different alignment than other items, overriding align-itemsattributes. The default value is auto, which means inherit the align-itemsproperties of the parent element, if there is no parent element, it is equivalent to stretch.

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

This property may take 6 values, except auto, others are exactly the same as the align-items property.