Flex布局

Flex布局是较新出现非常实用的布局，可以实现复杂和漂亮的布局样式。

1.子组件在父组件内水平居中.

<div style="display: flex; justify-content: center">

         <div>

                   Hi.

         </div>

</div>

2.子组件在父组件内垂直居中.

<div style="display: flex; align-items: center;>

   <!-- 标题就是一个用户的头像 -->

   <el-icon><User /></el-icon>

   <el-button style="margin-left: 5px;">

       登录/注册

   </el-button>

</div>

3.子组件数量较多需要在父组件内换行

<div style="display: flex; flex-wrap: wrap; margin: 10px;" >

         <node

               v-for="(item, index) in item_list" :key="item.id"

               :title="item.title"

         />

</div>

4.多个子组件竖直从上往下排列（水平居中）

  display: flex;
  flex-direction: column;  /* 子元素垂直排列 */
  align-items: center;     /* 水平居中 */