On the 9th day of my participation in the November Gwen Challenge, check out the details of the event: the last Gwen Challenge 2021

1. flexProperty is short for three properties of different sizes:flex-grow flex-shrink flex-basis
flex:1= >flex-basis: 0% flex-grow:1 flex-shrink:1Flex:20% => flex-basis: 20% flex-grow:1 flex-shrink:1
Copy the code

  • flex-basisDefines a reference value for the size of the element, and the other two attributes are based onflex-basisProperty can be set to anywidthValue, in units includingem,pxThe percentage
  • flex-growFor each of the elastic subelementsflex-basisWhen you calculate them, they’re going to add up to a certain width, and they’re not going to add up to exactly fill the width of the elastic container, they might have some space. The extra white space will followflex-growAssign (growth factor) to elastic child elements that, if set to a non-zero value, will allocate the remaining space.
  • flex-shrinkIf the value is set to non-0, the element will not shrink. If the value is greater than 0, the element will shrink to no longer overflow. If it’s enabledflex-wrapThis property is ignored.
2. Direction of elasticity
flex-direction:row | column | row-reverse | column-reverse
Copy the code
3. Properties of an elastic container

Flex-flow is short for flex-direction flex-wrap

  • justify-contentControls the position of child elements on the main axis (horizontal axis)
justify-content: flex-start | flex-end | center | space-between | space-around
Copy the code
  • align-itemsControls the position of child elements on the secondary (vertical) axis
align-items: flex-start | flex-end | center | strench | baseline
Copy the code
  • align-contentIf you turn it onflex-wrap, this property controls the spacing of child elements on the secondary axis (vertical axis), and vice versa,align-contentIs invalid.
align-content: flex-start | flex-end | center | strech | space-between | space-around
Copy the code
  • align-selfControls the alignment of the sub-axis of the child element, overridesalign-itemsThe value of the
align-self: auto | center| flex-start| strench |flex-end |baseline
Copy the code
  • orderMoves a child element from a sibling node to the specified location, overwriting the source order.
order: an integerCopy the code