React Native是通过 yoga 作为跨平台的布局引擎(layout engine)， yoga 是Flexbox的一种在原生端的实现，所以RN的布局只能使用flex布局，而且在原生的实现没有在浏览器端的实现度那么高，不是所有语法都支持，并且有些还与浏览器端有差异。
官方文档中介绍 flex 时说：
- 当flex为正值
flex: <positive number>
equates to
flexGrow: <positive number>
flexShrink: 1
flexBasis: 0
When flex is 0, the component is sized according to width and height and it is inflexible.
- 当flex为 0 时，组件尺寸由width和height决定，此时不再具有弹性
When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.
- 当flex为-1 时，组件尺寸一般还是由width和height决定。但是当空间不够时，组件尺寸会收缩到
minWidth和minHeight所设定的值。
flexGrow, flexShrink, and flexBasis work the same as in CSS.
- flexGrow、flexShrink、flexBasis 与
CSS上表现一致。
react-native中的flex和flexGrow、flexShrink 的区别：
见 https://blog.csdn.net/m0_37058714/article/details/80765562
display 属性：
It works similarly to display in CSS, but only support
'flex'and'none'. 'flex' is the default.
只支持flex（默认）和 none
不支持display: inline-flex
maxHeight、maxWidth、minHeight、minWidth:
它们的表现和 CSS 上的max-height、max-width、min-height、min-width类似，但是在 React Native 上只能使用逻辑像素值（数字单位）或百分比，而不能使用 em 或是任何其他单位
https://zhoon.github.io/css3/2014/08/23/flex.html
在web中
设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时子元素宽度会比实际设置的宽度小，你设置的宽度就会不生效。
解决办法，子元素上设置：
width: 120px;
flex-shrink: 0;
原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应
所以，倘若给父元素设置了flex布局后，若要其子元素的width有效果，必须给子元素设置flex-shrink为0。
网友评论