Flex layouts are used to provide maximum flexibility for the boxed model, and any container can be specified as a flex layout
Properties such as float clear and vertical-align for child elements that are set to flex layout are invalidated
Just set the display to flex
Elements that use flex layout, called Flex Container Flex container All of his child elements are automatically called container members, called Flexitem
The default two axes exist in the container: horizontal spindle main axis and vertical cross axis cross axis
The starting position of the main axis is called the main start end position called Main
The start position of the cross axis is called the cross start end position called Cross
Items are arranged by default along the main axis
The spindle space occupied by a single project is called the Cross axis space occupied by main size, called Cross size.
Container's properties
The Flex-direction property determines the direction of the spindle (that is, the arrangement direction of the item)
Flex-wrap items are lined up on one line Flex-wrap property definition if one axis doesn't fit, how do I wrap
The Justify-content property defines how an item is aligned on the spindle
Flex-start Flex-end Center Space-between etc
The Align-items property defines how items are aligned on the cross axis
The properties that are set on the project are:
Order: Define the arrangement of the items the smaller the number, the more the default is 0
Flex-grow property defines an item's magnification by default of 0
The Flex-shrink property defines the reduction of the project by default of 1
The Align-self property allows a single item to be aligned differently from other items
Compatible with mobile device display effects
<meta name= "viewport" content= "initial-scale=1, maximum-scale=1, User-scalable=no, width=device-width" >
Width=device-width width equals current device width
Intial-scale Initial scaling defaults to 1.0
Minimum-scale allows the user to zoom to the minimum ratio
Maximum-scale allows the user to zoom to the maximum percentage
User-scalable whether users can scale manually
Set IE render mode default to top browser document mode it's IE8.
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<! The doctype> declaration must be the first line of the HTML document before the HTML tag
Instructions for a Web browser about which HTML version the page uses to write
<! DOCTYPE html>