multi row layout, how to set the gap combination percentage

[yznote]

If it is a multi row layout, how to set the gap combination percentage Expectation: Two columns per row, for a total of two rows Actual: Only one column

rootView.flex.direction(.row).wrap(.wrap).shrink(1).paddingHorizontal(15).gap(0).define { (flex) in
    flex.addItem().width(50%).height(25).backgroundColor(.red).shrink(1)
    flex.addItem().width(50%).height(25).backgroundColor(.green).shrink(1)
    flex.addItem().width(50%).height(25).backgroundColor(.yellow).shrink(1)
    flex.addItem().width(50%).height(25).backgroundColor(.blue).shrink(1)
}
addSubview(rootView)
rootView.backgroundColor = .gray

rootView.flex.direction(.row).wrap(.wrap).shrink(1).paddingHorizontal(15).gap(5).define { (flex) in
  flex.addItem().width(50%).height(25).backgroundColor(.red).shrink(1)
  flex.addItem().width(50%).height(25).backgroundColor(.green).shrink(1)
  flex.addItem().width(50%).height(25).backgroundColor(.yellow).shrink(1)
  flex.addItem().width(50%).height(25).backgroundColor(.blue).shrink(1)
}
addSubview(rootView)
rootView.backgroundColor = .gray

Originally posted by @yznote in https://github.com/layoutBox/FlexLayout/issues/262#issuecomment-2477880327

[yznote]

@lucdion @OhKanghoon Can you provide a good solution? Thank you

That is to say, CSS supports calc(), such as width: calc (50% -5px) May I ask if there are any related APIs in Flexlayout

[yznote]

@lucdion @OhKanghoon box ===> width：384 item【red、green、yellow、blue】 ===> width：(384-15*2-5)/2 ==174.5 item【systemOrange】===> width：177【174.5+2.5】 【red、green、yellow、blue】used for layout implementation 【systemOrange】used for comparison

complete code

rootView.flex.direction(.row).wrap(.wrap)
    .justifyContent(.start).alignItems(.center).paddingHorizontal(15)
    .rowGap(5).columnGap(5).grow(1).shrink(1).define { (flex) in
        // 实际布局的四个item
        flex.addItem().width(46%).height(25).backgroundColor(.red).grow(1)
        flex.addItem().width(46%).height(25).backgroundColor(.green).grow(1)
        flex.addItem().width(46%).height(25).backgroundColor(.yellow).grow(1)
        flex.addItem().width(46%).height(25).backgroundColor(.blue).grow(1)
        // 用于对比
        flex.addItem().width(50%).height(25).backgroundColor(.systemOrange)
    }
addSubview(rootView)
rootView.backgroundColor = .hex("#fff", 0.2)

The core is to set an approximate value for width and then use grow alignment. It looks perfect, but I'm not sure if it's really used this way.