目录
[1、flex-direction: ; 控制主轴的方向](#1、flex-direction: ; 控制主轴的方向)
[2、justify-content: ;控制主轴方向，弹性元素的布局](#2、justify-content: ;控制主轴方向，弹性元素的布局)
[3、align-items: ;控制单行侧轴的对齐方式](#3、align-items: ;控制单行侧轴的对齐方式)
[4、 flex-wrap: ; 控制是否换行](#4、 flex-wrap: ; 控制是否换行)
[5、align-content: ; 控制侧轴多行的对齐方式](#5、align-content: ; 控制侧轴多行的对齐方式)
[6、flex-flow:主轴侧方向 是否换行;](#6、flex-flow:主轴侧方向 是否换行;)
概念：
弹性盒子是一种布局方式，通过父元素去控制子元素，先给父元素开启弹性盒子，
这样就有很多预定义好的样式名和样式值可以控制子元素了
开启弹性盒子：
块元素： display：flex；
行内元素： display：inline-flex；
父元素：弹性容器 谁开了弹性盒子，谁就是
子元素：弹性元素 弹性容器的直接子元素
预定义样式(常用)
弹性容器:6个
弹性元素：6个
首先开启弹性盒子：display：flex;
开启后要先考虑主轴和交叉轴（侧轴）的方向
弹性容器元素
1、flex-direction: ; 控制主轴的方向
可选值：
row 默认值 主轴是水平方向，起点在左，侧轴是垂直方向，起点在上
row-reverse 主轴是水平方向，起点在右，侧轴是垂直方向，起点在下
column 主轴是垂直方向，起点在上，侧轴是水平方向，起点在左
column-reverse 主轴是垂直方向，起点在下，侧轴是水平方向，起点在上
2、justify-content: ;控制主轴方向，弹性元素的布局
控制主轴方向的元素，flex用的最多的属性之一
可选值：
flex-start 弹性元素主轴起点开始布局
flex-end 弹性元素主轴终点开始布局
center 弹性元素主轴居中布局
space-between 弹性元素主轴两端对齐布局
space-around 空白间距两端小，中间大布局
space-evenly 空白间距平均在弹性元素两侧
3、align-items: ;控制单行侧轴的对齐方式
可选值：
flex-start 弹性元素侧轴起点开始布局
flex-end 弹性元素侧轴终点开始布局
center 弹性元素侧轴居中布局
4、 flex-wrap: ; 控制是否换行
可选值：
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行且反转
5、align-content: ; 控制侧轴多行的对齐方式
可选值：
flex-start 弹性元素侧轴起点开始布局
flex-end 弹性元素侧轴终点开始布局
center 弹性元素侧轴居中布局
space-between 弹性元素侧轴两端对齐布局
space-around 空白间距两端小，中间大布局
space-evenly 空白间距平均在弹性元素两侧
6、flex-flow:主轴侧方向 是否换行;
这个属性就是简写方式，justify-content和flex-wrap
弹性元素属性
1、order：
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2、flex-grow：
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3、flex-shrink：
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4、flex-basis：
定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，
即项目的本来大小。
5、flexflex：
属性是flex-grow, flex-shrink 和 flex-basis的简写，
默认值为0 1 auto。后两个属性可选。
6、align-self：
允许单个项目有与其他项目不一样的对齐方式
可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，
则等同于stretch。
弹性盒子用法扩展
有的时候只用一次display：flex；并不好解决问题，所以我们可以将多行元素看成多个子弹性盒子，这些子弹性盒子看成整体外面套父弹性盒子，先有外层弹性盒子控制内层弹性盒子对齐方式，再由内层弹性盒子，控制里面的弹性元素。
dice-4 {
width: 80px;
height: 80px;
background: #fff;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
/* 外层父弹性盒子：把"行"当成弹性项 */
display: flex;
flex-direction: column; /* 两行，纵向排 */
justify-content: space-between; /* 两行贴边分布 */
}
/* 内层子弹性盒子：把"列"当成弹性项 */
.dice-4 .row {
display: flex;
justify-content: space-between; /* 两列贴边分布 */
}
/* 点子 */
.dice-4 .dot {
width: 18px;
height: 18px;
background: #000;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="dice-4">
<div class="row">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="row">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>