解决flex布局导致子元素的宽度无效的问题

常常我们布局会使用到flex，但布局中存在一些问题，比如无法设置宽度

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

原因

• 设置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" 或任何其他长度单位的数字。