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.

[heoblitz]

This is an issue that can also occur in CSS flex layouts. In CSS, you can adjust for this using the calc() function, but this feature is not available in FlexLayout.

https://wiryawanadipa.com/blog/calculate-percentage-width-of-flex-items-when-using-gap/

Therefore, as you suggested, you can either calculate the percentage width directly or redefine the inner view and add margins to achieve the desired layout.

rootView.flex.direction(.row).wrap(.wrap).shrink(1).paddingHorizontal(10).define { (flex) in
  flex
    .addItem().width(50%).height(30)
    .addItem().backgroundColor(.red).margin(0, 2.5, 5).shrink(1).grow(1)
  
  flex
    .addItem().width(50%).height(30)
    .addItem().backgroundColor(.green).margin(0, 2.5, 5).shrink(1).grow(1)
  
  flex
    .addItem().width(50%).height(30)
    .addItem().backgroundColor(.yellow).margin(0, 2.5, 5).shrink(1).grow(1)
  
  flex
    .addItem().width(50%).height(30)
    .addItem().backgroundColor(.blue).margin(0, 2.5, 5).shrink(1).grow(1)
}

[heoblitz]

Feel free to leave a comment if you have any additional feedback.

[yznote]

This is an issue that can also occur in CSS flex layouts. In CSS, you can adjust for this using the calc() function, but this feature is not available in FlexLayout.

https://wiryawanadipa.com/blog/calculate-percentage-width-of-flex-items-when-using-gap/

Therefore, as you suggested, you can either calculate the percentage width directly or redefine the inner view and add margins to achieve the desired layout.

rootView.flex.direction(.row).wrap(.wrap).shrink(1).paddingHorizontal(10).define { (flex) in flex .addItem().width(50%).height(30) .addItem().backgroundColor(.red).margin(0, 2.5, 5).shrink(1).grow(1)

flex .addItem().width(50%).height(30) .addItem().backgroundColor(.green).margin(0, 2.5, 5).shrink(1).grow(1)

flex .addItem().width(50%).height(30) .addItem().backgroundColor(.yellow).margin(0, 2.5, 5).shrink(1).grow(1)

flex .addItem().width(50%).height(30) .addItem().backgroundColor(.blue).margin(0, 2.5, 5).shrink(1).grow(1) }

OK. thank you for your sharing.