我在长期带项目带人的过程中，发现好多人对flex很陌生，让我有种错觉，flex是很新的技术，后来一baidu，css3 2009年就发布了Flexbox layout。
十来年前沿用至今的技术，我觉得不会这个的前端不是一个好厨子。
Flexbox有两套属性，一套针对可伸缩容器（flexible container），一套针对容器的直接子元素，或可伸缩项（flexible item）。
Flex容器，即应用display:flex;或display: inline-flex规则的元素，可以接受如下属性：
flex-direction：指定主轴方向是水平还是垂直
flex-wrap：指定可伸缩项是否折行
flex-flow：以上两个属性的简写形式
justify-content：指定可伸缩项在主轴方向上的对齐方式
align-items：指定可伸缩项在辅轴方向上的对齐方式
align-content：指定多行可伸缩项在辅轴方向上的对齐方式
容器的直接子元素或者可伸缩项，可以接受如下属性：
flex-grow：指定当前项如何扩展
flex-shrink：指定当前项如何收缩
flex-basis：指定分配剩余空间之前当前项的初始大小
flex：以上三个属性的简写形式
order：指定当前项在容器中出现的次序
综上：已经是flex的全部内容了
这个属性决定CSS如何给可伸缩项在容器中分配初始大小，常用值：
auto（默认值）
content
长度或百分比值
auto的意思是首先看当前项有没有明确设置宽度，如果有则使用该宽度；如果没有，则以包含的内容决定宽度。
content是不管当前项是否明确设置了宽度，一律以内容决定宽度。
长度或百分比值呢？就是字面意思，百分比是相对于容器而言的。
重点！！！
知道如何确定可伸缩项的宽度是第一步。根据以上规则知道了每一项的宽度，简单相加就能得到所有项宽度的总和。而知道了所有项宽度的总和，再与容器宽度比较，就能知道容器里是不是还有剩余空间可供再次分配。这里有三种情况：
所有项宽度总和等于容器宽度，剩余空间为零
所有项宽度总和小于容器宽度，剩余空间为正 看每项flex-grow 来分配剩余空间 默认0 不放大
所有项宽度总和大于宽度宽度，剩余空间为负 看每项flex-shrink 来收缩空间 默认1 可缩小
假设把所有可伸缩项的flex-basis都设置为0，那就意味着这些项不会参与第一次容器空间的分配。
什么意思呢？如前所述，flex-basis值决定了CSS如何确定各伸缩项在容器中的初始宽度。确定各项初始宽度是对容器空间的首次分配。
如果初次分配各项初始宽度为0（flex-basis: 0;），那就是说容器的全部宽度都会进入二次分配环节。利用这一点，可以实现各伸缩项宽度的绝对平均化。
由本文可知，理解Flexbox的重点并不在于容器，而在于可伸缩项。
此处有一坑 可接受一个参数 两个参数 三个参数
flex：1 flex-basis值 0% 会自动解析为 content （父元素没有设置高度的情况下）、
W3C的解释是 0px
饮水思源：Flexbox，终于可以承认自己明白了
饮水思源：CSS flex布局踩坑小记：flex-basis属性之0px与0%的差异_shadow_Mike的博客-CSDN博客