CSS 3 provides a more flexible Layout mode and CSS 3 provides a more flexible layout.

CSS 3 provides a more flexible Layout mode and CSS 3 provides a more flexible layout.

 

Flex is a flexible layout method that can well control the width, height, or remaining space of internal elements to adapt to different display devices and different screen sizes, and truly achieve an adaptive effect.

The flex layout is very different from the conventional layout. Although the regular layout is displayed on the page, it lacks flexibility in the direction change, adaptive size, stretching and shrinking of large and complex projects, flex is best suited for small-scale layout as a component of applications; grid layout applies to large-scale layout.

The entire flex module is not just an attribute. It involves many things and a series of attributes. The flex container is set as a flex label, and the child node element in the container is called a flex item.

If the general layout is based on block and inline layout, flex can be called the flex stream direction layout.

Let's take a look at the following figure to explain the concept of flex layout.

Let's take a look at the entire box. There are two elements 1 and 2 in the box. At this time, we haven't made a flex definition for it, so there is no other term to define the elements in the box.

Now we define the box as flex. At this time, we can see two red lines,

Main-axis: the horizontal axis is called the main axis,

Cross axis: the vertical axis is called the cross axis,

Two sub-boxes: flex items.

Here we will continue to look at the blue main start, main end, cross start, and cross end are the start and end positions of the layout (main axis, cross axis.

Main start: the starting position of the spindle Layout

Main end: end position of the spindle Layout

Cross start: the starting position of the cross axis Layout

Cross end: end position of the cross axis Layout

Main size: the size of the flex entry in the spindle Layout

Cross size: the size of the flex item on the cross axis Layout

Next, let's take a look at the main attributes of containers and flex items and their functions.

Let's first understand the attributes and functions of the container. The following figure defines a flex container.

 

• Display

display:flex /*inline-flex*/

Define the container as a flex layout. Whether the block or inline is determined by the attribute value. If flex is a block, inline-flex is an inline layout.

• Flex-direction

Create a spindle and a direction to define the position of the flex entry in the container layout. The flex box is in a single direction Layout mode. That is to say, the flex entry is either horizontally or vertically.

flex-direction:row | row-reverse | column | column-reverse;

Row: the default value for the layout from left to right.
Row-reverse: Layout from right to left
Column: from top to bottom
Column-reverse: from bottom to top

 

• Flex-wrap

 

As shown in the figure, it is a stream method. By default, the flex item is placed on a row as much as possible. Of course, we can also change and set attributes as needed.

flex-wrap:nowrap | wrap | wrap-reverse;

Nowrap: Default Value, single row mode, from left to right
Wrap: multiline mode (line feed) from left to right
Wrap-reverse: multiline (line feed) mode, from right to left.

 

 

• Flex-flow

 

 

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

This attribute is the combination of flex-direction and flex-wrap. The default attribute is row nowrap.

 

 

• Justify-content

 

Set flex items to align along the main axis. Control extra space between flex items.

justify-content: flex-start | flex-end | center | space-between | space-around;

Flext-start: Default Value, left aligned
Flex-end: right alignment
Center: center
Space-between: the two ends are aligned.
Space-around und: the flex items on both sides are equal to the container edge distance, but the distance between each item is twice the edge distance, and the distance between each item is equal

 

 

• Align-items

 

Sets the alignment on the flex item cross axis.

align-items: flex-start | flex-end | center | baseline | stretch;

Flex-start: Specifies the starting position of the cross axis.
Flex-end: Specifies the end position of the cross axis.
Center: Align the center position on the cross axis
Baseline: baseline alignment
Stretch: default value. Fill the entire container (but still follow min-width/max-width)

 

 

• Align-content

 

Compared with the alignment on the cross axis, it is similar to the alignment on the spindle justify-content. If there is only one item on the axis in the container, the attribute does not work.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Flex-start: Alignment Based on the starting position of the cross axis
Flex-end: Alignment Based on the end position of the cross axis
Center: center Alignment Based on Cross-Axis
Space-between: the two ends of the cross axis are aligned.
Space-around: the distance between each item on the cross axis is equal.
Stretch: default value. The item occupies the container cross axis.

 

 

After learning about the attributes in the main container, we will continue to look at the attributes and functions of the flex item.

• Order

 

order: <integer>;

By default, flex items are arranged sequentially. order is used to control the order of flex items in the container.

 

• Flex-grow

This attribute adds the stretch capability for each item. Its value accepts a number value with no unit as the proportion. specify the proportion of space required by each item. if the flex-grow value of all items is 1, the remaining space (if any) is evenly allocated ). If the flex-grow value of one item is 2 and each item value is 1, the remaining space occupied by the item with a value of 2 is twice that of other items.

flex-grow:<number>; /* default 0 */

The default value is 0. When the value is 0, the occupied space of each item remains unchanged (original size). The attribute value and negative number are invalid.

 

• Flex-shrink

The property adds the shrinkage capability for each item. For example, flex-grow. The property value and negative number are invalid.

flex-shrink:; /* default 1 */

 

 

• Flex-basis

Before allocating the remaining space, define the default size of the element. A value can be a length, such as 30%, 5rem, or a keyword. the value is auto, which looks like "the value of width or height auto"

flex-basis: <length> | auto; /* default auto */

If it is set to 0, extra space surrounding the content is not taken into account. If the value is auto, the additional space is allocated based on the flex-grow value.

 

• Flex

This is the combination of flex-grow, flex-shrink and flex-basis. The second and third parameters are optional values. The default value is 0 1 auto.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

This merge statement is recommended.

 

• Align-self

Set the layout of flex items in the container separately.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Tip: the attributes float, clear, and vertical-align do not affect the layout of flex items.

 

This article belongs to Wu Tongwei's blog, the public number: bianchengderen's original article, reprinted please indicate the source and the corresponding link: http://www.wutongwei.com/front/infor_showone.tweb? Id = 145. You are welcome to share it with us.