MelonBlog

解决了一个困扰了很久的Flexbox布局问题（safe和unsafe）

写前端的时候，Flex 成为了大家最主要的布局方法，在Flexbox布局出现之前，写布局其实是挺麻烦一件事，但是flex的出现很方便的让我们可以绘制出我们想要的布局。

但是我在用flex布局的时候，经常会遇到一个问题，就是当内容超出的时候，flex会把我的内容给截断掉，所以我每次遇到这个问题的时候，都会把内容溢出的flex容器盒子换成正常的盒子，这样滚动（overflow-auto）效果就能正常工作。

如图：

本应该出现的顶部内容，居然消失了。

今天在掘金学了大漠老师的一堂flex布局的课，里面描述了我困扰已久的问题，然后学习了他的解决方案——safe、unsafe关键字

safe关键字会将因为对齐方式导致溢出时，将设置的对齐模式切换到 start 对齐模式下，目的是避免“数据丢失”，其中部分项目超出对齐容器的边界并且无法滚动到。

unsafe，即使会导致此类数据丢失，也会遵守对齐方式。

这是一个仍处于草案状态的特性，但是chrome已经支持了safe关键字

当我把align-items: center; 改成align-items: safe center; 之后，这个问题就解决了

.container {

    margin: auto auto;

    background-color: #1c94ad;

    width: 400px;

    height: 300px;

    display: flex;

    justify-content: center;

    align-items: safe center;

    overflow-x: auto;