每个元件都能指定尺寸（长宽），但是有些时候无法设定一个固定尺寸，尤其是现在网页系统都是移动装置优先设计 (mobile first)，固定尺寸就很可能造成桌面、手机总有一边尺寸不合的情形，因此我们需要一个不需指定固定尺寸，并能弹性调整的方法。

ZK 中元件上的 hflex、vflex 属性就是用来解决此问题。属性名称各代表 Horizontal flexibility、Vertical flexibility，它是「用来决定怎麽分配父元件空间给子元件」，有两种用法：

1. 比例尺寸
2. 最小尺寸

比例尺寸

你可以在属性中指定一个数字，但并不代表特定长度单位，而是「决定占用父元件空间的比例」。例如我想要将一个 div 分成左右两块，宽度比为 1:3 :

<div sclass="box">
    <span hflex="1" sclass="box">
    hflex="1"
    </span>
    <span hflex="3" sclass="box">
    hflex="3"
    </span>
</div>

• 数字 1 并不代表固定长度，而是要跟同一层的兄弟元件的 hflex 数值计算比例，因此第一个 <span> 宽度比例为 1/(1+3)=1/4。第二个 <span> 为 3/(1+3)/4

若是我想要将一个 div 分成上下两区，高度比为 3:7：

我可以这麽实作：

<div height="200px" sclass="box">
    <div vflex="30" sclass="box">
        vflex="30"
    </div>
    <div vflex="70" sclass="box">
        vflex="70"
    </div>
</div>

• 因为 vflex 是用来分配父元件的高度，因此需要指定高度。不然 div 的预设高度为根据内容的高度，以本例来说就只剩下 padding 的总合高度了。
• vlfex 的数值并无单位，代表比例，因此你可以任意指定数值，照原有需求 3:7=30:70

最小尺寸

如果我希望让元件保持「最小弹性」，就是「根据其内容元件的尺寸来决定宽高」，而不是根据父元件的尺寸。例如我们经常将版免分成左右两边，左边「侧边选单」，右边是「内容页面」。

因此我们通常会让侧边栏保持足够容纳选单的最小宽度即可，让内容页面可以有弹性宽度：

<div height="300px" sclass="box">
    <div hflex="min" vflex="1" sclass="box" style="display:inline-block">
        <div>sidebar</div>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <div hflex="1" vflex="1" sclass="box" style="display:inline-block">content</div>
</div>

• hflex="min" 让侧边栏保持最小宽度，这个宽度就不会随着萤幕宽度变化。
• hflex="1" 让内容页面宽度撑满剩下的宽度，因此会随着萤幕宽度变化。

要注意避免错误用法

父元件要指定高度

因为如果父元件没有高度，就无法用 vflex 来分配高度。

<div><!--需要指定高度，因为预设为最小高度-->
    <datebox/>
    <div vflex="1" style="background: yellow">
    <!--高度为0-->
    </div>
</div>

父子元件的尺寸不能互相依赖

如果父元件指定 min （代表根据子元件决定尺寸），子元件指定 1 （代表分配父元件空间、根据父元件空间决定尺寸），这样父子元件的尺寸策略互相依赖反而无法决定尺寸：

<vlayout hflex="min" height="30px">
    <div hflex="1" vflex="1" style="background: yellow">zero width</div>
</vlayout>

这种弹性空间分配可以满足一些 responsive web design 的需求，其底层实作是透过 CSS flexbox ，如果有不足的地方，你也可以直接用 flexbox 语法来控制。