本篇文章为你整理了flex属性（css flex属性）的详细内容，包含有flex属性值 css flex属性 displayflex属性 flex属性有哪些 flex属性，希望能帮助你了解 flex属性。

　　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；

　　 flex-basis：L;

　　可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

　　到这里我已经解决我的问题啦，flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

　　以上就是flex属性（css flex属性）的详细内容，想要了解更多 flex属性的内容，请持续关注盛行IT软件开发工作室。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。