Flex layout

Catalog

rem Text adaptation

rem Company

flex Definition

flex Parent container

flex Parent container properties

Layout subproject  

attribute

Case study

Case related code

Case renderings

rem Text adaptation

rem Company

1、rem Is a unit of font size relative to the root element

2、 utilize flexible.js Plug in modifying font size （ The font size changes with the size of the screen ）

flex Definition

flex Translated into “ elastic ”, By setting display attribute , The property value is flex or inline-flex. Make it an elastic container , The immediate child elements in the container will become elastic elements . Elastic containers can directly control the position of child elements .

flex Parent container

flex Parent container properties

flex-direction： Set the spindle direction

justify-content： Used to set or retrieve elastic box elements in the spindle （ The horizontal axis ） Alignment in the direction .
Tips ： Use align-content Attribute aligns the items on the cross axis （ vertical ）.

 

 flex-wrap： Set whether the child element should wrap .

 align-items： Set the arrangement of elements on the side axis （ A single ）

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

Layout subproject  

attribute

flex： Number of copies of sub items
Such as ：flex:1;

align-self： Control the arrangement of subprojects on the side axis

 order： Define the order in which children are arranged （ The order before and after )
Such as ：order:1;

Case study

Case related code

Case renderings