flex弹性盒模型布局
容器属性：
1.flex-direction:项目的排列方向
(1)row 主轴方向排列
(2)row-reverse 主轴反方向排列
(3)column 纵向排列
(4)column-reverse 纵向反方向排列
2.flex-wrap:项目的换行方式
(1)nowrap:不换
(2)wrap:换行，第一行在上方
(3)wrap-reverse:换行，第一行在下方
3.flex-flow：是flex-direction和flex-wrap 的简写，默认 row nowrap
4.justify-content:项目在主轴上的对齐方式
(1)flex-start 左对齐
(2)flex-end 右对齐
(3)center 居中
(4)space-between 两端对齐，项目之间的间隔相等
(5)space-around 每个项目两侧的间距相等
5.align-items:项目在交叉轴上对齐方式
(1)flex-start 交叉轴的起点对齐
(2)flex-end 交叉轴的终点对齐
(3)center 交叉轴的中点对齐
(4)baseline 项目第一行文字的基线对齐
(5)stretch (默认值)如果项目未设置高度，或者为auto，将占满整个容器的高度。
项目属性：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .con{
8 width: 500px;
9 height: 300px;
10 outline: 1px solid black;
11 display: flex;
12 }
13 .con div{
14 width: 50px;
15 height: 50px;
16 outline: 1px solid black;
17 }
18 .one{background: red;} .two{background: orange} .three{background: yellow} .four{background: green} .five{background: blueviolet}
19
20 /*容器属性 */
21 .con{
22 /*flex-direction: row;row-reverse;column;column-reverse*/
23 /*flex-wrap:wrap-reverse;wrap;nowrap*/
24 /*justify-content:space-between;flex-start;flex-end;center;spance-around*/
25 /*align-items: flex-end;flex-start;center;baseline;stretch;*/
26 }
27 /*项目属性*/
28 .one{
29 /*order: 1; 数越小越往前排列*/
30 /*flex-grow: 2; 默认为0，将剩余空间分给不为0的元素*/
31 /*flex-shrink:2; 默认为1，当父级空间不足，都将按比例减小，如果一个元素为0，其余为1，则这个元素不减小*/
32 /*align-self: flex-end; 可以覆盖父级的align-items属性，默认为auto，表示继承父级的align-items属性，如没有父元素则表现stretch*/
33 }
34
35 </style>
36 </head>
37 <body>
38 <div class="con">
39 <div class="one">1</div>
40 <div class="two">2</div>
41 <div class="three">3</div>
42 <div class="four">4</div>
43 <div class="five">5</div>
44 </div>
45
46 </body>
47 </html>
1.order:项目的排列顺序。数值越小，排列越靠前，默认为0
2.flex-grow:属性定义项目的放大比例，默认为0，即：如果存在剩余空间，也不放大
3.flex-shrink 属性定义了项目缩小比例，默认为1，即如果空间不足，该项目将缩小。
4.flex 是flex-grow，flex-shrink flex-basis简写
5.align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父类的align-items属性，如果没有父级，等同于stretch。
