前端时间在项目中使用了一下Flex布局，闲来无事记录一下
首先以一个骰子做介绍
默认是靠左对齐
骰子居中
.box{
display: flex;
justify-content: center;
}
骰子靠右
.box{
display: flex;
justify-content: flex-end;
}
设置交叉轴对齐(垂直方向)
.box{
display: flex;
align-items:center;
}
主轴和交叉轴同时居中
.box{
display: flex;
align-items:center;
justify-content:center;
}
.box{
display: flex;
align-items:flex-end;
justify-content:center;
}
.box{
display: flex;
align-items:flex-end;
justify-content:flex-end;
}
align-items 属性定义项目在交叉轴上如何对齐
flex-startflex-endcenterbaseline-
stretch
两个子元素
.box{
display: flex;
justify-content: space-between;
}
justify-content定义了子项目在主轴上的对齐方式(对齐方式与轴的方向有关)
-
flex-start左对齐 -
flex-end右对齐 -
center居中 -
space-between两端对齐 -
space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
flex-direction 属性决定主轴的方向(即项目的排列方向)
-
row(默认值) 主轴水平方向,起点在左端 -
row-reverse主轴为水平方向,起点在右端 -
column主轴为垂直方向,起点在顶部 -
column-reverse主轴为垂直方向，起点在底部
主轴方向为垂直，然后两端对齐，垂直方向居中
.box{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
主轴方向垂直，两端对齐，交叉轴为底对齐（主轴改变了方向，现在交叉轴的底部为右边）
.box{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
}
align-self 属性允许单个项目与其他项目有不一样的的对齐方式(
交叉轴方向),可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
autoflex-startflex-endcenterbaseline-
stretch
这6个属性值，除了auto，其他都与align-items属性完全一致
首先主轴方向设置两端对齐,然后子项目的align-self设置为flex-end
.box{display:flex;justify-content:space-between;}
.item:nth-child(2){align-self:flex-end;}
三个子项目
主轴方向为默认，然后第二个子项目设置为center，第三个子项目设置为flex-end
.box{display:flex;justify-content:space-around;}
.item:nth-child(2){align-self:center;}
.item:nth-child(3){align-self:flex-end;}
四个子项目
.box{ display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-content: space-between;}
首先把主轴的对齐方式设置为flex-end,然后设置换行,然后定义多根轴线的对齐方式space-between交叉轴两端对齐
flex-wrap 默认情况下项目都排在一条线上(
轴线),flex-wrap属性定义，如果一条轴线排不下，如何换行
-
nowrap默认不换行
-
wrap换行，第一行在上方
-
wrap-reverse换行,第一行在下方
align-content 定义多根轴线的对齐方式,如果项目只有一根轴线,那这个属性就不起作用
-
flex-start与交叉轴的起点对齐 -
flex-end与交叉轴的终点对齐 -
center与交叉轴的重点对齐 -
space-between与交叉轴两端对齐，轴线之间的间隔平均分布 -
soace-around每根轴线的两侧间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 -
stretch默认值 轴线占满整个交叉轴
页面结构
<div class="box">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
样式
.box{
width: 100px;
height: 100px;
border:1px solid black;
margin: 50px auto;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.item{
width: 28px;
height: 28px;
background:#000;
border-radius: 50%;
margin-right: 5px;
}
.column{
display: flex;
flex-basis: 100%;
justify-content: space-between;
}
这里主要是用了两个子项目（column）做换行，并且把column的大小设置为主轴的100%，然后把column里面的子项设置为两端对齐
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小（被子元素撑开的大小）如下图(auto的情况)
网格布局
说明：每个cell平分父元素
结构
<div class="grid">
<div class="grid-cell">1</div>
<div class="grid-cell">2</div>
<div class="grid-cell">3</div>
<div class="grid-cell">4</div>
</div>
<style>
*{margin: 0;padding: 0;}
.grid{width: 300px;margin: 50px auto;display: flex;}
.grid-cell{text-align: center;height: 30px;line-height: 30px;border:1px solid #ccc;flex:1;}
</style>
> `flex`属性是`flex-grow`，`flex-shrink`,`flex-basis`的简写，默认值为`0 1 auto`。后面两个属性可选(两个快捷值:`auto`->1 1 auto `none`->0 0 auto),建议优先使用这个属性
* `flex-grow` 定义项目的放大比例,默认为0，即如果存在剩余空间，也不放大。如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
* `flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
# 参考资料
[flex布局教程-语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[flex布局教程-实例](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
