react-native 规划篇之flexbox

2024年4月12日 161次阅读 来源: 甘言川

FlexBox规划

直接浏览大神文章：阮一峰写的FlexBox规划。在react-native中道理是一样的，只不过可能有写属性在react-native中简化了。
有几个注重的点，我在刚刚开始flexbox中总结的：

容器(container)属性

  • flexDirection ，justifyContent，alignItems

    • flexDirection flex规划体式格局

    • justifyContent 主轴对齐体式格局

    • alignItems 交织轴对齐体式格局
      这里须要特别注重的就是主轴和交织轴。以下举详细示例申明：

flexDirection:'column'（默认值），垂直居中对齐：justifyContent:'center',程度居中对齐：alignItems:'center'
flexDirection:'row'，垂直居中对齐：alignItems:'center'，程度居中对齐：justifyContent:'center'

项目(item)属性

  • flex

    • 为何设置flex:1占满全部容器
      许多时刻我们常常直接写flex:1占满全部容器，那为何写flex:1,不写flex:2或许flex:3呢？起首我们要相识flex属性是比例值，假定如今有两个项目，离别设置属性flex:1,flex:2,那末第一项就占有全部容器的1/3,第二项占有全部容器2/3。这下晓得为何flex:1占满全部容器了吧，由于是1/1。所以假如容器只要一个项目那末flex:1,flex:2,flex:3都是占满全部容器，由于离别的意义是：1/1,2/2,3/3。

    • 特别注重flex:1的作用对象是主轴
      在flexDirection:'row'中设置flex:1,是程度方向上占满全部容器。在flexDirection:'column'中设置flex:1,是垂直方向上占满全部容器。

    原文作者：甘言川
    原文地址: https://segmentfault.com/a/1190000010270274
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞