viewport的使用,最大宽，最小宽,背景图片自适应,flex布局

1、viewport的使用

meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />  

2、最大宽，最小宽

max-width:770px;min-width:350px;

3、背景图片自适应

.pic{
background:url() no-repeat;
  width:100%;
  background-size:cover; 
}

4、flex布局。

display: flex 使元素以flex方式显示
flex-wrap: nowrap|wrap|wrap-reverse 是否自动换行以及换行方向
flex-direction: row|row-reverse|column|column-reverse 控制元素排列方向
order: number 控制元素排列顺序
justify-content: flex-start|flex-end|center|space-between|space-around 控制元素横向对齐方式
align-content: flex-start|flex-end|center|space-between|space-around|stretch 控制多行元素垂直对齐方式
align-items: flex-start|flex-end|center|baseline|stretch 控制多个元素垂直对齐方式
align-self: auto|flex-start|flex-end|center|baseline|stretch 控制单个元素垂直对齐方式
flex-basis 设置元素宽度