flex属性-flex：1到底是什么
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，即项⽬原本⼤⼩；
设置后项⽬将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放⼤会缩⼩）
flex为none：0 0 auto  （不放⼤也不缩⼩）
flex为auto：1 1 auto  （放⼤且缩⼩）
flex为⼀个⾮负数字n：该数字为flex-grow的值，
flex：n；=  flex-grow：n；
flex-shrink：1；
flex-basis：0%；
flex为两个⾮负数字n1，n2：分别为flex-grow和flex-shrink的值，
flex：n1 n2; = flex-grow：n1；
flex-shrink：n2；
flex-basis：0%；
flex为⼀个长度或百分⽐L：视为flex-basis的值，
flex: L; =  flex-grow：1；
flex-shrink：1；
flex-basis：L；
flex为⼀个⾮负数字n和⼀个长度或百分⽐L：分别为flex-grow和flex-basis的值，
flex：n L；= flex-grow：n；
flex-shrink：1；
html的flex布局flex-basis：L;
可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。
到这⾥我已经解决我的问题啦，flex：1即为flex-grow：1，经常⽤作⾃适应布局，将⽗容器的display：flex，侧边栏⼤⼩固定后，将内容区flex：1，内容区则会⾃动放⼤占满剩余空间。

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