千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页  >  关于学院  >  技术论坛  >  正文

Web前端学习总结:弹性盒布局

时间:2018-09-04 17:52     来源:千锋教育 作者:千锋HTML5
分享: 更多

  概念

  弹性盒布局是css3引入的一种新的布局模式,也称为flexbox布局,即伸缩性布局盒模型,这种布局方式是用来提供一个更好的有效地方式制定、调整和分布一个容器里的项目布局,即使容器中的项目的尺寸未知或者是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的项目的尺寸和顺序来最好地填充所有可用空间。弹性盒布局是与方向无关的,在传统的布局方式中,block布局是把块在垂直方向从上到下依次排列,而inline布局则是在水平方向来排列,而弹性盒布局并没有这样内在的方向的限制,可以由开发者自由定义。

  弹性盒布局中有两个互相垂直的坐标轴,一个是主轴,一个是侧轴。在未声明时,主轴默认方向是水平方向,侧轴是垂直方向,但是方向并不是固定的,可以通过css声明首先定义主轴的方向是水平还是垂直,从而侧轴的方向也能确定下来。

  主要功能

  1、 屏幕和浏览器窗口大小发生变化也可以灵活调整布局;

  2、 制定伸缩项目沿着主轴或者侧轴按比例分配额外空间,从而调整伸缩项目的大小;

  3、 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;

  4、 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

  5、 控制元素在页面上的布局方向;

  6、 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

  基本布局

  1、 定义弹性盒:

  声明伸缩容器(父元素):display:flex;需要加前缀

  display:-webkit-flex;

  display:-moz-flex;

  display:-ms-flex;

  display:-o-flex;

  display:flex;

  2、 伸缩容器属性:

  2.1、伸缩流方向 flex-direction 主要用来创建主轴,定义伸缩项目在伸缩容器中的方向

  row:从左向右

  row-reverse:与row相反;

  column:从上到下

  column-reverse:与column相反;

  2.2、伸缩换行 flex-wrap:

  nowrap 不换行 默认值,不管超出还是不超出都不会换行

  wrap 换行 一旦伸缩项目超出伸缩容器,那么就会换行

  wrap-reverse 换行反向 主轴水平时,上下反向,主轴垂直时,左右反向;

  2.3、伸缩流方向与换行 flex-flow 缩写形式。

  flex-flow:flex-direction flex-wrap;

  两个值同时定义或者单独定义都生效

  2.4、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式;

  flex-start:伸缩项目向一行的起始位置靠齐;

  flex-end:伸缩项目向一行的结束位置靠齐;

  center:伸缩项目向一行的中间位置靠齐;

  space-between:伸缩项目会平均的分布在行里;

  space-around:伸缩项目会平均的分布在行里,两端保留一半的空间;

  2.5、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式

  flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;

  flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;

  center:伸缩项目的外边距盒 在该行的侧轴上居中放置;

  baseline:伸缩项目根据伸缩项目的基线对齐;

  stretch:伸缩项目拉伸填充整个伸缩容器。

  2.6、堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 往往要与换行同时应用,没有换行就不存在多行的情况。

  flex-start:各行向伸缩容器的起点位置堆叠;(没有行距)

  flex-end:各行向伸缩容器的结束位置堆叠;(底部对其没有行距)

  center:各行向伸缩容器的中间位置堆叠;(居中没有行距)

  space-between:各行在伸缩容器中平均分布;(两端对齐,中间自动分配)

  space-around:各行在伸缩容器中平均分布,两端保留一半的空间;(自动分配距离)

  2.7、align-self(加在子元素上):主要用来设置单独伸缩项目在侧轴的对齐方式,可以覆盖align-items。

  flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;(元素位于容 器的开头)

  flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;(元素位于容器 的结尾)

  center:伸缩项目的外边距盒 在该行的侧轴上居中放置;(元素位于容器的中间)

  stretch:伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)

  2.8、项目尺寸的弹性:

  Flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的来大小。

  它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。不常用,还在不断变化中

  Flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

  如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

  Flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

  负值对该属性无效。

  缩写:flex:默认值为0 1 auto。

  总结

  作为 CSS3 规范的一部分,弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求,包括对容器中项目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具

  本文由千锋web前端培训学员总结。学习web前端,可以参考千锋提供的HTML5学习路线,结合千锋名师精心录制的全套HTML5视频教程,可以让你对学习HTML5需要掌握的知识有个清晰的了解,并快速入门HTML5开发。视频讲解通俗易懂,入门HTML5开发仅用此套视频足矣。

相关文章

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-38035223 020-38035220
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、360网络安全、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱