<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FLEX</title>
</head>
<body>
<style>
footer{
display:flex;
flex-flow:row wrap;
align-items: stretch;
/*
justify-content : flex-end;
主轴排列方式
*/
/*
justify-content : flex-start;
*/
justify-content : center;
/*
justify-content : space-between;
*/
align-content : flex-start;
/*
侧轴排列方式
flex-end ： 开头
center 中心
space-between 均匀排列
space-around 另一种均匀排列
stretch 伸缩排列
*/
}
div{
/*
flex: 1 0 7rem;
15%;
*/
}
div:nth-child(1){
/*flex和在sencha里面的flex一样的
flex-grow flex-shrink flex-basis;
*/
flex : 1;
}
div:nth-child(2){
/*
在不改变结构的情况下，更改页面排列方式
*/
order : 1;
flex : 2
}
</style>
<!--
神奇的flex布局..
-->
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>