Flex Writing Series - Basic Grammar of Flex Layout

The previous traditional layout relied on the box model. That is, display + position + float attributes. But it is not easy to implement for special layouts, for example: vertical centering. The following mainly introduces the basic syntax of flex.

---

1. What is Flex Layout?

The flex layout is personally understood as an elastic box, which brings great flexibility to the boxed model and is convenient for developers.

The basic usage of flex layout is as follows:

.container{
  display:flex;
}

Use of inline elements:

.container{
  display:inline-flex;
}

For browsers with WebKit kernel (Chrome is one of the browsers with this kernel), add the prefix of -webkit

.container{
  display:flex;
  display:-webkit-flex;
}

Two, the basic concept of flex layout

As shown in the picture. The outermost element is called the flex container. All child elements are container members, called flex items. referred to as the "Project".

There are two axes inside the container, the main axis and the cross axis. Items are arranged along the main axis by default. The space occupied by the main axis is called main size, and the space occupied by the cross axis is called cross size

3. Container properties of Flex layout

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

3.1 flex-direction

Determines the direction of the main axis. That is, the direction in which the items are arranged.

.container{
    flex-direction:row | row-reverse | column | column-reverse
}

• row (default value): 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 on the right
• column: the main axis is vertical, and the starting point is on the top
• column-reverse: the main axis is vertical, and the starting point is below

3.2 flex-wrap

By default items are on one line. The flex-wrap attribute defines that the axis line cannot fit, how to wrap

.container{
    flex-wrap:nowrap | wrap | wrap-reverse
}

• nowrap (default): do not wrap
• wrap: wrap, the first line is on top
• wrap-reverse: Newline, the first line is next

3.3 flex-flow

Shorthand for flex-direction and flex-wrap. The default value is row nowrap

.container{
    flex-flow:flex-direction || flex-wrap 
}

3.4 justify-content

Defines the alignment of the main axis

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

• flex-start (default): left-aligned
• flex-end: right alignment
• center: center alignment
• space-between: align both ends
• space-around: The distance between the two sides of the item is equal

3.5 align-items

Defines the alignment of the cross axis

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

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

4. Item Properties of Flex Layout

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order

Order. The smaller the value, the more in front of the item

.item{
    order:1 | 2 | ....;
}

4.2 flex-grow

Defines the magnification of the item, defaults to 0. That is, if there is remaining space, do not zoom in

.item{
    flex-grow:1 | 2 | ....;
}

If all child elements are 1, then the remaining item space will be divided equally, if one of them is 2, then it occupies twice as much remaining space as other elements

4.3 flex-shrink

Defines the reduction ratio of the item, the default is 1. i.e. if there is not enough space, the item will shrink

.item{
    flex-shrink:1 | 2 | ....;
}

If all child elements are 1, they will shrink when there is not enough space. If one of them is 0 and the other elements are 1, the former will not shrink when there is insufficient space

4.4 flex-basis

Defines the amount of space in the main axis that items occupy before allocating excess space. The default value is auto, which is the actual size of the item

.item{
    flex-basis: length | auto;
}

4.5 flex

It is an abbreviation for flex-grow, flex-shrink, and flex-basis. The default is 0 1 auto.

.item{
    flex: flex-grow | flex-shrink | flex-basis
}

There are two common shortcut values: auto( 1 1 auto), none( 0 0 auto)

4.6 align-self

Individual sub-elements can be arranged differently from other sub-elements and have higher priority than align-items. The default value is auto

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