Elastic box definition

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models. What it does: It makes it easier to control the alignment of elements. Automatically calculates the size of elements in the layout, whether the size is fixed or dynamically controls the layout direction of elements on the page. Reorder the elements on the screen in a different way than the DOM specifies.

With Flex set, float is disabled, but positioning is still available.

Note: Outside the elastic container and inside the elastic child elements are rendered normally. The elastic box only defines how the elastic child elements are laid out inside the elastic container. Elastic child elements are usually displayed on a single line within the elastic box. By default, there is only one line per container. The following elements show the elastic child elements displayed on a single line, from left to right:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .box { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> </head> <body> <div class="bigbox"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div> </body> </html>Copy the code

The effect is shown below:

The flex-direction attribute

The Flex-direction attribute specifies the position of the elastic child in the parent container.

Syntax: flex-direction:row /row-reverse/column/column-reverse;

The flex-direction values are:

  • Row: Horizontal alignment from left to right (left-aligned), default alignment. Similar to left float.

  • Row-reverse: horizontal alignment (right-aligned, from back to front, with the last item at the top. Sort of right float.

  • Column: indicates the vertical array.

  • Column-reverse: to reverse vertically, from back to front, with the last item at the top.

    Too much code is not an example of their own attemptCopy the code

2, context-content attribute

The justify-content property applies to elastic containers to align elastic items along the main axis of the elastic container.

The justify grammar – the content is as follows: the justify – content: flex – start | flex – end | center | space – between | space – around;

The justify – the value of the content:

  • Flex-start: Elastic items are filled right next to the wardrobe. This is the default. The main-start margin of the first elastic term is placed on the main-start margin of the line, and the subsequent elastic terms are placed flush. The effect is as follows:

  • Flex-end: The elastic item is populated right next to the end of the line. The main-end margin of the first elastic term is placed on the main-end edge of the row, and the subsequent elastic terms are placed flush. The effect is as follows:

  • Center: Elastic items center next to fill. If the remaining free space is negative, the elastic item will overflow in both directions at the same time. The effect is as follows:

  • Space-between: Elastic items are evenly distributed on the row. If the remaining space is negative or there is only one elastic term, this value is equivalent to flex-start. Otherwise, the margin of the first elastic term is aligned with the main-start line of the line, and the margin of the last elastic term is aligned with the main-end line of the line, and then the remaining elastic terms are distributed on the line with equal intervals between adjacent items. The effect is as follows:

  • Space-around: Elastic items are evenly distributed on a line with half of the space between them. If the remaining space is negative or there is only one elastic term, this value is equal to center. Otherwise, the elastic items are distributed along a row evenly spaced from each other (say 20px), with half of the space between the two sides and the elastic container (1/2 x 20px=10px). The effect is as follows:

Align -items property

Align-items Sets or retrieves the alignment of elastic box elements in the lateral (vertical) direction.

Grammar: align – items: flex – start | flex – end | center | baseline | stretch

Align-items have the following values:

  • Flex-start: The boundary of the lateral (vertical) starting position of the elastic box element is close to the lateral starting boundary of the row.
  • Flex-end: The boundary of the start position of the side axis (vertical axis) of the elastic box element is immediately adjacent to the end boundary of the side axis of the row.
  • Center: The elastic box element is centered on the lateral axis (vertical axis) of the row. (If the size of the line is smaller than the size of the elastic box element, the same length will overflow in both directions).
  • Baseline: Equivalent to ‘flex-start’ if the inner and side axes of an elastic box element are the same. In other cases, this value will participate in baseline alignment.
  • Stretch: If ‘auto’ is used to specify the size of the side axis, it will make the size of the project’s margin box as close to the size of the row as possible, but conform to the limits of the ‘min/max-width/height’ property.

Flex -wrap attribute

The flex-wrap attribute is used to specify the line wrap method for the child elements of the elastic box.

Grammar: flex – wrap: nowrap | wrap | wrap – reverse | initial | inherit;

Its values are:

  • Nowrap – By default, elastic containers are single lines. In this case the elastic child may overflow the container.
  • Wrap – Elastic container for multiple lines. In this case, the overflow part of the elastic subitem will be placed in the new line, and line breaking will occur inside the subitem
  • Wrap-reverse – Reverses the wrap arrangement.

Align -content attribute

The align-content property is used to modify the behavior of the flex-wrap property. Similar to align-items, but instead of setting the alignment of elastic child elements, it sets the alignment of individual rows.

Grammar: align – content: flex – start | flex – end | center | space – between | space – around | stretch

Its values are:

  • stretch– the default. The rows will stretch out to take up the remaining space.
  • flex-start– Stack each row to the start position of the elastic box container.
  • flex-end– Stack each row to the end of the elastic box container.
  • center– Stack each row in the middle of the elastic box container.
  • space-between– The rows are evenly distributed in the elastic box container.
  • space-around– The rows are evenly distributed in the elastic box container, with each end retaining half of the spacing between the child elements.

Sixth, the align – self

The align-self attribute sets the alignment of the elastic element itself in the lateral (vertical) direction.

Grammar: align – self: auto | flex – start | flex – end | center | baseline | stretch

Its values are:

  • Auto: If ‘align-self’ is ‘auto’, it evaluates to the ‘align-items’ value of the element’s parent, or ‘stretch’ if it has no parent.
  • Flex-start: The boundary of the lateral (vertical) starting position of the elastic box element is close to the lateral starting boundary of the row.
  • Flex-end: The boundary of the start position of the side axis (vertical axis) of the elastic box element is immediately adjacent to the end boundary of the side axis of the row.
  • Center: The elastic box element is centered on the lateral axis (vertical axis) of the row. (If the size of the line is smaller than the size of the elastic box element, the same length will overflow in both directions).
  • Baseline: Equivalent to ‘flex-start’ if the inner and side axes of an elastic box element are the same. In other cases, this value will participate in baseline alignment.
  • Stretch: If ‘auto’ is used to specify the size of the side axis, it will make the size of the project’s margin box as close to the size of the row as possible, but conform to the limits of the ‘min/max-width/height’ property.

Seven, flex

The Flex attribute is used to specify how the elastic child elements allocate space.

Grammar: flex: auto | initial | none | inherit | / flex – turns up | | / flex – the shrink | | [flex – basis]

Its values are:

  • Auto: The calculated value is 1. 1 Auto
  • Initial: The calculated value is 0. 1 Auto
  • None: The calculated value is 0. 0 Auto
  • Inherit: Inherit from the parent element
  • [flex-grow] : Defines the expansion ratio of the elastic box element.
  • [flex-shrink] : Defines the shrink rate of elastic box elements.
  • [flex-basis] : defines the default reference value for the elastic box element.

Refer to the rookie tutorial RUNOOB.COM preparation: original link www.runoob.com/css3/css3-f…