在平常开发中，flex布局是我使用率较高的布局，在使用的过程也遇到大大小小的问题，这里整理总结下

flex是一种弹性布局，包含的元素可以拉伸以填充额外的空间

举个🌰：

.box{
  display: flex;
}
.box div{
  width: 100px;
}
.a{
  background: rgb(177, 148, 121);
}
.b{
  background: rgb(172, 230, 222);
}
.c{
  background: rgb(239, 247, 174);
}

<div class="box">
  <div class="a">很多个元素a元素a元素a元素a元素a元素a元素a元素a元素a</div>
  <div class="b">元素b</div>
  <div class="c">元素c</div>
</div>

可以看到我没有给其中任何元素设置高度，“很多个元素a…”把高度撑开的同时，元素b，元素c的高度也同步变高了。

什么情况下，元素不会拉伸？

1）容器修改了align-items的值为center

align-items：stretch（默认）：拉伸以填充容器

2）容器没有高度的情况下，给子元素添加了任意高度

.b{
  height:100%;  // ❗❗
}

怎么实现某些元素居中，剩下的元素自适应？

1）使用margin:auto：自动分配剩余空间，实现居中