使用flex轻松实现各种布局
今天主要介绍的是css3的display:flex，俗称弹性布局。
flex布局常用的属性有：
- flex: 1; //该属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
- flex-wrap: wrap; //flex-wrap 属性规定flex容器是单行或者多行，默认为单行，需要多行元素横向排列时应设置为wrap，否则flex会在单行内压缩子元素的宽度来进行布局
- flex-direction: column;//指定直接子元素的排列方式，默认为row,横向排列；column为纵向排列
- justify-content: center;//指定所有直接子元素在垂直方向上的对齐方式
- align-items: center;//指定所有直接子元素在水平方向上的对齐方式
- align-self: center;//指定单个直接子元素的水平方向的对齐方式
- order: 1;//指定元素显示的顺序
在这里需要注意：
- flex影响的只是直接子元素，并不会影响子孙元素。
- justify-content设置的是垂直方向， 是相对于元素排列方向的垂直方向，并不是固定的。
当flex-direction:row时设置的是相对于屏幕的水平方向的对齐方式；
当flex-direction: column时设置的是相对于屏幕的垂直方向的对齐方式。
- align-items,align-self同理，这里一定要额外注意。
先对上图进行布局分析：
1. 中间部分可分为左右两块，右半部分宽度固定，左半部分宽度不定。右半部分设置一个固定的宽度，左半部分设置 flex:1; 宽度即可自适应。
2. 左半部分的子元素是上下两端对齐的，只需要flex-direction:column以及justify-content: space-between;即可搞定，每个元素之间相隔的距离甚至都不需要手动计算！！！
如果要实现上图所示的布局，只需要书写下面一些简单的样式以及html元素：
<style type="text/css">
body {
background: #fff;
padding: 0 60px;
}
.flex {
display: flex;
}
.flex-1 {
flex:1;
}
.column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.justify-center {
justify-content: center;
}
.between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
header,
footer {
height: 100px;
background: #ccc;
margin: 60px auto;
}
.body-left {
margin-right: 36px;
height: 300px;
justify-content: space-between;
}
.body-right {
width: 20%;
background: #ccc;
}
.left-item {
background: #ccc;
height:90px;
}
.left-item2 {
background: #ccc;
height: 60px;
}
</style> HTML
<body>
<header></header>
<div class="body flex between">
<div class="body-left flex column between flex-1">
<div class="left-item"></div>
<div class="left-item2"></div>
<div class="left-item"></div>
</div>
<div class="body-right"></div>
</div>
<footer></footer>
</body>
将flex常用的属性都写成一个个css类，在使用时只需要在html元素上进行class的增减即可轻松布局，再也不用单独给每个元素设置布局方式了，免去了重复书写css样式的麻烦。
最后，再附上mdn上对于flex各种属性的详细介绍 mdn flex布局。英语不好的同学可以使用chrome浏览器尝试自动翻译或者是火狐浏览器安装翻译插件（英语能力完全过关的可以无视此条信息）。
这次就先分享到这吧，下次再给大家介绍flex的其他用法,如右对齐，两端对齐，垂直居中，改变显示顺序等，如果本次内容有任何问题，欢迎大家进行评论指正！