flex布局设置不换行之后，无法设置子元素宽度

display: flex;
flex-wrap: nowrap;
我通过设置元素不换行，然后子元素分别设置了50%的宽度，但是无法生效

 

原因

• 设置display:flex后，子元素在没有超过指定宽度的时候，子元素的宽度是有效的，但超过指定宽度 的话，子元素的宽度就无效了,子元素不能直接设置width: 50px；
• flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。0代表不会收缩

要通过如下方式设置：

• 1 子元素设置宽度   flex: 0 0 50px;

 

• 2 子元素使用min-width代替width
• 3 子元素设置
• flex-shrink:0

flex 参数

flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

 
链接：https://www.jianshu.com/p/e6ad2c2cb7c3