几个flexbox的隐藏属性

1. 子元素的margin不再塌陷

正常情况下，两个display: block的子元素之间在垂直方向上的margin会塌陷在一起(取两者的最大值), 而如果父元素是display: flex的话，margin将不再塌陷

2. 子元素将平均分配每个方向上的auto margin

如1, 子元素在垂直方向上的margin不再塌陷意味着margin在垂直方向上的表现不再特殊化。也就是说，块元素常用的居中修饰margin-left: auto; margin-right:auto;将在垂直方向上也起作用，当然垂直居中这个效果在flexbox下虽然可以方便的用align-items: center;来做到,但是当子元素有多个的时候，flexbox将会把所有剩余空间在每个拥有auto margin的子元素上平均分配。 下图这样的伪分组排列的效果可以非常容易的用两个margin-top:auto来实现

<div style="display:flex;flex-direction: column;height:200px">
  <div style="margin-top: auto;">主页</div>
  <div>导航</div>
  <div>分享</div>
  <div style="margin-top: auto;">登录</div>
  <div>注册</div>
</div>

3. 如果flexbox的子元素哪怕不是一个元素也将被视作一个flex item

如下代码，其中hello world只是一个text node

<div style="display:flex;gap:2em;width:500px">
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt non sint repudiandae officiis nisi ipsam ad laborum voluptate obcaecati, quis quaerat, et voluptatum voluptas quo. Dolores quibusdam voluptate in cum!</div>
 
  hello world
 
  <div>Sapiente, eaque, similique incidunt beatae nulla harum consequatur dignissimos nobis repellat facilis delectus veniam deleniti sequi quisquam, culpa autem consequuntur! Nemo voluptates minus laborum expedita ab obcaecati praesentium temporibus voluptatum?</div>
  <div>Modi, pariatur reprehenderit illo aliquid in error laborum assumenda ea ipsum? Consequatur eveniet velit aliquid et placeat odit, possimus officia magni repudiandae. Fugiat laborum tempore fugit iusto minima repudiandae odit?</div>
</div>

可以看到,渲染的时候hello world也被视作为一个单独flex item，不过实际使用这种情况比较少见

4. flex-grow: 1并不会总是让子元素平均分配长或宽

flexbox下的子元素默认情况下会根据内容自动分配大小，内容大一些的子元素的大小也会大一些。这是因为默认情况下flex-shrink: 1，这时如果想要子元素的大小变成一样的话我们通常会设置flex-basis:100%或者flex-grow: 1或者width: 100%这三个中间的其中之一。

但是实际情况可能并非如此，如果其中子元素一个设置了和flex-direction相同方向的padding的话,拥有padding的子元素会比其他的稍大一些。这是因为在计算实际大小的时候，padding会作为额外变量加入计算。为了避免这个情况出现，只能给每个子元素设置同样的padding又或者放弃flexbox而使用display: grid