在移动端中的flex布局

flex布局介绍：
　　flex布局很灵活， 这种布局我们也可以称之为弹性布局， 弹性布局的主要优势就是元素的宽或者高会自动补全;

回到顶部
flex布局实例：
　　比如有两个div，一个div的宽度为100px， 想让另外一个div的占据剩下的宽度：

运行下面代码

child

child1

　　或者有两个div，一个高度为100px， 另外一个高度自动补全当前界面下剩余的高度：

运行下面代码

child

child1

　　所以说flex布局是很灵活， flex布局没出现之前，这种布局不好实现， 只能通过-webkit-calc的方式， 或者使用javascript的方式动态修改元素的样式，还有水平方向元素自动适应布局等， 用了flex，css的布局方式更加多样化了；

flex布局也可以实现未知宽高的元素自动居中， 以前用的比较多的居中布局方式主要为固定宽高的负margin居中：

运行下面代码

hehe

　　子元素css的样式flex：auto或者flex：1的时候， 该子元素会自动适应当前宽高：

如果一个父元素为flex布局， 内部元素的宽度会根据各自的flex属性值进行等比切分：

运行下面代码

child1

child2, 两边固定宽度， 中间自动适应

child3

　　高度自动适应的demo：

运行下面代码

header

bodyer

footer

　　通过flex布局可以模拟一个微信的聊天窗口：

运行下面代码

消息

hehe我哟我去

hehe

hehe我哟我去

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

来啊， 哈哈

发送

回到顶部 flex布局的其它css属性： 　　Flex 容器属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 　　Flex 条目属性： order align-self flex-grow flex-shrink flex-basis

回到顶部
兼容：
　　android 4.4以上版本支持display:flex。低版本不支持。

安卓4.1，以及4.1以下不支持flex布局， 必须考虑别的方案；

android的低版本无法使用display:flex， 但是可以使用display:box替代；

要记得加浏览器前缀， 兼容写法如下：

运行下面代码

display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;