Flex

The main points of

  • Flex layout is oriented independent of block level vertical orientation and inline horizontal orientation
  • Achieve automatic space allocation, automatic alignment
  • For simple linear layouts, leave more complex layouts to the Grid

Attribute reference

Figure from MDN, easy to understand

www.zhangxinxu.com/wordpress/2…

Apply to the Flex container

Illustration-content (spindle alignment)

Alignment and distribution of horizontal subterms

Center in the container (the row where the elements are located), that is, horizontally center space-between elements with equal distance between them, The first element is aligned with the edge of the container at the same distance as the space-around adjacent elements. The first element is half the distance from the edge of the containerCopy the code

Jsbin.com/legunubejo/…

Align-content (stack stretch line)

How flex elements are aligned and distributed vertically for each column

Center in the container (the column where the elements are located), i.e. vertical space-between elements are equidistant from each other, The first element is aligned with the edge of the container at the same distance as the space-around adjacent elements. The first element is half the distance from the edge of the containerCopy the code

Align-items (alignment of items on the side axis)

The vertical alignment of Flex children relative to the Flex container

The flex-start element is aligned at the beginning of the side axis of the container. The Flex-end element is aligned at the end of the side axis of the container. The center element is centered on the side axis of the container. The Stretch Flex subitem is stretched on the side axis to the same height as the containerCopy the code

Jsbin.com/kuyagarimu/…

Important: Vertical center can be achieved by align-items and context-content

Jsbin.com/huxewarano/…

Flex-direction (flex flow direction)

Row is displayed as a row, and the elements are aligned with the text (left to right). Row-reverse elements are displayed as columns, and the elements are aligned with the text (top to bottom).Copy the code

Jsbin.com/medawivifo/…

Flex-wrap (flex newline)

Controls whether a subitem is displayed as a single line or as a newline

Nowrap single-line display, default wrap multi-line display wrap-Reverse multi-line display, bottom upCopy the code

Jsbin.com/nipizuveva/…

Flex-flow (line break for flex-flow direction)

Short for Flex-direction and Flex-wrap

Jsbin.com/xopuferaho/…

Applies to the Flex child

Order (scaling order)

Change the sort position of a Flex child.

-1 is the first 0 and the default value 1 is the lastCopy the code

  1. Red is first on the left
  2. Put blue first on the right

Example: jsbin.com/cawacajaze/…

Align-self (alignment of individual items on side axis)

Controls the vertical alignment of a single Flex child item

flex-start
flex-end
center
baseline
stretch
Copy the code

Flex-grow (scale – expand base)

Extend the width occupied by flex children

Note: The default value is 0 <1 for the total amount of free space extended and the calculated value of this ratio >=1 for all free spaceCopy the code

Jsbin.com/bofujajupu/…

Flex -shrink

The percentage of individual elements that shrink when the Flex container runs out of space

Can be set single or multiple (calculate ratio and sum) Note: Default is 1 <1 Shrink size incomplete, there will be partial overflow >=1 shrink completely, just fill the containerCopy the code

The default value of a subitem in the figure is 1, and the scale of contraction is 1:1:1

Jsbin.com/juziguzera/…

flex-basis

Defines the default size of an element before remaining space is allocated

Auto Default value WidthCopy the code

Jsbin.com/wuhohuqazi/…

flex

The Flex attribute is a contraction of flex-grow, flex-shrink, and Flex-basis

The default value is 0. 1 Auto None: 0. 0 Auto Auto: 1Copy the code

Jsbin.com/ruraratulo/…

Recommend small games

Forget to tap once and the frog goes home: flexboxfroggy.com/