Flexbox弹性布局总结
一. 为什么要学这个布局？
css3中的flexbox生来就是为了布局而生的，使用它能使许多布局布局变得简单。典型的三栏式布局、垂直水平居中布局，使用的是传统的浮动法、定位法，代码相对复杂难懂，如果使用flexbox就会变得很简单。
而且这个布局也是当下前端开发人员必备的技能，可以说是不得不学。
二. 将一个元素变成Flexbox
定义容器的语法：display : flex || inline-flex
定义了容器后该伸缩容器中的元素将变成伸缩项，并且该容器将生成两条轴：主轴和侧轴。
三. 常用的容器属性
- 第一组：
- flex-direction：用来改变主轴方向
- flex-wrap：用来改变侧轴方向和自动换行
- flex-flow：前两者的缩写
- 第二组：
- justify-content：控制子项在主轴的展现方式
- align-items：控制子项在侧轴的展现方式
- align-content：控制子项所组成的行(列)在侧轴的展现方式
四. 常用的项目(子项)属性
- 第一组：
- order：用来改变子项位置
- 第二组：
- align-self：控制指定子项在侧轴的展现方式
- 第三组：
- flex-grow：子项的伸展长度(所占比例)
- flex-shrink：子项的收缩程度
- flex-basis：定义子项的伸缩前的长度(和使用width差不多)
- flex：前三者的缩写形式
五. 实例
实现如图所示的垂直水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox实现垂直水平居中</title>
<style type="text/css">
#div_0{
height: 300px;
width: 500px;
background-color: dimgray;
display: flex;
flex-direction: row; /*rom是默认值：主轴从左往右*/
flex-wrap: wrap; /*自动换行；不改变侧轴方向*/
justify-content: center; /*显示在主轴的中间*/
align-items: center; /*子项在侧轴中间位置*/
}
#div_1{
height: 100px;
width: 100px;
background-color:burlywood;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1">居中的元素</div>
</div>
</body>
</html>
推荐：
FlexBox-弹性盒子详解 - 网易云课堂推荐阅读：
