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

In learning [CSS], modern layout solutions: Flex layout is very convenient and fast, especially horizontal and vertical solutions, using Flex is particularly simple there is no! Today we are going to learn more about it.

CSS Flex Elastic box layout

Flexible box -MDN is flexible box is commonly referred to as Flex

Elastic boxes are a one-dimensional layout method for laying out elements by row or column. Elements can expand to fill additional Spaces and shrink to fit smaller Spaces.

  • Flex container: the parent element
  • The flex project: child elements

By setting display to the element: Flex makes the layout of the element elastic. The section container is an elastic box (Flex container), and its child elements, Section >. Box, can be easily arranged, solving many common problems in our work

section {
  display: flex;
}
article {
  flex: 1;
  / *... * /
}
Copy the code

Let’s look at some properties that the article child of the elastic box can set to show how the child elements are arranged.

Note: If you want to set the inline element to flexible box, you can also set the display property to inline-flex.

Flex flex box items arrangement mode

  1. The main axis is along the main axisThe X axisPermutation is the horizontal direction
  2. Cross axis, perpendicular to the direction of the principal axis, i.eYThat’s the way up and down
  3. Set updisplay: flexParent element (as shown above<section>) is calledFlex Container
  4. inFlex containerThe element of a flexible box is calledFlex Item (Flex Item): (The above element.

Flex properties

MDN goes directly to Flex

The Flex CSS shorthand property sets how an elastic project can grow or shrink to fit the space available in its elastic container.

When the parent declares display: flex, the child element can have a Flex attribute that represents how it behaves in the parent element’s elastic box.

This Flex property is a shorthand for the following CSS properties:

  • flex-grow
  • flex-shrink
  • flex-basis

It is distinguished by attributes on parent and child elements

1. Add to the parent element

1.1 the display: Flex/inline-flex 1.2 flex-direction Changes the direction of the spindle child elements 1.3 flex-wrap Scatter child elements 1.4 Flex-flow short (merge)flex-direction and Flex-wrap 1.5 context-content horizontal alignment on the main axis

Alignment on the side axis: 1.6 align-items (Y axis) Vertical alignment 1.7 Align – Content Distance between rows Problem Single line does not work After alignment adjustment, there is no space up and down

1.1 Inline element Flex

Inline elements can be set to display: inline-flex;

1.2 Change the direction of the spindle:flex-direction

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.

1.3 Wrap child elementsflex-wrap

Specifies that flex child elements must be multiple lines on a single or wrap line.

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.

1.4 flex-flowAbbreviation (merge)

Flex-flow merges

and

This abbreviated attribute takes the value of two attributes separated by a space.

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

Grammar:

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

1.5 Alignment on main axis (horizontal X axis)justify-content

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

Alignment on the side axis

1.6. 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)

1.7. align-contentDistance between rows

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

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.

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)

2. Add to child elements

2.1 Order: 0 2.2 Scaling: Flex-grow: 0 2.3 Shrinking flex-shrink: 1 2.4 Shortening: Flex 2.5 self-alignment: align-self

2.1 Order of child elementsorder

Order determines the order of flex child 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.

2.2 Amplification Ratio:flex-grow: 0

2.3 to reduce theflex-shrink: 1

2.4 abbreviations:flex

2.5 Self-Alignmentalign-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)

Practice Flex online

Proficiency requires a lot of practice.

Little frog goes home (Align with lotus leaf)

Comment interactive raffle Nuggets around (official support)

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