Mobile web development learning notes - Layout

1. Make mobile page separately ( Main stream )

Fluid layout ( Percentage layout )

flex Elastic layout ( Strongly recommend )

less+ rem+ Media query layout

Mixed layout

2. Responsive pages are compatible with mobile terminals ( secondly ）

Media query

· bootstarp

Common layout of mobile terminal

Fluid layout ( Percentage layout )

Fluid layout , It's the percentage layout , Also known as unfixed pixel layout .

adopt The width of the box is set as a percentage To scale according to the width of the screen , Not limited by fixed pixels , The content is padded on both sides .

max-width Maximum width ( max-height Maximum height )
min-width Minimum width ( min-height Minimum height )

Double sprite drawing practice

stay firework Inside, scale the sprite map to half of the original , Then measure the coordinates according to the size , Pay attention to the code background-size Also write : Half the original width of the sprite map

flex Elastic layout

Layout principle

flex yes flexible Box Abbreviation , by " Elastic layout " , Used to provide maximum flexibility for shape models , Any container can
Designated as flex Layout .

When we set the parent box to flex After the layout , Elemental float、clear and vertical-align Property will fail .

Telescoping layout = Elastic layout = Expansion box layout = Elastic box layout =flex Layout

summary flex Layout principle :

It is through Add to parent box flex attribute , To control the position and arrangement of sub boxes

Common parent properties

flex-direction : Set the direction of the spindle
justify-content : Set the arrangement of sub elements on the spindle
flex-wrap : Set whether the child element should wrap
align-content : Set the arrangement of the child elements on the side axis ( Multiple lines )
align-items : Set the arrangement of sub elements on the side axis ( A single )
flex-flow : Compound attribute , It's equivalent to setting flex- direction and flex-wrap

flex-direction Set the direction of the spindle

Main shaft and side shaft

stay flex Layout , It is divided into two directions: the main shaft and the side shaft , The same name is : Row and column 、x Axis and y Axis

The default spindle direction is x Axis direction , Horizontal right

The default side axis direction is y Axis direction , Horizontal down

Property value

flex- direction Property determines the direction of the spindle ( That is, the arrangement direction of the project )

Be careful : The main shaft and the side shaft change , Just look flex-direction Who is the spindle set to , The rest is the side shaft . And ours The sub elements are arranged along the main axis Of .

 

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

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

 flex-wrap Set whether the child element should wrap

By default , The projects are all in one line ( also called ” axis ”). On .flex-wrap Attribute definitions , flex The default in layout is no line break Of .

align-items Set side axis . The arrangement of the sub elements on the ( A single )

 

align-content Set the arrangement of the child elements on the side axis ( Multiple lines )

Set the arrangement of children on the side axis and can only be used for the appearance of children Line breaks ( Multiple lines ) , It doesn't work in a single line .

 flex-flow

flex-flow The attribute is flex-direction and flex-wrap Composite properties of properties

flex-flow: row wrap;

  Common sub item properties

flex attribute

flex Property defines the remaining space allocated by the subproject , use flex To show how much Additional copies .

.item {
    flex:<number>;   /* default 0*/
}

align-self Controls how the subitems themselves are arranged on the side axis

align-self Property allows a single item to be squeezed differently from other items , covering align-items attribute .

The default value is auto , Represents the... That inherits the parent element align-items attribute , If there is no element , Is equivalent to stretch.

order Property defines the order in which items are arranged

The smaller the numerical , The further up the line , The default is 0.
Be careful : and z-index Dissimilarity .