弹性布局
<p>弹性布局CFlexLayout，继承于CLayout，支持CLayout的所有属性和方法。</p>
<p>弹性布局称为 Flex 容器，简称"容器"。容器默认存在两根轴：水平的主轴和垂直的交叉轴。它的的所有子元素称为 Flex 项目（flex item），简称"项目"。项目默认沿主轴排列。</p>
<h2>容器相关的属性和方法</h2>
<h3>主轴的方向</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">Direction="Row"
Direction="RowReverse"
Direction="Column"
Direction="ColumnReverse"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetDirection(Direction nDirection);</code></pre>
<h3>换行方式</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">Wrap="NoWrap"
Wrap="Wrap"
Wrap="WrapReverse"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetWrap(Wrap nWrap);</code></pre>
<h3>主轴对齐方式</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">JustifyContent="Start"
JustifyContent="End"
JustifyContent="Center"
JustifyContent="Between"
JustifyContent="Around"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetJustifyContent(FlexAlign nJustifyContent);</code></pre>
<h3>交叉轴对齐方式</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">AlignItems="Start"
AlignItems="End"
AlignItems="Center"
AlignItems="Between"
AlignItems="Around"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetAlignItems(FlexAlign nAlignItems);</code></pre>
<h3>主轴线对齐方式</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">AlignContent="Start"
AlignContent="End"
AlignContent="Center"
AlignContent="Between"
AlignContent="Around"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetAlignContent(FlexAlign nAlignContent);</code></pre>
<h2>项目相关的属性和方法</h2>
<h3>设置视图放大系数</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">Grow="10"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetGrow(LONG nGrow);</code></pre>
<h3>设置视图缩小系数</h3>
<ul>
<li>通过XML属性控制如下：</li>
</ul>
<pre><code class="language-xml">Shrink="10"</code></pre>
<ul>
<li>通过C++程序代码调用方法控制如下：</li>
</ul>
<pre><code class="language-c">virtual void SetShrink(LONG nShrink);</code></pre>
<h2>示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/1.png" alt="水平方向，起点在左端，不换行" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/2.png" alt="水平方向，起点在左端，换行，第一行在上方" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/3.png" alt="水平方向，起点在左端，换行，第一行在下方" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/4.png" alt="水平方向，起点在右端，不换行" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/5.png" alt="水平方向，起点在右端，换行，第一行在上方" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/6.png" alt="水平方向，起点在右端，换行，第一行在下方" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/7.png" alt="垂直方向，起点在上沿，不换行" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/8.png" alt="垂直方向，起点在上沿，换行，第一行在左边" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/9.png" alt="垂直方向，起点在上沿，换行，第一行在右边" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/10.png" alt="垂直方向，起点在下沿，不换行" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="ColumnReverse" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/11.png" alt="垂直方向，起点在下沿，换行，第一行在左边" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="ColumnReverse" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/12.png" alt="垂直方向，起点在下沿，换行，第一行在右边" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="ColumnReverse" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/13.png" alt="水平方向，主轴方向左对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" JustifyContent="Start">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/14.png" alt="水平方向，主轴方向右对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" JustifyContent="End">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/15.png" alt="水平方向，主轴方向居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" JustifyContent="Center">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/16.png" alt="水平方向，主轴方向两端对齐，项目之间的间隔都相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" JustifyContent="Between">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/17.png" alt="水平方向，主轴方向每个项目两侧的间隔相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" JustifyContent="Around">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/18.png" alt="垂直方向，主轴方向上对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" JustifyContent="Start">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/19.png" alt="垂直方向，主轴方向下对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" JustifyContent="End">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/20.png" alt="垂直方向，主轴方向居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" JustifyContent="Center">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/21.png" alt="垂直方向，主轴方向两端对齐，项目之间的间隔都相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" JustifyContent="Between">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/22.png" alt="垂直方向，主轴方向每个项目两侧的间隔相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" JustifyContent="Around">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/23.png" alt="水平方向，交叉轴方向上对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="160">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" AlignItems="Start">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="80" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="60" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/24.png" alt="水平方向，交叉轴方向下对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="160">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" AlignItems="End">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="80" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="60" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/25.png" alt="水平方向，交叉轴方向居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="160">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap" AlignItems="Center">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="80" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="60" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/26.png" alt="垂直方向，交叉轴方向左对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" AlignItems="Start">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="160" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="120" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/27.png" alt="垂直方向，交叉轴方向右对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" AlignItems="End">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="160" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="120" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/28.png" alt="垂直方向，交叉轴方向居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap" AlignItems="Center">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="160" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="120" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/29.png" alt="水平方向，轴线上对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap" AlignContent="Start">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/30.png" alt="水平方向，轴线下对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap" AlignContent="End">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/31.png" alt="水平方向，轴线居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap" AlignContent="Center">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/32.png" alt="水平方向，轴线两端对齐，轴线之间的间隔平均分布" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap" AlignContent="Between">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/33.png" alt="水平方向，每根轴线两侧的间隔都相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="420">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap" AlignContent="Around">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/34.png" alt="垂直方向，轴线左对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap" AlignContent="Start">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/35.png" alt="垂直方向，轴线右对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap" AlignContent="End">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/36.png" alt="垂直方向，轴线居中对齐" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap" AlignContent="Center">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/37.png" alt="垂直方向，轴线两端对齐，轴线之间的间隔平均分布" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap" AlignContent="Between">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/38.png" alt="垂直方向，每根轴线两侧的间隔都相等" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="Wrap" AlignContent="Around">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/39.png" alt="水平方向，项目自动放大" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap">
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT8" Grow="1">
<TextView Text='我被自动放大了' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="200" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/40.png" alt="水平方向，项目自动缩小" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="140">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap">
<RelativeLayout Width="280" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="280" Height="100" Background="ID_COLOR_DEFAULT8" Shrink="1">
<TextView Text='我被自动缩小了' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="280" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/41.png" alt="垂直方向，项目自动放大" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap">
<RelativeLayout Width="240" Height="60" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="60" Background="ID_COLOR_DEFAULT8" Grow="1">
<TextView Text='我被自动放大了' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="60" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/5.0/7/42.png" alt="垂直方向，项目自动缩小" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml"><RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Column" Wrap="NoWrap">
<RelativeLayout Width="240" Height="120" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="120" Background="ID_COLOR_DEFAULT8" Shrink="1">
<TextView Text='我被自动缩小了' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="120" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout></code></pre>