Html-响应式布局、弹性布局



一. 响应式布局

1. 移动端响应式布局必须加：

2. 响应式布局一般使用外部样式表：

main.css中：
/*引入电脑端样式*/
@import "computer.css" screen and (min-width:
640px);
/*引入移动端样式*/
@import "mobile.css" screen and (max-width:
640px);

或者：

media="screen and (min-width:640px)" />

media="screen and (max-width:640px)" />

注意：
and后面必须要有空格！！！
min-width即：显示该css样式的最小分辨率，小于该
分辨率时样式失效。
max-width即：显示该css样式的最大分辨率，大于该
分辨率时样式失效。

二. 弹性布局

1. 使用弹性布局
如：
.container{
height: 400px;
border: 1px solid red;
display: flex;
}

2. flex-wrap:内容排放方式（是否换行）
flex-wrap: wrap;//放不开，换行
结果：

flex-wrap:nowrap;（默认）//放不开，下一行
结果：

flex-wrap:wrap-reverse;//反向换行
结果：

3. flex-direction: 内容排放方式（列还是行）
flex-direction:column;列（竖着排列）
结果：

flex-direction: row;行（横着排列，默认样式）
结果：

flex-direction: row-reverse;行（横着反转）
结果：

flex-direction: column-reverse:列（竖着反转）
结果：

4. justify-content:内容对齐方式（行方向要怎么对齐）
justify-content: flex-start//贴着左边
结果：

justify-content: flex-end//贴着右边
结果：

justify-content: center;//居中
结果：

justify-content: space-between//左边顶到最左边，右
边到最右边，中间有空隙
结果：

justify-content: space-around//左边有空隙，右边有
空隙，中间也有空隙
结果：

总结：

5. align-items: 内容对齐方式（列方向要怎么对齐）
align-items:flex-start
结果：

align-items:flex-end
结果：

align-items:center
结果：

总结：

6. align-content:内容对齐方式（内容整体怎么对齐）
align-content:flex-start
结果：

align-content:flex-end
结果：

align-content:center
结果：

align-content: space-between;
结果：

align-content: space-around;
结果：

align-content: stretch;
结果：

总结：

7. 空间处理：
①、 flex-grow: 1;
一行中多余的空间分配时按照1份分配

②、 flex-basis: 400px;
基础大小，和width类似

③、 flex-shrink: 1;
一行中空间不足时按照一份缩小

注意：如果元素不是弹性盒对象的元素，则 flex-* 属性不起作用。

图片太多就不一 一上传了，需要的请看我的笔记：

http://note.youdao.com/noteshare?id=f2b07625fdfc229e6ac1362cf9ebdfb8&sub=38A313EE26034D68AA403F026D43D795