黑马程序员技术交流社区

标题: 【技术贴】C3中弹性布局的动态演示代码 [打印本页]
作者: 播妞    时间: 2018-9-26 08:00
标题: 【技术贴】C3中弹性布局的动态演示代码
一、概要说明
C3中的的弹性布局（display:flex）是一个非常好用，但也非常复杂的一个新的布局技术。以我个人的一点经验来预测的话，随着时间的推移，它有望替代过去一直流行目前仍然流行的div+浮动布局在页面布局方面的经典地位。这一方面浮动布局确实是一个“虽然简单又难以把控”的令人“爱恨交加”的技术，另一方面弹性布局在布局方面的方便灵活性确实远胜了目前主流的浮动布局。

然后，在基础班学员学习弹性布局的时候，由于弹性布局的属性比较多，属性值也比较多，而且都是“固定的单词”，而不是可以自己设置的“数据值”，导致很多同学在刚开始接触弹性布局时都有种“琳琅满目”“变幻莫测”的感觉，加上有些同学英文基础还特别贫弱，以致不少同学一天学下来，就感觉到“压力山大”，甚至一头雾水。

实际上，弹性布局本身并没有多难（相比浮动布局来说），无非就是属性多一些，属性值多一些，综合起来也就单词多一些，但其实际代码其实都是“形式化”的，也就是相对固定的几个属性，以及对应的相对固定的一些属性值。只是因为相对之前的代码量（属性和属性值）来说，突然增加了好多单词而已。纵使如此，对于刚刚接触css技术并且英语底子很薄的同学来说，也确实是个巨大的负担。

因此，在教学的过程中，我不断思考并变换着方式来帮助大家理解弹性布局的一些基本用法（主要是几个属性和属性值）。这一次，我突然想到了使用一个“动态演示”的做法，就是通过一定的js代码，在页面上动态改变弹性布局的不同属性和不同属性值，并由此动态改变对应的弹性布局的“表现效果”。于是，就有了这篇“弹性布局的动态演示代码”。

二、第一步
先制作好用于弹性布局动态演示的页面效果，如下图所示：

该红色边框的盒子，就是用于演示弹性布局表现效果的“弹性盒子”。
其中，为了演示盒子的在辅轴方向一行内的对齐方式，特意设置了不同高度的子盒子（应用中未必常见）。
此演示案例可以动态演示弹性盒子布局中的5个常用属性（上图中的红色单词）的应用效果。

三、第二步
通过js程序，动态改变弹性盒子的相应属性值，从而达到动态显示弹性盒子的实际效果的作用。
js代码如下所示：

其中，每一个下拉菜单，显示一个弹性盒子相关属性的变化情况。如上图显示的是弹性盒子的flex-direction属性的属性值（由于版面的原因，这里只提供了两种横向的排列方式）。

其他几项属性的设置如下所示：




四、演示效果：
初始状态时（默认设置）：

flex-wrap设置为nowrap时：

justify-content设置为space-between时：

align-content设置为center时：

align-items设置为stretch是：








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2