2.8 CSS flex box model

1. Model introduction
  • Traditional layout refers to: based on the traditional box model, mainly relying on: display attribute + position attribute + float attribute.
  • In 2009, w3C proposed a new box model – + Flexible Box (flexible box model, also known as: flexible box).
  • It can easily control: element distribution, element alignment, element visual order…
  • Up to now, except for some IE browsers that do not support it, other browsers have all supported it.
  • The emergence of the telescopic box model has gradually evolved into a new layout scheme – flex layout.
  • Flex layout is currently widely used on mobile devices because traditional layout cannot be well presented on mobile devices.
2. Scaling container
  • Set display:flex or display:inline-flex to an element, and the element becomes a flex container.
  • display:inline-flex is rarely used because the parent container of multiple flex containers can also be set as a flex container.
  • An element can be: a flex container and a flex item at the same time.
3. Flexible project
  • Only the child elements of the flex container become flex items, and descendants such as grandchild elements and great-grandchild elements are not flex items.
  • No matter what kind of element it is (block, inline block, inline), once it becomes a flex item, it will all be “blocked”.
4. Spindle side shaft
  • Main axis: The telescopic items are arranged along the main axis. The main axis is horizontal by default, and the default direction is: from left to right (the left is the starting point and the right is the end point).
    • Spindle direction: flex-direction
      • row: The main axis direction is horizontally from left to right (default value)
      • row-reverse: The main axis direction is horizontally from right to left.
      • column: The main axis direction is vertical from top to bottom.
      • column-reverse: The main axis direction is vertical from bottom to top.
    • Spindle wrapping method: flex-wrap
      • nowrap: no line breaks
      • wrap: automatic line wrapping, the scalable container is not enough to automatically wrap. A total height greater than “sum of all rows” will leave gaps under each row.
      • wrap-reverse: Reverse line wrap. Arrange starting from the lowest row and work your way up.
    • Main axis alignment: justify-content
      • flex-start: Spindle starting point alignment (default value)
      • flex-end: Spindle end point alignment.
      • center: center alignment
      • space-between: Evenly distributed, aligned at both ends (most commonly used).
      • space-around: Evenly distributed, the distance between the two ends is half of the middle distance.
      • space-evenly: Evenly distributed, the distance between the two ends is the same as the distance in the middle.

    • Basic length of spindle: flex-basics
      • Setting the reference length of the main axis will invalidate the width and height: if the main axis is horizontal, the width will be invalid; if the main axis is longitudinal, the height will be invalid.
      • The browser calculates whether there is extra space on the main axis based on the value set by this attribute. The default value is auto, which is: the width or height of the retractable item.
  • Side axis: The side axis perpendicular to the main axis is the side axis. The side axis is vertical by default. The default direction is: from top to bottom (the top is the starting point and the bottom is the end point).
    • Cross axis alignment
      • One line: align-items
        • flex-start: Align the starting point of the side axis.
        • flex-end: The end point of the side axis is aligned.
        • center: The midpoint of the cross axis is aligned.
        • baseline: The baseline alignment of the first line of text in the flex item.
        • stretch: If the height of the scalable item is not set, it will occupy the entire height of the container (default value)

      • Multiple lines: align-content
        • flex-start: aligned with the starting point of the cross axis.
        • flex-end: aligned with the end point of the cross axis.
        • center : Aligned with the midpoint of the cross axis.
        • space-between: aligned with both ends of the side axis, evenly distributed in the middle.
        • space-around: The distance between telescopic items is equal, twice as large as the distance from the edge.
        • space-evenly: completely bisected on the lateral axis.
        • stretch: occupy the entire side axis. –default value

  • Center the element horizontally and vertically
/*Plan 1*/
parent element {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Option II*/
parent element {
  display: flex;
}
flex project {
  margin: auto;
}
5. Stretch and shrink
  • Stretch: flex-grow
    • Fex-grow defines the enlargement ratio of the telescopic item, the default is 0, that is: even if there is remaining space on the main axis, it will not be stretched (enlarged) rules:
    • If the flex-grow value of all flex items is 1, then: they will equally divide the remaining space (if there is space).
    • If the flex-grow values of the three flex items are: 1, 2, and 3 respectively, the remaining space will be divided proportionally.
  • Shrink: flex-shrink
    • flex-shrink defines the compression ratio of the item, the default is 1, that is: if there is insufficient space, the item will shrink.
    • The calculation of shrink items is a little more complicated. Let’s take a scenario as an example: if there are three shrink items, the widths are: 200px, 300px, 200px, their flex-shrink values are respectively It is: 1, 2, and 3. If you want to accommodate three items, the total width needs to be 700px, but the current container is only 400px, which is still 300px short, so everyone has to shrink before they can put it down. The specific shrinkage value is calculated like this:
      • Step 1: Calculate the denominator: (200×1) + (300×2) + (200×3) = 1400
      • Step 2: Calculate the ratio
        • Item 1: (200×1) / 1400 = Proportional value 1
        • Item 2: (300×2) / 1400 = Proportional value 2
        • Item 3: (200×3) / 1400 = Proportional value 3
      • Step 3: Calculate the final shrinkage size:
        • Project 1 needs to be shrunk: scale value 1 x 300
        • Item 2 needs to be shrunk: scale value 2 x 300
        • Item three needs to be shrunk: scale value 3 x 300
    • Note: If there is a shrinkage deviation, in most cases it is caused by shrinking the border of the item.
6.flex composite properties
  • flex is a composite attribute. It consists of three attributes: flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto.
  • If you write flex:1 1 auto, it can be abbreviated as: flex : auto
  • If you write flex:1 1 0, it can be abbreviated as: flex:1
  • If you write flex:0 0 auto, it can be abbreviated as: flex : none
  • If you write flex:0 1 auto, it can be abbreviated as: flex:0 auto (that is, the initial value of flex)
7. Item sorting and individual alignment
  • Item sorting:
    • The order attribute defines the order in which items are sorted. The smaller the value, the higher the ranking. The default is 0.
  • Align individually:
    • Through the align-self attribute, you can adjust the alignment of a flex item individually
    • The default value is auto, which means inheriting the align-items attribute of the parent element.