频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
弹性盒布局、多列布局、媒体查询
2017-08-03 14:29:38      个评论    来源:Hyperyou的博客  
收藏   我要投稿

弹性盒布局、多列布局、媒体查询

1 flexbox布局

1.1 flexbox布局简介

flexbox布局,即伸缩布局盒模型,又叫弹性盒布局,用来提供一个更有的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或动态的。

中心思想:让容器有能力让其子项目能够改变其宽度、高度(甚至顺序);以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flexbox容器会使子项目扩展来填充可用空间、或缩小它们,以防止溢出。

1.2 flexbox的声明

1.2.1 display:flex;

给父元素添加声明display:flex; 由于存在兼容性问题,所以需要加上私有前缀。display:flex 声明该容器为伸缩容器,说明该容器内部为弹性盒布局,内部的元素默认全部在主轴方向一行显示,不会换行。

flex布局中,父元素主轴方向默认为水平方向(从左往右),侧轴方向默认为垂直方向(从上往下)。

1.2.2子元素属性

flexbox布局中,给父元素宽、高,定义为弹性盒子,子项目主轴方向给大小值或flex:n;(n代表所占比例),侧轴方向会默认拉伸。

1.2.3 flex-direction 定义主轴方向

伸缩流方向flex-direction,父元素属性,主要用来创建主轴,定义伸缩项目在伸缩容器中的方向。

flex-direction:row/column/row-reverse/column-reverse; 水平 / 垂直 / 水平方向反方向 / 垂直方向反方向

1.2.4 flex-wrap伸缩换行

flex-wrap:wrap; 父元素属性

子项目在主轴方向默认不会换行,若想多行显示子项目,需要手动换行。同时子项目在侧轴方向依旧保持拉伸状态。

1.2.5 flex-flow伸缩流方向与换行

flex-flow:column wrap / column-reverse wrap;

定义伸缩流方向或换行,父元素属性。

flew-flow:flex-direction||flex-wrap;

1.2.6 justify-content主轴对齐方式

justify-content:flex-start / flex-end / center / space-between / space-around; 父元素属性

其中,flex-start为默认属性,伸缩项目向一行的起始位置靠齐;flex-end,伸缩项目向一行的结束位置靠齐;center,伸缩项目向一行的中间位置靠齐;space-between,伸缩项目会平均分布在行里;space-around伸缩项目会平均分布在行里,且两端保留一半的空间。

1.2.7 align-items侧轴对齐方式

align-items:stretch / flex-start / flex-end / center / baseline; 父元素属性

其中stretch为默认属性,拉伸,当不给伸缩项目定义高度时,会默认填充整个容器;flex-start,伸缩项目在侧轴起点位置摆放;flex-end,伸缩项目在侧轴终点位置摆放;center,伸缩项目居中摆放;baseline,侧轴方向子项目以基线对齐,当包裹文字时,盒子基线会发生变化。

1.2.8 align-self子项目定义侧轴对齐方式

子项目属性,align-self,定义子项目的侧轴对齐方式,可以覆盖子项目继承的align-items。

1.2.9 align-content换行后的侧轴对齐方式(堆栈伸缩行)

align-content:stretch / flex-start / flex-end / center / space-between / space-around;

父元素属性,align-content,跟justify-content属性值一样,多一个默认属性值stretch。因为是换行,父元素侧轴上也存在多个元素,与主轴情况类似。

1.2.10 伸缩项目顺序

伸缩项目属性 order ,在flexbox里,写了order的元素,属性值越小越靠前,没写order的默认更小。

oder:1; 在前

oder:2; 在后

2 多列布局

p{columns:20px 4;} 其中20px代表每一列的最小宽度,4代表拥有最多的列数。

columns存在兼容性问题,需要添加私有前缀。

2.1 columns-width

每一列的最小宽度

2.2 columns-count

拥有的最多列数

2.3 columns-gap

每一列之间的间距

2.4 columns-rule

定义列边框 columns:1px solid #ccc;

2.5 columns-span

定义多列布局中子元素的跨列效果,通常用于标题。

只有两个属性值 columns-span:none / all; 不跨列 / 跨所有列

 

3媒体查询

3.1媒体查询简介

许多只能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域(布局视口),主要目的就是让页面在智能手机端阅读时,不会因为实际可视区域变形。所以你看到的页面还是普通样式,即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式,让页面在智能手机中正常显示,特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化,并且可以自定义界面可视区域的尺寸和缩放级别。

3.2 meta标签定义,可视窗口

理想视口:为了网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添加meta视口标签,一般视口大小都设置为设备大小。

 

其中,device-width为设备宽度;user-scalable为用户是否可以缩放;initial-scale控制初始缩放比例,1.0表示不可以缩放;maximum-scale为最大缩放比例;minimum-scale为最小缩放比例。

Sublime text中快捷键为 meta:vp

3.3媒体查询

3.3.1媒体查询语法

p{ width:100%;

height:700px;

Background-color:pink;

}

@media screen an (min-width:768px){

p{

background:red;

}

}

@media screen an (min-width:992px){

p{

background:red;

}

}

@media screen an (min-width:1200px){

p{

background:red;

}

}

语法: @media 设备 and (条件){

选择器{声明}

}

3.3.2 min-width最小宽度

min-width:number; 当元素宽度大于number时生效。如上述案例,当条件为min-width时,数值顺序必须从小到大,不然会存在覆盖问题。

3.3.3 max-width最大宽度

写法为从大写到小,不然存在覆盖问题。

3.3.4 min-device-width与min-width的区别

device-width指设备宽度,只用于切换不同屏幕宽度;width只要切换元素宽度即可。

3.3.5 通过媒体查询调用不同的样式

 

 

3.3.6实现不同宽度下的布局

.box{

overflow: hidden;

}

.box .son1{

width: 80%;

height: 200px;

background: red;

float: left;

}

.box .son2{

width: 20%;

height: 200px;

background: blue;

float: left;

}

@media screen and (max-width:768px){

.box .son1{

width: 100%;

}

.box .son2{

display: none;

}

}

点击复制链接 与好友分享!回本站首页
上一篇:在ajax请求之前加loading
下一篇:获取dom元素的宽度和高度
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站