“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Flex layout

In the past, layout has always been an integral part of web development, from the earliest table layouts, to DIV+CSS, and now to CSS3’s scale-out layout. Recently, flex layout has been used a lot in small program writing projects. It is also very adaptable, and its strong scalability plays a great role, so here is a brief overview of Flex layout knowledge.

Reference link: developer.mozilla.org/zh-CN/docs/…

First, let’s clarify the meaning of the main axis and the side axis:

Main axis: The main axis of the Flex container is used to configure Flex projects. The default is horizontal (x-forward).

Side axis: The axis perpendicular to the main axis is called the side axis. By default, it is vertical (y is negative).

Direction: the default axis is left to right, and the default side axis is top to bottom

The spindles and side axes are not fixed, and the direction of the spindles is set with flex-direction. The first step is to specify a parent box as a flex box by specifying: display: flex

Parent Common properties (sets the parent element)

1. flex-direction

The flex-direction attribute determines the direction of the main axis. Note that this attribute is set for the parent element.

  • row: The default value is left to right
  • row-reverseFrom right to left
  • column: From top to bottom
  • column-reverse: From bottom to top

The results are as follows:

The default value along the positive X-axis (flex-direction: row) :

It’s going in the negative direction of the X-axisflex-direction: row-reverse:

2. justify-content

This property defines the alignment of subitems on the main axis. (The following figure shows the case where the main axis is in the positive direction of the X-axis)

  • Flex-start: The default value, starting from the head, or left to right if the main axis is the X-axis

  • Flex-end: arrange from the end

  • Center: Align the axis in the center (horizontal center if the axis is the X-axis)

  • Space-around: divides the remaining space

  • Space-between: Tie edges on both sides and divide the remaining space (important)

3. flex-wrapattribute

By default, all the subitems are lined up, which means there is no line feed by default. When the total width of all the child items is greater than the width of the parent element, the child items evenly divide the width of the parent element. As shown in the figure below, the original width given to the child element is100px, the parent element width is500pxWhen the width of the parent element is exceeded, the width of the child element is narrowed into the parent element.

If you don’t want this effect and want to keep the child elements as they are, you can use itflex-wrap: wrapTo set it to be newline. The effect is as follows:

4. Align-item attribute (single line)

This property sets the arrangement of the child elements on the side axis (the flex-direction above is set to the main axis), that is, if you want to center the child items horizontally and vertically, it is equivalent to centring the project on the main axis and the side axis. The align-item property controls how the children are arranged on the side axis (the default is the Y-axis) and can be used when the children are in a single line.

  • Flex-start: The default value, from top to bottom

  • Flex-end: from bottom to top

  • center: crowded together center (vertical center)

  • Don’t give the boxes height when using this. Setting this property will stretch the box along the lateral axis

5. Align-content (multiple lines)

The align-items property above is for single-line subitems, while the align-content property works when the subitems are swapped (multiple lines) and has no effect under a single line.

  • Flex-start: Default, starting at the head of the side axis

  • Flex-end: Starts at the end of the side axis

  • Center: displayed in the middle of the side axis

    The first three items have similar effects to the align-items, so I won’t show them all

  • space-around: Subterm bisects the remaining space on the side axis

  • space-between: Subterms are distributed at both ends of the lateral axis and then bisects the remaining space

  • stretch: sets the height of the child element to the height of the flat molecular element. Similarly, the child cannot be set to a height. The box is stretched along the lateral axis

6. flex-flowattribute

Flex-flow is a composite property of flex-direction + flex-wrap.

flex-diection: column;
flex-wrap: wrap;
/* is equal to */
flex-flow: column wrap;
Copy the code

Child Common attributes (setting child elements)

A. the flex properties

The Flex property defines the subproject to allocate the remaining space, using Flex to indicate the number of copies. For example, Flex: 1 is the average width of the child and the parent

.item {
    flex: <number> /* Default1*/
}
/* Give the second box flex:2; * /
Copy the code

B. Align-self controls how the child itself is arranged on the side axis

The align-self property overrides the align-items property. The default value is auto, which means that it inherits the parent align-items property. If there is no parent element, it is equivalent to stretch.

align-self: flex-end;
Copy the code

C. The order attribute defines the order in which items are arranged

The smaller the value, the higher the order, the default is 0.

Note: This is different from z-index

That is, when the value of order is small, the boxes are placed first, not in the order of the label code. Give the second box order:-1; align-self: flex-end; The effect is as follows:

conclusion

  1. flex-directionAdjust spindle direction (default is horizontal)
  2. justify-contentAdjust spindle alignment
  3. align-itemsAdjust side axis alignment (child elements can be usedalign-selfCover)
  4. flex-wrapControls whether to wrap lines
  5. align-contentStack alignment (individual lines generated by flex-wrap)
  6. flex-flowisflex-direction + flex-wrapShort form for
  7. flexIs the scale of the subproject on the main axis. If the Flex attribute is not specified, the sub-project does not participate in scaling allocation
  8. orderControl the order of the subitems, sorted in positive order, from small to large

When taking screenshots, I put the pictures into a folder, and then accidentally press CTRL +Z when carrying them, all the pictures suddenly disappeared. That was a moment of heartbreak orz, and then took another screenshot and copied and pasted QWQ