Flex layout principle and common parent elements

One .flex Layout principle

  use Flex Elements of layout , be called flex Containers , All its child elements automatically become container members , be called Flex project

summary flex Layout principle ：

By adding flex attribute , To control the position and arrangement of sub boxes

Two . Common parent properties

1.flex-direction: Set the spindle direction

2.justify-content: Set the arrangement of sub elements on the spindle

3.flex-wrap: Set whether the child element should wrap

4.align-content: Set the arrangement of the child elements on the side axis （ Multiple lines ）

5.align-items: Set the arrangement of the child elements on the side axis （ A single ）

6.flex-flow： Compound attribute , It's equivalent to setting flex-direction and flex-wrap

3、 ... and .flex-direction Set the direction of the spindle

flex-direction Property determines the direction of the spindle （ That is, the arrangement direction of the project ）

Be careful ： The main shaft and side shaft will change , Just look flex-direction Who is the spindle set to , The rest is the side shaft , And our child elements are sorted according to the main axis

row    The default is left to right

row-reverse    From right to left

column    From top to bottom

column-reverse    From bottom to top

Four .justify-content Set the arrangement of sub elements on the spindle

           justify-content Property defines the alignment of the item on the spindle

Be careful ： Before using this property, be sure to determine which spindle is

flex-start    Default start from scratch , If the spindle is X Axis , From left to right

flex-end    From the tail

center    Align in the center of the spindle （ If the spindle is x The axis is centered horizontally ）

space-around    Divide the remaining space equally

spance-between    We'll stick the edges on both sides first In bisecting the remaining space  

5、 ... and .flex-wrap Set whether the child element should wrap

nowrap    The default value is , Don't wrap

wrap      Line break