基本dom结构

基本使用示例与解析

纵向向弹性portlet区域

自带手风琴效果

弹性portlet的嵌套

纵向弹性布局多用于没有外部滚动条的OA式页面,它可以使区域元素垂直排列,无需脚本便能重绘元素高度,有效利用页面空间。
基本dom结构
基本使用示例与解析

● 三等分纵向弹性布局。

三等分弹性布局
三等分弹性布局
三等分弹性布局

● 弹性子元素和非弹性子元素可以同时存在于同一个弹性容器中。
● 非弹性子元素即没有设置wj_flex类名的元素,它们的高度不受弹性容器影响。
● 弹性容器的整体高度减去所有非弹性子元素的高度再除以弹性子元素的个数才是每个弹性子元素最终等分的高度。

我是自定义的高度200px。
我的高度是父元素剩余的高度等分
三等分弹性布局

● 弹性容器中若只有一个弹性子元素,则该子元素完全继承该弹性容器的宽高,相当于width:100%;height:100%;。
高能预警:弹性布局元素必须成套使用,设置了wj_flex类名的元素,其父元素必须拥有wj_box或wj_box_column类名,否则在IE浏览器中将不显示

我默认继承了父元素的宽高,我的高度不能定义,我的高度允许自定义哦。
横向弹性portlet区域
自带手风琴效果

● 当纵向弹性布局遇上portlet区域,实现手风琴效果简直是手到擒来。

默认等分
默认等分
默认等分
默认等分
默认等分
默认等分
弹性portlet的嵌套

● 通过给portlet区域元素设置弹性属性,可以层层嵌套,实现精美的布局,但是必须成套使用

模块区域(嵌套)
我是弹性portlet容器
非弹性portlet
我是弹性子元素内容区域
弹性portlet
我是弹性子元素内容区域
弹性portlet
我是弹性子元素内容区域