CSS Review and Flex layout

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>