CSS3 box model + flex

1. Box model

Standard box model:

• w=width+padding+border
• h=height+padding+border

Weird box model (ie box model)

• w=width contains (padding+border)
• h=height contains (padding+border)

2. CSS3 flexible box (key new version of flexible box)

Flexbox:

1. After setting as a flexible box, the parent element is the container and the child element is the item
2. There are two axes in the flex box, the default horizontal axis is the main axis, and the vertical axis is the side axis
3. Items are arranged along the main axis by default
4. Float, clear float, vertical-align are effective

Container properties (set for parent elements, affect child elements):

1. display: set to flexbox;

   flex

   inline-flex

2. flex-direction: Set the direction of the main axis

   • row horizontal axis
   • row-reverse reverse horizontal axis
   • column vertical axis
   • column-reverse reverse vertical axis

3. flex-wrap: whether to wrap

   • nowrap: do not wrap, the default value
   • wrap newline
   • wrap-reverse reverse line break

4. Comprehensive writing method: flex-flow: Whether the direction of the main axis is changed;

5. justify-content: main axis alignment

   • flex-start: starting position
   • flex-end: end position
   • center: center alignment
   • space-around: bisect at both ends
   • space-between: align both ends
   • space-evenly: average distribution'

6. align-items: side axis alignment (single line, no line breaks)

   • flex-strat: starting position
   • center centered
   • flex-end end position
   • baselien text bottom alignment

7. align-content: side axis alignment (multiple lines, used when there is a line break)

   • flex-start: starting position
   • flex-end: end position
   • center: center alignment
   • space-around: bisect at both ends
   • space-between: align both ends
   • space-evenly: average distribution

Item properties (set for sub-elements, affect sub-elements):

1. align-self: side axis alignment

   • flex-strat: starting position
   • center centered
   • flex-end: end position
   • stretch
   • auto default value, consistent with the align-items value of the parent element

2. order : reverse sort

   The bigger the number, the further back, and vice versa, the more forward, it can be negative

3. flex: zoom size

   • flex-grow: zoom in
   • flex-shrink: shrink
   • flex-basis: size

3. Multiple columns

Multi-column layout:

column-count: column

column-gap: column spacing

column-rule: column border size shape color (same as border)

column-fill : filling method

• balance: as evenly distributed as possible
• auto fills the previous column first

column-span: Whether to span columns

• ​ none does not span columns
• all spans all columns

column-width: column width