Move layout (Flex layout, viewport label)

Record what you have learned , Welcome comments and corrections .

Viewport label

Grammar format

//  Default 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
//  standard   
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

viewport： viewport

1. width=device-width： Viewport width = Device width
2. initial-scale=1.0： Initial page zoom factor
3. maximum-scale=1.0  Maximum zoom
4. user-scalable=0  Do not allow users to zoom pages （ Mobile ） Or for no If yes Allows the user to zoom

 

Percentage layout （ Fluid layout ）

effect ：  Width adaptation , Fixed height .

 

flex Layout / Elastic layout

effect ：  be based on Flex Accurately and flexibly control the layout of block level boxes , Avoid separation from document flow in floating layout .Flex The layout is very suitable for structured cloth

Format ：

display:flex;    

flex-direction

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

.box { flex-direction: row | row-reverse | column | column-reverse; }

• row（ The default value is ）： The principal axis is horizontal , The starting point is on the left .
• row-reverse： The principal axis is horizontal , The starting point is on the right .
• column： The principal axis is perpendicular , The starting point is at the top .
• column-reverse： The principal axis is perpendicular , Starting edge .

flex-wrap

flex-wrap： Set whether the items in the container wrap , By default , The projects are all in one line .

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap（ Default ）： Don't wrap .
• wrap： Line break , The first row is at the top .
• wrap-reverse： Line break , The first row is at the bottom .

flex-flow

flex-flow： The attribute is  flex-direction  Properties and flex-wrap  Attribute shorthand , The default value is  row nowrap.

.box { flex-flow: flex-direction flex-wrap; }

justify-content

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

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

• flex-start（ The default value is ）： Align left
• flex-end： Right alignment
• center： In the middle
• space-between： full-justified , The intervals between the items are all equal .
• space-around： The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .
• space-evenly： The spacing between items is equal to the spacing between items and borders .

align-items

align-items： Property defines how items are aligned on the cross axis .

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start： Align the starting points of the intersecting axes .
• flex-end： The ends of the intersecting axes are aligned .
• center： Align the midpoint of the intersecting axis .
• baseline: Baseline alignment of the first line of text for the project .
• stretch（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .

align-content

align-content： Property defines the alignment of multiple axes . If the project has only one axis , This property does not work , Attribute values are basically the same as justify-content  identical .

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start： Align with the starting point of the intersecting axis .
• flex-end： Align with the end of the cross axis .
• center： Align with the midpoint of the intersecting axis .
• space-between： Align with both ends of the cross axis , The average distribution of spacing between axes .
• space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .
• stretch（ The default value is ）： The axis occupies the entire cross axis .

Expansion ratio

attribute :flex : Integers ;

flex:1;

effect ： Will the whole flex The remaining space of the container is divided into , Then assign it to the project .

1. Only the remaining size of the parent box
2. Is to add this attribute to the sub box

Reference resources ：Flex Layout of the tutorial ： Grammatical passage - Ruan Yifeng's Weblog