flex布局

现如今flex布局是现在前端布局的神器，使用这个布局方式能够能轻易的实现各种效果

例如：

• 居中效果：只需向父容器添加display: flex，并设置两个属性即可使子元素在水平和垂直方向均居中，更重要的是支持响应式，这使得更好的适配移动端布局。

<div class="container">
  <div>xxxxx</div>
</div>

<style scoped>

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

起因

最近在做该网站的时候觉得文章阅读界面在pc端显示两端都比较空，便想把原本的布局组件改为三栏式布局，于是写下下列代码

<template>
  <NavBar />
  <div v-bind="$attrs" flex justify-center>
    <div w-60 display-none lg:display-block>
      <slot name="pre" />
    </div>
    <div p-4 max-w-750px sm:min-w-750px flex-1>
      <slot />
    </div>
    <div w-60 display-none lg:display-block>
      <slot name="sidebar" />
    </div>
  </div>
</template>

该组件使用具名插槽的方式定义布局，使用通过设置顶层元素 flex 达到三栏布局效果，设置完成后pc端（或者说是大屏显示下）显示完全正常，但是调整到移动端小屏显示时就出现了问题。

如图

懵懂的我以为是中间的元素没有设置 flex-shrink 属性导致不能自动缩小，但我设置上该属性后依然无效，我又设置了其他我知道的属性尝试，但依然无效，更重要得是当界面中没有代码片段得时候显示又是正常的，啊这...

面向百度编程

那来吧，作为一个合格的程序员，那么必需得会百度咯

经过一番搜索，发现 flex 下得元素自适应缩小都不会超过元素的最小宽度，而当界面有代码显示的时候，横向内容是不会换行的，也就是说会有最小宽度，这样就会导致缩小到最小宽度的时候就不会在缩小了，就把父容器给撑开了。

弹性项目不能小于沿主轴的内容大小。

因为默认值是

• min-width: auto

• min-height: auto

解决办法

既然是元素的默认值导致的问题，那么我们就手动设置一个最小宽度，于是便给需要正常缩放的元素设置一个最小宽度

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，visible除外）

/** flex子元素中需要缩小的元素 **/
.element{
  min-width: 0;
}

大功告成，又学到了一招，又可以愉快的写bug了！