一、概述
随着移动互联网的发展，HTML5越发流行起来。现在越来越多的公司都开始了混合开发。前不久，微信刚刚开放的微信小程序，更加使得HTML5名声大噪起来。
移动端不比PC端，它强调的是要流畅，用户体验要好，特别是现在的业务场景越来越复杂，使得页面的布局等也相应的复杂起来。在这种情况下，Flexible Box布局出现了，它使得布局变得简单起来，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
二、什么是Flex布局
Flex是Flexible Box的简称，Flex布局又称“弹性布局”，它有很大的灵活性，是对传统网页布局的一种改良。虽然Flex布局与传统网页布局一样是基于Box模型(盒子模型)，但传统网页布局依赖以下三个属性：display、float、position。对于一些比较复杂的布局，它只能望洋兴叹，无能为力，比如：垂直居中。
Flex布局基于主轴与垂直于主轴的侧轴，就好比我们屏幕的X，y轴。同时位于Box里面的每一个块即为该容器的子元素，叫flexItem。如下图：
上面这个图其实有点小问题的，就是轴方向的问题，其实应该只画一个箭头。默认主轴是水平向右，左边起点为main start.结束点为main end。
同样垂直于主轴的侧轴垂直向下，上方起点为cross start，结束点为cross end。
盒子或flex container容器有以下6个重要的属性：
- flex-direction：用于决定子元素即flex item在主轴上的排列方向；
flex-wrap：用于如果子元素很多，多到在同一轴线上的排列不下的情况下时，怎么排列；
flex-flow：是flex-direction与flex-wrap两个的简写，即赋值时，得给出两个值，eg:flex-flow:row wrap
justify-content：用于确定flex item在容器主轴上的对齐方式；
align-items：用于确定flex item在垂直于主轴的侧轴上的对齐方式，用于只有一行item时；
align-content：与align-items的作用一样，只是它用于多行item,比如一个父元素里面包含三行子元素的时候，就可以用align-content来统一使这三行子元素对齐。
三、综合案例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jQuery.js"/>
<script>
$(document).ready(function(){
var temp = $(".div2").is(":visible");
alert(temp);
if($("#p1").is(":visible")){
$(".div1").css("background-color","red");
}
});
</script>
<style type="text/css">
.div1,.div2{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items:stretch;
}
#p1{
order:2
}
#p3{
flex-shrink:0
}
#title1,#p1{
background:#98bf21
}
</style>
</head>
<body>
<div class="div1">
<h1 id="title1">标题1</h1>
<div class="div2">
<div id="p1">这是一段文字</div>
<div id="p2">这是第二段文字</div>
<div id="p3">这是第三段文字</div>
</div>
</div>
</body>
</html>