Detailed explanation of CSS3 elastic expansion box

use

• Flexible boxes play a vital role in front-end web page layout, and the same is true for mobile terminals. Mastering the use of flexible boxes is very important for writing adaptive pages at present. Mastering this layout rule is an essential skill.
  

Description of the elastic box model

• The main axis is the axis that runs along the direction in which the flex items are placed (e.g. horizontal rows, vertical columns on a page). The start and end of this axis are called main start and main end**.
• The cross axis is the axis that is perpendicular to the direction in which the flex items are placed. The start and end of the axis are called the cross start and cross end**.
• The parent element (in this case, the <section> ) that has display: flex set is called a flex container.
• Elements that behave as flexible boxes in a flex container are called flex items.
  

Commonly used properties

flex-direction (specifies the arrangement of sub-elements in a flexible container)

   row default value. The elements will be displayed horizontally, as a row.
   row-reverse In reverse order.
   The column element will be displayed vertically, as a column.
   column-reverse Same as column, but in reverse order.

flex-wrap (The property specifies whether the flex container is a single line or multiple lines, and the direction of the cross axis determines the direction in which new lines are stacked.)

  nowrap default value. Specifies that elements should not be split into rows or columns.
  wrap specifies that elements should be broken into rows or columns when necessary.
  wrap-reverse specifies that elements are wrapped in rows or columns when necessary, but in reverse order.

The align-items property defines the alignment of flex items in the vertical axis direction of the current row of the flex container, that is, it specifies the top and bottom row styles.

   stretch The default value. Items are stretched to fit the container.
   center The item is located in the center of the container.
   flex-start items are positioned at the beginning of the container.
   flex-end items are positioned at the end of the container.
   baseline The item is located at the container's baseline.

justify-content is used to set or retrieve the alignment of flexible box elements in the main axis (cross axis) direction.

  flex-start items are positioned at the beginning of the container.
  flex-end items are positioned at the end of the container.
  center The item is located in the center of the container.
  space-between Items are placed inside a container with space between rows.
  space-around Items are placed inside a container with space before, between, and after each line.

Flexible child element properties

1.order attribute

.flex-container .flex-item { order: <integer>; }

<integer>: Use integer values ​​to define the sorting order, with smaller values ​​at the front. Can be negative value, default is 0.

2.align-self sets or retrieves the alignment of the elastic box element itself in the cross axis (vertical axis) direction. (Similar to align-items)

The above is a detailed explanation of the CSS3 elastic expansion box. For more information about the CSS3 elastic expansion box, please pay attention to other related articles on 123WORDPRESS.COM!