Flex Layout

Beginning to summarize

  • Turn on the Flex layout using the display: flex property.
  • Flex layouts have spindles and cross axes that control alignment using context-content and align-items && align-content, respectively.
  • Supports row or column sorting, using flex-direction, as well as row-reverse and column-reverse sorting.
  • Child elements can be shortened by Flex, or flex-grow, flex-shrink, or flex-basis to adjust the size and size of the element.
  • Flex -wrap allows you to set the display of flex child elements to fold.
  • Scaling problems with nested Flex containers

Enable flex layout

Div alignment (up and down by default)

The parent controls the children, and properties are written on the parent

Flex layout has an implicit coordinate space with a main-axis in horizontal direction and a cross-axis in vertical direction:

photoCabu_husky

To arrange Flex in columns, just set:


flex-direction: column; // The default is rowCopy the code

Flex layout also supports reverse row and column layout:

  • row-reverse

  • column-reverse

Justify-content :flex-start center end around between

Align-items:

Align-content(multiple lines) space-around space-between

alignment

Illustration-content controls the alignment of the main axis (that is, horizontally)

  • flex-start

Flex-start is the default, left-to-right, left-aligned.

  • center

Center alignment, where the entire Flex container is centered in the middle of the page:

  • flex-end

Aligned on the right

  • space-between

Alignment, in which the first and last elements edge and the middle element bisects the remaining space:

  • space-evenly

Scattered alignment, where all elements bisect space:

  • space-around

A space-instituted instituted similar to the space instituted, but the left and right margins are 1/2 of the evenly split space.

Align-items # control cross axis direction

  • stretch

Stretch is the default for align-items, which automatically stretches child elements to the height of the container.

  • flex-start

Aligned up, at the top of the beginning of the crossing axis, you can see that the child elements no longer fill the container height:

  • center

Center aligned:

  • flex-end

Bottom aligned:

  • baseline

If the child element text size and line height are different, the child element will be aligned to the baseline of the text:

Align-content (for multiple lines)

  • space-around
  • space-between

Overrides the alignment of child elements

Children can control their alignment on the intersecting axis by setting align-self, such as aligning.flex3 children vertically downward:

.flex {
  display: flex;
  align-items: flex-start;
}

.flex3 {
  align-self: flex-end;
}
Copy the code

The horizontal alignment of child elements is not controlled by the context-self attribute, but by using the margin attribute, which controls the horizontal alignment by setting the left or right margin to auto, such as flex3 to the far right:

.flex3 {
  margin-left: auto;
}
Copy the code

The child element can adjust the size of the space by setting flex properties

If the child element has a width set, it is taken from the width value; if not, it is the content width. Using Flex-basis, you can manage both the width in row mode and the height in column mode. You can force the minimum width by setting min-width

Consider flex-grow and flex-shrink

The flex property, which is a contraction of the preceding three properties, defaults to 0, 1 auto, which does not grow but shrinks by 1, and flex-basis is auto, which is taken from the user-defined width or width of the content.

Fold line layout

You can use the flex-wrap attribute to fold the elements so that each row has no more elements than the width of the container.

The main difference between CSS Grid layout and CSS Grid layout is that it does not control the proportion of individual rows and columns, such as crossing rows and columns, nor can it freely locate elements to specific locations.

References:

【 1 】 zxuqian. Cn/CSS – flex – bo…

(2) www.bilibili.com/video/BV1P7…