关于flex的那些事今天用vant组件库的时候遇到了一个问题（这个问题不是人家组件的问题）我只是改变了<vant-but

今天用vant组件库的时候遇到了一个问题（这个问题不是人家组件的问题）

如图所示，我只是改变了<vant-button>的数量，但是所展示的宽度却不同，这是为什么呢？

之后通过对样式的注释添加发现了，是因为在body中`display:flex;`的缘故

不过这又是为什么呢？随后我去找了MDN文档，看了关于flex的内容

Flex 容器
文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 `display` 属性值改为 `flex` 或者 `inline-flex`。完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
1.元素排列为一行 (`flex-direction` 属性的初始值是 `row`)。
2.元素从主轴的起始线开始。
3.元素不会在主维度方向拉伸，但是可以缩小。
4.元素被拉伸来填充交叉轴大小。
5.`flex-basis` 属性为 `auto`。
6.`flex-wrap` 属性为 `nowrap`。
这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

看过这个之后，初步判断，我觉得是3、5条问题，随后我又写了一个案例去测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      display: flex;
    }
    div{
      max-width: 1280px;
    }
    button{
      width: 100%;
      display: inline-block;
    }
  </style>
</head>
<body >
  <div >
    <button>阿巴阿巴</button>
    <button>阿巴阿巴</button>
    <button>阿巴阿巴</button>
    <button>阿巴阿巴</button>
  </div>
</body>
</html>