弹性盒模型 flex box - Des李白_H5之家 - 中国HTML5教程资源分享第一站

弹性盒模型 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>

代码效果如下：