flex地下导航栏布局（flex页面布局案例）
Flex menubar导航栏加载moudels
!-- 系统菜单 --
mx:MenuBar id="menu" right="10" labelField="modName"
itemClick="loadModule(event)"
/
!-- 模块组件 --
s:ModuleLoader id="modLoader" top="30" bottom="0" left="0" right="0"
ready="onModuleLoaded()"/
/**
* 单击菜单项，加载模块
*/
protected function loadModule(event:MenuEvent):void
{
object=null;
pickHangObject = null;
var modId:int = event.item.modId;
if(modId == -100) {
return logout();
}
var modType:int = event.item.modType;
var modUrl:String = event.item.modUrl;
// 如果是模块，则用ModuleLoader加载
if(modType == 1 currentUrl != modUrl){
loading.visible = true;
var mod:Module = Module(modLoader.child);
// 如果模块有定义挂起函数，则使旧模块的挂起，用以切换新的模块
if(mod mod.hasOwnProperty("suspend")) {
mod["suspend"].call();
}
modLoader.unloadModule();
modLoader.loadModule(modUrl);
currentUrl = modUrl;
}
// 如果是组件，则用PopUpManager加载
else if(modType == 2) {
var c:Class = getDefinitionByName(modUrl) as Class;
var x:IFlexDisplayObject = PopUpManager.createPopUp(this, c);
PopUpManager.centerPopUp(x);
}
}
flex布局有什么作用 常用属性
1.以下6个属性设置在容器上
flex-direction row/row-reverse/column/column-reverse 决定主轴的方向（即项目的排列方向）
flex-wrap wrap/nowrap/wrap-reverse 决定项目排列方式
flex-flow flex-direction|flex-wrap 前两者简写形式，默认flex-flow:row nowrap
justify-content flex-start/flex-end/center/space-between/space-around
决定项目在主轴的对齐方式
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items flex-start/flex-end/center/baseline/stretch
定义项目在交叉轴上如何对齐
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content flex-start/flex-end/center/space-between/space-around/stretch 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
Flex布局verticalAlign和verticalCener的区别解决办法
align-items
The align-items property applies to all flex containers, and sets the
default alignment of the flex items along the cross axis of each flex
line.
align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。
还有一位回答者的回答也很好，如下
align-items has the same functionality as align-content but the
difference is that it works to center every single-line container
instead of centering the whole container.
align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
如下图
align-content
The align-content property only applies to multi-line flex
containers, and aligns the flex lines within the flex container when
there is extra space in the cross-axis.
align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。
感觉这样翻译了之后还是略微有些抽象，不过有一个重点就是多行，
下面我们来写一个小的例子。
div class="6bad-bba1-6a2a-5cb7 child-1"
div class="bba1-6a2a-5cb7-1ec4 child-2"
/div
div class="6a2a-5cb7-1ec4-e24e child-2"
/div
/div123456123456
html结构如上。
如果child-1的width设置为100px,child-2的width设置为30px,这样child-2会排列在一排上，具体的css如下
style type="text/css"
*{
margin:0px;
padding: 0px;
}
div{
border: 1px solid #0f0f0f;
}
.child-1{
margin: 30px auto;
display: flex;
width: 100px;
height: 60px;
justify-content: space-around;
align-content: center;
}
.child-2{
width: 30px;
height: 20px;
}
/style
最终的结果如下图
所以对于只有一行的flex元素，align-content是没有效果的，如果.child-1改用align-items:center;则会达到预期的效果，如下图
但如果变成多行容器
使用align-items时效果如下
使用align-content效果如下
css手机下方的导航栏用flex后如何实现点击字体及背景变色
这个必须使用js的onclick方法做到了。给该盒子加JS代码，点击效果onlick，点击变色其他按钮恢复的逻辑代码即可。
微信小程序，在屏幕下面用position：flex做一个导航栏，css样式是top：89%；iphone5正常，iphon6多出空白
用小程序内置的导航栏不行么？如果想自制导航栏，应该用固定高度，如果用百分比就会在不同高度的屏幕上有不同的效果。
前端未来页面布局发展方向是 Flexbox 还是 Grid
1、flex
Apache基金会今天发布了Flex 4.8版本，这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。
需要注意的是，Flex目前还在孵化阶段，还不是Apache的正式项目，Flex 4.8也不是一个正式的Apache版本。
Apache称，该版本标志着Flex新时代的开始，Flex的未来将由社区来驱动，而不是由一个公司驱动。开发者可以通过贡献代码，来帮助改进Flex，如修复bug、增加功能等。
从Macromedia卖给Adobe，然后又捐给apache，不知道搞什么名堂。不过还好没有经过大幅重构，否则就真的是悲哀了！
2、extjs
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
功能丰富，无人能出其右。
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
华丽的界面，灵活的功能，还有开发工具都是配套的，但有个最大的问题，用就得花钱！
3、easyui
easyui帮助你构建你的web应用更加容易。
它是一个基于jquery的插件，开发出来的一套轻量级的ui框架，非常小巧而且功能丰富。
但是她有一个最大的问题就是代码只能找到以前的开源的版本，到了1.2以后的版本源代码都是经过混淆的，如果遇到问题修改起来会非常麻烦！不过一个比较大的优势是开源免费，并且界面做的还说的过去！
4、MiniUI
又一个基于jquery的框架，开发的界面功能都很丰富。
jQuery MiniUI - 快速开发WebUI。
它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。
使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。
界面做的挺不错，功能也挺丰富，但是有两个比较大的问题，一个是收费，一个是没有源码，说白了，不开源！基于这个开发如果想对功能做扩展就需要找他们的团队进行升级！
5、jQuery UI
jQuery UI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs（如本站首页右上角部分） 、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
功能非常全面，界面也挺漂亮的，可以整体使用，也可以分开使用其中的几个模块，免费开源！
6、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
设计目标是简单实用,快速开发,降低ajax开发成本。
欢迎大家提出建议，我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平。
毕竟是国产的，支持一下，而且源码完全公开，可以选择一下！不过性能怎么样不敢确定！
7、GWT
Google 网页工具包——GWT 提供了一组基于Java语言的开发包，这个开发包的设计参考Java AWT包设计，类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包，将更多地时间投入到GWT应用的开发过程中。
你不用去了解这样那样的javascript框架，通过java你就可以写出功能丰富的界面，可以做单元测试，毕竟是google的产品，严重支持一下！
8、YUI
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证，基本上没怎么研究过！
YUI Compressor倒是挺出名的，这套UI库不知道应用的情况怎么样！
9、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。
大公司的框架，并且是几样库的强强联合，值得推荐！
10、Dojo
在国内应用好像不是很广，不过性能上应该没问题。
Dojo是一个用javascript语言实现的开源DHTML工具包。
有多个基金会的支持，包括IBM和SUN，都是软件界的泰斗，值得信赖！
11、ZK
ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架，用于丰富网页应用程式的使用接口。最大的好处是，在设计AJAX网络应用程式时，轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动（event-driven）、高互动性的引擎，同时还提供了多样丰富、可重复使用的XUL与HTML组件，以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。
在线的demo
设计器的demo
日历组件
功能丰富，全面，文档齐全，而且升级了很多次，非常值得推荐！
12、OperaMasks-UI
OperaMasks-UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前，该团队已将这一产品以LGPL 开源协议开放给社区。
文档丰富，功能齐全，而且很容易使用和开发！而且是国产的哟！
13、JavaFX
Sun公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言（以下称为JavaFX）是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。JavaFX技术有着良好的前景，包括可以直接调用Java API的能力。因为 JavaFX Script是静态类型，它同样具有结构化代码、重用性和封装性，如包、类、继承和单独编译和发布单元，这些特性使得使用Java技术创建和管理大型程序 变为可能。
不管用的人多少，毕竟是从sun开始，现在是oracle，相信会有一个广阔的市场，但是确实不知道有哪个公司用这个框架开发！
Flex布局
首先是上下布局，标题栏
和主体
主体
分左右
导航
和内容
左边可用tabnavigator
右边viewstack
或者static
