flex

Flex-basis :0% indicates that the recommended support is 0

Flex-basis :auto means that the fixed size is determined by the content. Since the element is not elastic, therefore, the content within the element does not wrap, and the final size is usually expressed as the maximum content width.

Initial default values

flex: 0 1 auto

Does not grow to take up the extra space in a Flex container (flex-grow:0), shrinks to fit the container (flex-grow: 1), and adjusts the size according to its width and height (Flex-basis :auto).

auto

flex: 1 1 auto

Subitems grow to take up the extra space left in the Flex container (flex-grow:1), shrink to fit the container (Flex-shrink :1), and adjust their size according to their width and height properties (Flex-basis :auto).

none

flex: 0 0 auto

Subitems do not grow to occupy the extra space left in the Flex container (flex-grow:0), do not shrink to fit the container (flex-shrink:0), and adjust their size according to their width and height (Flex-basis :auto).

flex:0

flex: 0 1 0%

flex:1

flex: 1 1 0%

  • flex:initialRepresents the default Flex state, no special Settings required, suitable for the distributed layout of small control elements, or the dynamic layout of an item of content;
  • flex:0It is suitable to set on the parent element of the replacement element.
  • flex:noneWorks with fixed or small control elements, such as buttons, without newlines.
  • flex:1Suitable for equal layout;
  • flex:autoSuitable for content based dynamic adaptation layout;

Width calculation

Maximum minimum size limit > elastic growth or contraction > base sizeCopy the code
  • Base size by CSSflex-basisProperties, andbox-sizingBox model co-determination;
  • Elastic growth refers toflex-growProperty, elastic contraction refers toflex-shrinkProperties;
  • Maximum and minimum size limits refer tomin-width/max-width.widthCSS properties, as wellmin-contentMinimum content size.

reference

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…