Use of elastic box / expansion box (Flex)

Elastic box （flex）

css A means of layout in , It is mainly used to replace floating to complete the layout of the page , It can make elements elastic , Let the elements change with the size of the page .

Elastic container ： To use an elastic box, you must first set an element as an elastic container

• display：flex, Set as a block level elastic container
• display：inline-flex, Set as in-line elastic container

Elastic element ： The child element of the elastic container is the elastic element .

• flex-direction： Arrangement of elastic containers
  – row： The default value is , Elastic elements are arranged horizontally from left to right
  – row-reverse： Reverse horizontal arrangement , From right to left
  – colum： Elastic elements are arranged vertically from top to bottom
  – colum-reverse： Elastic elements are arranged vertically from bottom to top in reverse

• flex-grow： The coefficient of extension of the elastic element

• flex-shrink： Shrinkage coefficient of elastic element

• flex-wrap： Elastic elements wrap automatically in elastic containers
  – nowrap： The default value is , Don't wrap
  – wrap： Elements wrap automatically along the minor axis
  – wrap-reverse： Elements wrap in the opposite direction of the minor axis

• justify-content： How to allocate the blank interval on the spindle
  – flex-start： Arrange along the starting edge of the spindle
  – flex-end： Arrange along the end edge of the spindle
  – center： The elements are centered
  – space-around： White space is distributed on both sides of the element
  – space-evenly： Blank space cannot be divided into one side of the element
  – space-between： Blank space can't be evenly divided between elements

• align-item： Alignment of elements on the minor axis
  – stretch： The default value is , Set the length of the element to the same value
  – flex-start： Elements do not stretch , Align along the starting edge of the minor axis
  – flex-end： Elements do not stretch , Align along the final edge of the minor axis
  – center： Align center
  – baseline： Baseline alignment

• align-content： Distribution of the blank part of the secondary axis , Optional value and justify-content identical

• flex-basis： The basic length of the element on the spindle . If the spindle is transverse , Then specify the width ; If the spindle is longitudinal , Then the specified height .