What is flex and a detailed tutorial on flex layout syntax

Flex Layout

Flex is the abbreviation of Flexible Box, which means "flexible layout". It is used to provide maximum flexibility for the box model and freely operate the arrangement of elements (items) in the container.

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 have the -webkit prefix.

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

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

concept

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

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

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

Container properties

6 properties of containers

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction attribute

The flex-direction property determines the direction of the main axis (that is, the direction in which the items are arranged).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
} 

The possible values ​​are 4

• row (default): The main axis is horizontal, with the starting point at the left end.
• 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 at the top edge.
• column-reverse: The main axis is vertical and the starting point is at the bottom edge.

2. flex-wrap property

By default, items are arranged on a line (also called an "axis"). The flex-wrap property defines how to wrap if one axis cannot fit.

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

It may take three values.

(1) nowrap (default): no line break.

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

(3) wrap-reverse: wrap the line, with the first line at the bottom.

3. flex-flow attribute

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

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

4. justify-content attribute

The justify-content property defines how items are aligned 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 depends on 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 alignment
• center：
• space-between: Align both ends, and the spacing between items is equal.
• space-around: Each item has equal space on both sides. Therefore, the spacing between items is twice as large as the spacing between items and the border.

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 method is related to the direction of the cross axis. The following assumes 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 in the item. stretch (default): If the item has no height set or is set to auto, it will occupy the entire height of the container.

6. align-content attribute

The align-content property defines the alignment of multiple axes. If the project has only one grid line, this property has no effect.

.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: Align with the midpoint of the cross axis.
• space-between: Align with both ends of the cross axis, and evenly distribute the intervals between the axis lines.
• space-around: The spacing on both sides of each axis is equal. Therefore, the distance between the axes is twice as large as the distance between the axes and the border.
• stretch (default): The axis line occupies the entire cross axis.

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

Summarize

This concludes the article on what flex is and a detailed tutorial on flex layout syntax. For more information on flex layout syntax, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!