挪动端Web网页页面的CSS3 flex合理布局迅速上手指

日期:2021-03-03 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

1、刚开始应用flexbox合理布局的方式,编码以下:
CSS Code拷贝內容到剪贴板
  1. footer{   
  2. display:flex;   
  3. }  
2、接下来为footer加上flex-flow特性:
CSS Code拷贝內容到剪贴板
  1. flex-flow:row wrap;    

row表明按行显示信息,wrap设定当父元素太小时是不是换行。
留意flex-flow是flex-direction和flex-wrap两个特性合在1起界定了,分设立定还可以。
flex-direction的特性:
row:行显示信息;column:列显示信息;row-reverse/column-reverse:反向开展显示信息


3、align-item特性:
flex-start:使得每一个div的头顶部对齐
flex-end:使得每一个div的尾部对齐
center:以管理中心线为标准对齐
stretch:铺满全部地区,即头顶部、尾部均对齐


4、justify-content特性
用于设定留白的方式,在制做1行中有好几个一部分的情况下十分便捷。
例如父div中有3个小的div并排显示信息,可是它们的总宽度小于父div的总宽度,则可使用这类方式开展合理布局,实际主要参数以下:
flex-start:留白一部分在最尾端
flex-end:留白一部分在最起止的地区
以上两种留白方法全是把3个小div当做1个总体,留白留在1端
space-between:正中间平均分留白
space-around:正中间+两边平均分留白
以上两种非常于把3个div块拆卸平均分在父div中,2者的区别仅仅在因而并不是在两边也留白
附:运用justify-content的方法使元素竖直水平垂直居中的方法

CSS Code拷贝內容到剪贴板
  1. div{   
  2. justify-content:center;   
  3. align-items:center;   
  4. display:-webkit-flex;   
  5. }  
上一篇:怎样分辨PC端访问器核心 返回下一篇:没有了