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