需要在Flex屏幕显示HTML内容的时候该怎么办

有时候我们需要在Flex应用中嵌入HTML代码，根据嵌入HTML要求的不同有以下两种方法：

1、Flex文本组件（Label、Text、TextArea）的htmlText属性支持一些基本的HTML代码，例如：

<mx:TextArea>

<mx:htmlText>

<![CDATA[

<p align="center"><font size="15" color="#3399ff">this is a html code</font></p>

]]>

</mx:htmlText>

</mx:TextArea>

2、我们可以将Flex应用嵌入到HTML页面中，然后通过Flex2中的ExternalInterface(Flex1.5使用getURL("javascript:javascriptMethod"))

来实现Flex与HTML javascript的相互交互，进一步的，如果要在Flex应用中嵌入完整的HTML呢？

其实实现的方法很简单，只需要使用HTML的Iframe标签来导入需嵌入的HTML页面，

然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了

<div style="display: flexflex-wrap: wrap">

<div style="width:50%height: 100pxbackground-color: #000000">第一列1</div>

<div style="width:50%height: 100pxbackground-color: blue">第一列2</div>

<div style="width:50%height: 100pxbackground-color: red">第二列1</div>

<div style="width:50%height: 100pxbackground-color: yellow">第二列2</div>

</div>

我没有考虑兼容性问题，自行加上前缀就可以。这里最主要注意两点：

在外层要加上flex-wrap: wrap非常重要，这句话的意思就是可以换行；

内层一定要给其设置宽度。这样才能有效换行，否则全堆在一行里了。

下面介绍关于html元素水平居中的几种方式

1、对于行内元素采用text-align:center的方式

2、采用margin:0 auto来实现水平居中显示

3、用table实现

4、块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示

5、父子元素都采用相对定位，父元素left:50%子元素left:-50%相对自己的长度减回50%，这样实现向右偏移后拉回多的部分

6、采用css3的flexbox，display:flex

7、用父元素的 display:relative直接采用position:absoluteleft:0right:0margin:auto来实现水平以居中

下面是讲解的具体的代码：

---