该属性是控制子项在侧轴（默认是y轴)上的排列方式在子项为单项的时候使用

    属性值 说明
    flex-start 从上到下
    flex-end 从下到上
    center 挤在一块居中（垂直居中）
    stretch（了解） 拉伸（默认值） 
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     div {
    12.       display: flex;
    13.       width: 500px;
    14.       height: 500px;
    15.       background-color: blue;
    16.       flex-direction: row;
    17.       justify-content: center;
    18.       align-items: center;
    19.     }
    21.     div span {
    22.       width: 100px;
    23.       height: 100px;
    24.       margin: 10px;
    25.       background-color: red;
    26.     }
    27.   </style>
    28. </head>
    30. <body>
    31.   <div>
    32.     <span>1</span>
    33.     <span>2</span>
    34.     <span>3</span>
    36.   </div>
    37. </body>
    39. </html>

    image.png