# Discuss

Title: 一篇测试文章
Introduction: 用于测试
CreateTime: 2023-03-11 12:19:41.500211
CreationTime: 1900-01-01 00:00:00
LastModificationTime: 2023-03-26 14:17:12.2055837
Cover: 1639562204019822592
Content:
  ## flex布局
  ### 1. 认识flex
  > 首先，了解弹性盒子， 弹性元素， 两条轴的概念

  flex容器有两个轴， 一个主轴，一个交叉轴（垂直于主轴的轴 即为交叉轴），容器内的元素默认会按主轴方向排列。 主轴和交叉轴（副轴）的默认方向如图所示：

  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/g8T3sgsv-image.png)
  下面先运行一下这段代码：
  ```html
  <body>
    <div class=\"box\">
      <div class=\"item\"></div>
      <div class=\"item\"></div>
      <div class=\"item\"></div>
      <div class=\"item\"></div>
      <div class=\"item last\"></div>
    </div>
  </body>
  </html>

  <style>
    .box {
      width: 50vw;
      margin: 0 auto;
      background-color: mediumturquoise;

      display: flex;
    }

    .item {
      width: 50px;
      height: 50px;
      background-color: rgb(249, 27, 223);
      margin:5px;
    }
  </style>
  ```
   
  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/gg5444hb-image.png)

  这就是flex布局的默认行为：内部元素默认按照默认主轴的方向排列（元素的间距是我自己设定的margin，没有margin他们就会连在一起）

  Flexbox 允许使用`margin: auto` 来填充弹性子元素之间的可用空间。例如，我们可以给元素添加`margin: auto`，就会变这样子：
  ```css
  item {
    margin: auto;
  }
  ```

  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/wo00RR2J-image.png)

  利用这个特性，我们可以把最后一个item推到最右侧：
  ```css
  .item.last {
    margin-left: auto;
  }
  ```

  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/aLWUY2NZ-image.png)

  ### 2. flex核心
  先来一波总结：

  > flex的核心就是“弹”，弹性元素在盒子的空间剩余时可以放大， 溢了可以 缩小。
  $\\color{#FF0000}{一个弹性元素的宽度计算公式为：(flex-basis ± 分配的剩余宽度/溢出宽度)}$ 

  > 刚刚我们了解了相关的flex概念，现在我们来了解一个非常重要的属性——flex。
  $\\color{#FF0000}{flex 属性控制弹性子元素在主轴方向上的大小。}$ 
  下面我们新增如下html，并让弹性元素使用flex属性来设置其大小
  ```html
  <!-- html -->
  <div class=\"content\">
    <div class=\"main\"></div>
    <div class=\"sider\"></div>
  </div>

  <!-- css -->
  <style>
    /* flex盒子 */
    .content {
      width: 90%;
      margin: 0 auto;
      display: flex;
    }
    .main, .sider {
      height: 50vh;
      background-color: white;
    }
    .main {
      //第一个白色方形宽度所占比例为3/4
      flex: 3;
      margin-right: 10px;
    }
    .sider {
      //第二个白色方形宽度所占比例为1/4
      flex: 1;
    }
  </style>
  ```
  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/VWlShDkd-image.png)

  我们设置了其为3:1的大小，弹性元素大小为（内容+ 内边框+内边距 + 外边框 + 外边距）。即若给其中一个弹性元素添加margin, 那么在计算弹性元素大小时，margin也会被计算在其中。



  #### flex-basis属性
  `flex-basis`属性 是用来定义弹性元素的宽度的（相当于width属性）。默认值为`auto`，此时，`flex-basis`的值为 wdith属性的值，若弹性元素没有设置`width`属性，那么就默认为弹性元素本身大小。`flex-basis`属性和`width`属性同时出现时， 会忽略掉`width`属性。
  注意： `flex-basis`的值，为弹性元素大小（包含外边距）。
  设置了基本大小之后，我们就可以放心的让弹性元素 智能缩放，来适应各盒子的大小，即可以“弹”。这时候就需要 `flex-grow`和 `flex-shrink` 来决定缩放的规则。

  #### flex-grow属性
  `flex-grow`属性可以用来放大单个弹性元素大小，是一个增长因子。
  当`flex-basis`值设置好后，每个弹性元素都会占据一定宽度，加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白。
  多出来的留白（或剩余宽度）会按照 `flex-grow`（增长因子）的值分配给每个弹性子元素， flex-grow 的值为非负整数。如果一个弹性子元素的 `flex-grow` 值为 0，那么它的宽度不会超 过 `flex-basis` 的值。一图胜千言，看图：

  ![image.png](https://pic.code-nav.cn/post_picture/1608457329227857922/M3mG0cEZ-image.png)

  #### flex-shrink属性
  &nbsp;&nbsp;&nbsp;&nbsp;与flex-grow相似，只不过felx-shrink属性是用来控制弹性元素缩小的，是一个缩小因子。
  计算出弹性子元素的初始主尺寸后，它 们的累加值可能会超出弹性容器的可用宽度。如果不用 flex-shrink，会导致溢出。
  ```
  .item {
      flex-basis: 40%;  
      flex-shrink: 0;   //设置为0，则为不进行缩放
      width: 200px;
    }
  ```

  &nbsp;&nbsp;如果某个子元素为 flex-shrink: 0，则不会收缩；如果值大于 0，则会收缩至不再溢出。按照 flex-shrink 值的比例，值越大的元素收缩得越多。

  #### flex属性
  &nbsp;&nbsp;&nbsp;&nbsp; `flex`属性是一个简写属性，是`flex-grow` `flex-shrink` `flex-basis`属性的简写形式。
  `flex:1 1 0` 相当于 `flex-grow` 为1， `flex-shrink`为1， `flex-basis`为0。 如果省略了其他属性，子属性的值并不会被置为初始值， `flex` 简写属性会给出有用的默认值：`flex-grow` 为 1、`flex-shrink`为 1、`flex-basis` 为 0%。这些默认值正是大多数情况下所需要的值。

  &nbsp;&nbsp;&nbsp;&nbsp; 所以，平常我们写的`flex: 1`即设置了`flex-grow`为1， `flex-shrink`为1，`flex-basis`为0。基础值为0（大家初始宽度都一样大，且为0），那么剩下的全都是剩余的空间，每个元素都会按照相同的比例调整自己的宽度（基础值 + 分配的剩余宽度）。
  > 注意：`flex: 33.6%  --> flex-grow:1, flex-shrink:1, flex-basis: 33.6%`.

  ### 3. flex对齐
  flex 提供了许多强大的对齐方式，让内部弹性元素按照规则对齐（例如居中对齐）
  详细对齐效果见
  #### justify-content属性
  这个属性用来控制主轴方向的元素对齐方式：flex-start、flex-end、center、space-between。

  #### align-items
  这个属性用来控制副轴的对齐方式。大致取值及效果如下图：

  #### aligin-self
  这个属性是放在弹性子元素的身上的。 它可以单独给弹性子元素设置副轴上的对齐方式，覆盖掉原来的aligin-items属性。


Title: 一篇测试文章222
Content: 你好，看到喔2了嘛？
CreationTime: 1900-01-01 00:00:00
LastModificationTime: 2023-03-26 14:15:58.7328121
Introduction:
  用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123用于2测试123


Title: 测试一下内容md
Types: 测试一下
Introduction: 从而产生
CreateTime: 2023-03-11 19:30:29.2016116
Color: #bababa
CreationTime: 1900-01-01 00:00:00
LastModificationTime: 2023-03-24 22:39:13.573014
Content:
  Markdown 语法速查表  
  1 标题与文字格式  
  标题  
  # 这是 H1 <一级标题>  
  ## 这是 H2 <二级标题>  
  ###### 这是 H6 <六级标题>  
  文字格式  
  **这是文字粗体格式**  
  *这是文字斜体格式*  
  ~~在文字上添加删除线~~  
  2 列表  
  无序列表  
  * 项目1  
  * 项目2  
  * 项目3  
  有序列表  
  1. 项目1  
  2. 项目2  
  3. 项目3  
     * 项目1  
     * 项目2  
  3 其它  
  图片  
  ![图片名称](http://gitcafe.com/image.png)  
  链接  
  [链接名称](http://gitcafe.com)  
  引用  
  > 第一行引用文字  
  > 第二行引用文字  
  水平线  
  ***  
  代码  
  `<hello world>`  
  代码块高亮  
  ```ruby  
    def add(a, b)  
      return a + b  
    end  
  ```  
  表格  
    表头  | 表头  
    ------------- | -------------  
   单元格内容  | 单元格内容  
   单元格内容l  | 单元格内容  


Title: 阿三大苏打撒旦2
Introduction: 123123
CreateTime: 2023-03-18 01:03:37.3457919
Content:
  阿大撒大撒阿松大撒啊实打实

  ![favicon.ico](/api-dev/file/1637128750699253760)
  ![loginBg.png](/api-dev/file/1637128794496176128)


  😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊


# OperationLog

Title: 添加用户
RequestMethod: POST
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user
CreationTime: 2023-03-18 21:08:25.6793967
RequestResult:
  {"Id":1637078504623443968,"Name":null,"Age":null,"UserName":"guest","Icon":null,"Nick":"游客","Email":null,"Ip":null,"Address":null,"Phone":null,"Introduction":null,"Remark":null,"Sex":2,"State":true,"CreationTime":"2023-03-18T21:08:25.6169088+08:00","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 00:12:02.5037136
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637124478213427200","Nick":"橙子2","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:44:38.447566
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子24","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:44:42.472142
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:48:30.3624545
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子2","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:51:17.9221922
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子3","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:52:36.6778844
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子34","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:52:43.9567393
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子346","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:53:08.1376084
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子3465","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:54:31.0421997
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子34655","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:54:47.4312176
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子346555","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:55:02.3223662
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子3465555","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:55:19.3780058
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子34655555","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 16:56:11.3867222
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子23","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 17:00:07.5956379
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子234","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-19 17:04:10.8819828
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子2345","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新用户
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/1628238622719348736
CreationTime: 2023-03-19 18:10:22.7220727
RequestResult:
  {"Id":1628238622719348736,"Name":"大测试","Age":18,"UserName":"test","Icon":null,"Nick":"测试","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":15900000000,"Introduction":"还有我！","Remark":"我没有描述！","Sex":1,"State":true,"CreationTime":"2023-02-22T11:41:53.524","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-21 21:24:37.9828868
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子3123","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-21 21:25:04.8143453
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子31232","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-21 21:26:11.9776003
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子31","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":0,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


Title: 更新个人信息
RequestMethod: PUT
OperUser: cc
OperIp: 127.0.0.1
OperLocation: 0 内网IP
Method: /api/user/profile
CreationTime: 2023-03-26 14:42:22.556778
RequestResult:
  {"Id":1628238622597713920,"Name":"大橙子","Age":20,"UserName":"cc","Icon":"1637373411045019648","Nick":"橙子","Email":"454313500@qq.com","Ip":null,"Address":"深圳","Phone":13800000000,"Introduction":"还有谁？","Remark":"描述是什么呢？","Sex":1,"State":true,"CreationTime":"2023-02-22T11:41:53.494","DeptId":0,"Dept":null,"Posts":null,"Roles":null}


