HTML5技术

弹性盒模型 flex box - Des李白

字号+ 作者:H5之家 来源:H5之家 2017-06-13 18:00 我要评论( )

弹性盒模型 flex box 弹性盒子模型布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项。 而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率

弹性盒模型 flex box

弹性盒子模型 布局方案

传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项。
而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称为弹性布局,是css3中新提出的一种布局方式,通过弹性布局,可以让子元素自动调整宽度和高度,从而达到很好的填充任何不同屏幕大小的显示设备的显示空间。
弹性盒模型与之前的布局方式是完全不同的两种,虽然依然采用div+css的方式,但是却将之前使用的浮动给替换成了弹性布局。从而使页面元素布局方式更加的简单。
不同于我们后面所学习的网格系统,弹性布局更加适用于应用组件以及小比例布局。
在之前,flex经历了三次迭代,每一次迭代都产生了不同的语法,目前我们学习遵循最终版本的语法。因为之前版本在使用的时候需要考虑兼容问题,而最新版本,所有的浏览器都支持无前缀的终极规范。

弹性盒子模型认知

flex布局方式是一个完整的布局模块,而不是只某个属性。flex的布局主要依靠父容器和元素组成。
父容器称之为flex container(flex容器) 而其子元素称之为flex item(flex元素)。
而整个flex布局的核心在于 对其方式、排布和顺序。

弹性盒子模型的使用

想要使用flex布局,首先要使用display:flex 或者 display:inline-flex来设置父容器。
display:flex 给父元素设置完成后,那么整个父元素会变成弹性容器,但是是一个块级元素。
display:inline-flex给父元素设置完成后,那么整个父元素会变成弹性容器,但是是一个行内块级元素,有些类似于inline-block的效果。

当父容器设置了这个属性之后,里面的子元素默认的全部变成flex item (flex元素)
Tip:flex布局与我们之前所学习的布局方式是属于另外一套布局方案,所以在使用了flex布局之后,如Block”,“inline”,“float” 和 “text-align” 等一些属性会失效。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container-flex { width: 600px; border:1px solid #ccc; display:flex; } .container-inline { width: 600px; border:1px solid #ccc; display:inline-flex; } .container-flex div { width: 200px; height: 200px; background-color: orange; } .container-inline div { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>

执行的效果如下:

必备名词解释

在使用弹性盒子模型之前,需要了解一些弹性盒模型的基础概念名词。

main axis 主轴
cross axis 交叉轴/侧轴 与主轴垂直
main start 主轴起点边
main end 主轴终点边
cross start 交叉轴起点边
cross end 交叉轴终点边

为什么使用弹性盒子模型

弹性盒子模型在开发手机端的时候使用频率较高,在微信小程序开发的时候也是使用频率非常高的技术,可以通过几个实例来看一下弹性盒子的好处:

实例1:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*启用flex布局*/ background-color: pink; } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>

代码结果如下:

在上述实例中需要注意的点:
① 启用flex布局 display:flex
② 父元素的子元素在父元素设置了display:flex之后,子元素会自动的变为弹性盒子的子元素,
被称为flex items
③ 默认情况,所有的 flex-item 会按照 flex 容器的顶部和左侧对齐。

实例2:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*启用flex布局*/ background-color: pink; justify-content:flex-start;/*默认*/ justify-content:flex-end;/*在主轴的末端对其*/ justify-content:center;/*在主轴的中间对其*/ justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/ justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个 都会在其给定的空间内居中显示。*/ align-items:center;/*让items在垂直方向上居中*/ } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>

代码效果如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗? - Emrys5

    [asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗? - Emr

    2017-06-02 13:00

  • 深入理解CSS3 Flexbox - sfhiwtytt22

    深入理解CSS3 Flexbox - sfhiwtytt22

    2017-06-02 12:02

  • 基于Babylonjs自制WebGL3D模型编辑器 - ljzc002

    基于Babylonjs自制WebGL3D模型编辑器 - ljzc002

    2017-05-21 15:01

  • 架构设计师能力模型 - BloodyAngel

    架构设计师能力模型 - BloodyAngel

    2017-03-28 11:00

网友点评
i