弹性盒模型 flex box
弹性盒子模型 布局方案
传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项。
而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享。
弹性盒模型(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” 等一些属性会失效。
执行的效果如下:
必备名词解释在使用弹性盒子模型之前,需要了解一些弹性盒模型的基础概念名词。
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>代码效果如下: