常常我们布局会使用到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" 或任何其他长度单位的数字。
网友评论