flex layout syntax

1. What is flex layout?

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

Any container can be designated as a Flex layout.

.box{
  display: flex;
}

Inline elements can also be laid out using Flex.

.box{
  display: inline-flex;
}

Browsers with Webkit core must add the -webkit prefix.

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

Note, after setting to Flex layout, the float, clear and vertical-align attributes of the child elements will be invalid.

2. Basic concepts

Elements that use Flex layout are called Flex containers (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 (or x-axis) (main axis) and the vertical cross axis (or y-axis) (cross axis).The starting position of the main axis (the intersection with the border) is called main start, and the end position is called main end; the starting position of the cross axis is called cross start, and the end position is called cross end.

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

3. Container properties

The following 6 properties are set on the container.(That is, set on the element with display: flex;)

• flex-direction direction determines the arrangement direction of items

• flex-wrap line wrap

• flex-flow abbreviation for direction and line wrapping

• justify-content main axis alignment

• align-items cross-axis alignment

• align-content Alignment of multi-axis lines

3.1 flex-direction property

The flex-direction property determines the direction 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 and the starting point is on the left.
• row-reverse: The main axis is horizontal and the starting point is at the right end.
• column: The main axis is vertical and the starting point is on the upper edge.
• column-reverse: The main axis is vertical and the starting point is at the lower edge.

3.2 flex-wrap attribute

By default, items are aligned on a line (also called a "grid").The flex-wrap attribute defines how to wrap the line if one axis line cannot fit.

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

It may take three values.

(1) nowrap (default): No line breaks.Will compress the width of the item

(2) wrap: wrap, with the first line at the top.

(3) wrap-reverse: wrap the first line below.

3.3 flex-flow

The flex-flow property is the shorthand form of the flex-direction property and the flex-wrap property. The default value is row nowrap.

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

3.4 justify-content attribute

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

• flex-start (default): left aligned
• flex-end: right aligned
• center: Centered
• space-between: Align both ends, with equal spacing between items.
• space-around: Each item is equally spaced on both sides.Therefore, the space between items is twice as large as the space between items and the border.

3.5 align-items attribute

The align-items property defines 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. It is assumed below that the cross axis is from top to bottom.

• flex-start: Align the starting point of the cross axis.
• flex-end: Align the end point of the cross axis.
• center: Align the midpoint of the cross axis.
• baseline: The baseline alignment of the first line of text of the item.
• stretch (default value): If the item does not set a height or is set to auto, it will occupy the entire height of the container.

3.6 align-content attribute

The align-content attribute defines the alignment of multiple axes (a row of items is one axis).This property has no effect if the project has only one axis.

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

This attribute 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: Aligned with the midpoint of the cross axis.
• space-between: Align with both ends of the cross axis, and the intervals between the axes are evenly distributed.
• space-around: Each axis is equally spaced on both sides.Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.
• stretch (default): The axis occupies the entire cross axis.

4. Project attributes

The following 6 properties are set on the project.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex Abbreviation for flex-grow, flex-shrink and flex-basis
• align-self

4.1 order attribute

The order attribute 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 attribute

The flex-grow attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.

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

If all items flex-grow properties are both 1, they will equally divide the remaining space (if any).If a project flex-grow If the attribute is 2 and all other items are 1, the former will occupy twice as much remaining space as the other items.

4.3 flex-shrink attribute

The flex-shrink attribute defines the shrinkage ratio of the item, which defaults to 1, that is, if there is insufficient space, the item will shrink.

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

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

Negative values are not valid for this property.

4.4 flex-basis property

The flex-basis property defines the main size of the item before allocating excess space.The browser uses this attribute to calculate whether there is extra space on the main axis.Its default value is auto, which is the original size of the project.

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

It can be set to the same value as the width or height properties (e.g. 350px), so that the item will occupy a fixed space.

4.5 flex attribute

The flex property is short for flex-grow, flex-shrink and flex-basis, and the default value is 0 1 auto.The last two properties 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 to use this attribute first instead of writing three separate attributes separately, because the browser will infer the relevant values.

4.6 align-self attribute

The align-self attribute allows a single item to be aligned differently from other items, overriding the align-items attribute.The default value is auto, which means inheriting the align-items attribute 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 attribute may take 6 values. Except for auto, the others are exactly the same as the align-items attribute.

(End)

Source:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

​