This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Powerful Flex layout

Flex layouts are a very popular solution for both PC and mobile layouts.

First of all, understand the various flex properties/property values, and their use/effect!

  1. justify-contentHorizontal alignment (The X axis )
  2. align-itemsVertical alignment (Y )
  3. flex-directionOrientation of elements
  4. orderElement order
  5. align-selfControls the alignment of individual elements
  6. flex-wrapSplit element (newline)
  7. flex-flowAbbreviation (merge)flex-direction 和 flex-wrap
  8. align-contentDistance between rows

1. justify-contentHorizontal alignment,

Context-content aligns flex elements with the main axis (X-axis) : used to adjust horizontal alignment of child elements:

The context-content CSS attribute aligns elements horizontally and takes the following parameters:

  • flex-start: Aligns elements with the left end of the container. (default)
  • flex-end: Elements are aligned with the right end of the container.
  • center: The element is centered in the container.
  • space-around: Keep equal distances around elements.
  • space-between: Keep equal distances between elements. Relative to thespace-aroundThe distance between the elements is larger, and the distance between the elements and the container is smaller.
  • space-evenly:

2. align-itemsVertical alignment

Align-items align multiple elements on the cross axis (Y-axis), which is the problem of adjusting child elements vertically.

The align-items CSS property aligns elements vertically and optionally has the following values:

  • flex-start: the element is aligned with the top of the container.
  • flex-end: The element is aligned with the bottom of the container.
  • center: The element is vertically centered.
  • baselineThe: element is displayed at the baseline of the container.
  • stretch: Elements are stretched to fill the container. (default)

3. flex-directionOrientation of elements

To adjust the orientation of elements, whether they are arranged backwards or backwards, you can use the flex-direction attribute.

This CSS property defines the orientation of the elements in the container and accepts these values:

  • row: Elements are placed in the same direction as the text. (default)
  • row-reverse: Elements are placed in the opposite direction from the text.
  • column: Elements are placed from top to bottom.
  • column-reverse: Elements from down to up.

Note that when you reorient a row or column, flex-start and flex-end of justify-content are also reoriented.

Note: When Flex is in column orientation, context-content controls vertical alignment and align-items controls horizontal alignment.

4. orderElement order

Order determines the order of flex elements.

Sometimes it is not enough to simply reorient a row or column. In these cases, we can set the order attribute for a single element. The default value for the attribute of the element is 0, but we set this attribute to positive or negative.

Try using order to adjust the order of elements.

5. align-selfControls the alignment of individual elements

Another attribute you can use to control individual elements is align-self. This property accepts the same values as align-items.

  • flex-start: the element is aligned with the top of the container.
  • flex-end: The element is aligned with the bottom of the container.
  • center: The element is vertically centered.
  • baselineThe: element is displayed at the baseline of the container.
  • stretch: Elements are stretched to fill the container. (default)

6. flex-wrapSplit element (newline)

Flex elements must be on a single line or wrap multiple lines.

The flex-wrap attribute spreads the elements out. This property accepts these values:

  • nowrap:All the elements are on one line. (default)
  • wrap:The element is automatically converted to multiple lines.
  • wrap-reverse: Elements are automatically converted to multiple rows in reverse order.

7. flex-flowshorthand

The flex-direction and flex-wrap attributes are often used together, so there is an abbreviated flex-flow attribute. This abbreviated attribute takes the value of two attributes separated by a space.

For example, you can use flex-flow: Row wrap to set lines and wrap them.

flex-flow: <flex-direction> <flex-wrap>;
Copy the code

8. align-contentDistance between rows

Align the axes of the container when there is extra space for the cross axes.

You can use align-content to determine how far apart the lines are. This property accepts these values:

  • flex-start: Multiple lines are concentrated at the top.
  • flex-end: Multiple lines are clustered at the bottom.
  • center:Multiple rows are centered.
  • space-between: Keep equal distances between rows.
  • space-around: Keep equal distances around each line.
  • stretch:Each row is stretched to fill the container. (default)

This can be confusing, but align-content determines the spacing between rows, while align-items determines where the entire element is in the container. Align-content has no effect on a single line.

More practice to master, and then flexible use

Practice Flex online

Official support for comment sweepstakes

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details