常见的响应式布局（一）

全球手机浏览的使用量逐渐上升，IE6的使用逐渐下降，越来越多的人使用小屏幕设备上网，而不同屏幕的手机，pad视口的大小不一样，所以像pc端固定min-width的960px不能在移动端适应，所以一般都会用到响应式布局，我总结了一下经常用到的响应式布局.

一、flex弹性布局

   

     .contain{
padding-right:15px;
      padding-left:15px;
      margin-right:auto;
      margin-left:auto;
      border:1pxsolid red;
      display:flex;
}
.d1,.d2,.d3,.d4{
        border: 2px solid blue;
        flex:2;
}
       
<divclass="contain">
                 <divclass="d1">第一部分</div>
                 <divclass="d2">第二部分</div>
                 <divclass="d3">第三部分</div>
                 <divclass="d4"></div>
        </div>     

任何容器都能指定为flex容器，所以子元素就是容器成员。Flex容器存在两根轴，主轴和交叉轴。

Flex容器的属性有：

flex-direction:决定主轴的的排列方向(row|row-reverse|column|column-reverse)

flex-wrap:如何换行（nowrap|wrap|wrap-reverse）

flex-flow:是flex-direction和flex-wrap的缩写

justify-content:在主轴上对齐的方式，如下属性

§ flex-start（默认值）：左对齐

§ flex-end：右对齐

§ center：居中

§ space-between：两端对齐，项目之间的间隔都相等。

§ space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

Align-items:在交叉轴上如何对齐

§   flex-start：交叉轴的起点对齐。

§ flex-end：交叉轴的终点对齐。

§ center：交叉轴的中点对齐。

§ baseline: 项目的第一行文字的基线对齐。

§ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

子元素的属性：

Order：子元素的排列顺序，数字越小越靠前，默认为0；

Flex-grow：数字，属性的放大比列，默认为0

Flex-shrink:子元素的缩小比例，默认为1，如果空间不足，该项目将缩写。

Flex-basis：子元素的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

Flex：flex-grow，flex-shrink，flex-basis的缩写

Align-self：覆盖flex容器align-items属性，允许有自己的对齐方式

二、媒体查询和百分比的结合使用

 

@media screen and (max-width: 768px){
	.contain{
		max-width:760px;
		border: 1px solid red;
	}
}
@media screen and (min-width: 326px){
	.contain{
		max-width:320px;
		border: 1px solid blue;
	}
}
.d1,.d2,.d3{
	width:31%;
	border: 1px solid yellow;
	float:left;
}
.d4{
	clear:both;
}