flex的三个参数flex：10auto
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow：定义项⽬的的放⼤⽐例；
默认为0，即 即使存在剩余空间，也不会放⼤；
所有项⽬的flex-grow为1：等分剩余空间（⾃动放⼤占位）；
flex-grow为n的项⽬，占据的空间（放⼤的⽐例）是flex-grow为1的n倍。
flex-shrink：定义项⽬的缩⼩⽐例；
默认为1，即 如果空间不⾜，该项⽬将缩⼩；
所有项⽬的flex-shrink为1：当空间不⾜时，缩⼩的⽐例相同；
flex-shrink为0：空间不⾜时，该项⽬不会缩⼩；
flex-shrink为n的项⽬，空间不⾜时缩⼩的⽐例是flex-shrink为1的n倍。
flex-basis： 定义在分配多余空间之前，项⽬占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，默认值为auto，即 项⽬原本⼤⼩；
html的flex布局设置后项⽬将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放⼤会缩⼩）
flex为none：0 0 auto （不放⼤也不缩⼩）
flex为auto：1 1 auto （放⼤且缩⼩）
flex：1 即为flex-grow：1，经常⽤作⾃适应布局，将⽗容器的display：flex，侧边栏⼤⼩固定后，将内容区flex：1，内容区则会⾃动放⼤占满剩余空间。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。