“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021.”

preface

The last more text challenge of 2021, no more words, let’s do it!!

In the previous chapter we talked about the spindles, intersecting axes, and parent containers in the Flex layout. Today we’ll talk about containers. For details, see display: Flex for CSS layout in my last article.

The container

Containers are divided into parent containers and child containers.

children

align-self

Align-self: Sets the position of the current element on the cross axis. If align-items is currently set, the existing align-items will be overridden.

  • The align – sign: flex – start; // Start alignment

  • The align – self: end; // Align the ends.

  • align-self:center; // Center and align.

  • align-self : baseline; // Align the first line of text with the baseline.

The above three attributes, here is no more redundant, know all understand (*￣) ￣).

  • align-self : strech; // Stretch alignment.

The height of the stretch is the height of the parent container.

flex

The Flex attribute is a shorthand for flex-grow, flex-shrink, and flex-basis, so when it comes to abbreviations, you can always have one value, two values, and three values. But before you worry, let's talk about what these three properties do.

  • Flex-grow: Sets the size of the child container to grow by the original base.

  • Flex-shrink: Sets the shrink rule for child containers. Subcontainers shrink only when the sum of the default widths is greater than the container, depending on the flex-shrink value.

  • Flex-basis: specifies the initial size of the child container along the main axis, which defaults to the size of its own contents.

// one value, no unit number: flex-grow flex: 2; // a value, width/height: flex-basis flex: 10em; flex: 30px; flex: min-content; / / two values: flex - turns up | flex - basis flex: 1 30 px; / / two values: flex - turns up | flex - the shrink flex: 2, 2; / / three values: the flex - turns up | flex - the shrink | flex - basis flex: 2 2 10%;Copy the code

Well, that’s all for today. You are still the best today. Bye Bye!!