原因工作结束后，由于大量使用flex布局，遇到了一些不清楚的问题和一些有趣的特性。写一篇博客记录在这里。flex的三个值的含义众所周知。flex布局中有两类属性：一种作用于弹性容器（Flexcontainer），一种作用于弹性项（Flexitem），flex作用于弹性项。属性。flex是flex-grow、flex-shrink、flex-basis三个值的缩写。该值指定弹性项目将如何拉伸或收缩以适应弹性容器中的可用空间。flex-grow定义弹性项目的放大列。它可以接受数字（也可以接受小数），但不接受负值。默认值为0。值为0意味着即使容器中仍有剩余空间，弹性项目也不会增长。flex-shrink定义了flexitem的收缩比例，也接受数字（小数也可以），不接受负值。默认值为1。如果一个flex-item的flex-shrink设置为0而其他flex-items的flex-shrink值为1，那么当flex容器空间用完时，该flex-item不会被压缩，而其他flex-items会按比例压缩。flex-basis定义了flex项目在容器中分配空间之前占用的主轴空间（不一定是宽度，因为主轴方向可以是垂直的），默认值为auto。如果在弹性项目上同时设置了flex-basis和width，则width将被忽略。另请注意，当主轴为横向时，设置max-width或min-width将限制flex项目的宽度。这里先说说flex-basis的取值：指定的值，比如以px、em为单位的取值。百分比，如果取百分比，则相对于其父弹性容器的宽度或高度计算（取决于主轴方向）。如果没有指定包含块的大小（即父元素的大小取决于子元素），那么结果和auto是一样的。auto值表示根据弹性项的宽度或高度（根据主轴的水平或垂直轴）调整尺寸，如果不设置宽度或高度，则根据内容。设置flex后如何计算弹性项的宽度下面是代码示例
