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

古城微笑少年丶 2022-06-13 02:58 434阅读 0赞

一. 响应式布局

1. 移动端响应式布局必须加：  
<meta name="viewport" content="width=device-width,initial-   
scale=1.0,maximum-scale=1,user-scalable=no"/>  
<meta name= "format-detection" content="telephone=no,email=no"/>

2. 响应式布局一般使用外部样式表：  
<link rel="stylesheet" href="css/main.css"/>  
main.css中：  
/\*引入电脑端样式\*/  
@import "computer.css" screen and (min-width:  
640px);  
/\*引入移动端样式\*/  
@import "mobile.css" screen and (max-width:  
640px);

或者：  
  
<link rel="stylesheet" href="css/computer.css"    
media="screen and (min-width:640px)" />  
  
<link rel="stylesheet" href="css/mobile.css"      
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][http_note.youdao.com_noteshare_id_f2b07625fdfc229e6ac1362cf9ebdfb8_sub_38A313EE26034D68AA403F026D43D795]

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