What is flex and the detailed explanation of flex layout Grammar Course

Flex layout

Flex is the abbreviation of flexible box, meaning “flexible layout”. It is used to provide the box model with maximum flexibility and free operation of the arrangement of elements (items) in the container

Any container can be specified as a flex layout.

.box{ 
      display: flex;
 }

Flex layout can also be used for inline elements.

 .box{  
      display: inline-flex; 
  }

The browser of WebKit kernel must be prefixed with – WebKit.

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

Note that when set to flex layout, the float, clear, and vertical align attributes of the child elements will not work.

concept

The elements with flex layout are called flex container, or “container” for short. All its child elements automatically become container members, called flex item, or “project” for short.

The container has two axes by default: the horizontal main axis and the vertical 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 project is called main size, and the cross axis space occupied by a single project is called cross size.

Properties of the container

Six attributes of the container

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

1. Flex direction property

The flex direction property determines the orientation of the spindle (that is, the orientation of the items).

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

Values can be 4

• 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 vertical, and the starting point is at the upper edge.
• Column-reverse: the main axis is vertical and the starting point is at the lower edge.

2. Flex wrap property

By default, items are arranged on a single line (also known as “grid line”). The flex wrap property defines how to wrap a line if an axis cannot be arranged.

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

It may take three values.

(1) Nowrap (default): does not wrap.

(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 property

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

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

4. Attribute justify content

The justify content property defines the alignment of items on the spindle.

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

It may take five values, and the specific alignment depends on the direction of the axis. The following assumes that the spindle is left to right.

• Flex start (default): left aligned
• Flex end: right alignment
• Center: Center
• Space between: align both ends so that the spaces between items are equal.
• Space around: the spaces on both sides of each item are equal. As a result, the spacing between items is twice as large as that between items and borders.

5. Align items property

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 five values. The alignment depends on the direction of the cross axis, which is assumed to be from top to bottom.

• Flex start: the starting point of the cross axis is aligned. Flex end: the end of the intersection axis is aligned. Center: the midpoint of the cross axis is aligned. baseline:
• The baseline alignment of the first line of text for the item. Stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.

6. Attribute content align

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

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

The attribute may take six values.

• Flex start: align with the start point of the cross axis.
• Align with the end flex axis.
• Center: align with the midpoint of the cross axis.
• Space between: aligned with both ends of the cross axis, the spacing between the axes is evenly distributed.
• Space around: the spaces on both sides of each axis are equal. Therefore, the spacing between the axes is twice as large as that between the axes and the border.
• Stretch (default): the axis occupies the entire intersection axis.

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

summary

This article about what flex is and flex layout grammar tutorial detailed explanation of the article introduced here, more relevant flex layout syntax content please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!