My css is as follows
border: 1px solid blue;
It seems display flex with gap doesn't work as it works in the browser.
row-gap and col-gap both don't work as well.
Prince supports "column-gap" for multi-column containers but doesn't otherwise support these properties.
do you know if support for gap property will be coming in a future version?https://www.w3.org/TR/css-align-3/#gapshttps://caniuse.com/flexbox-gap
It's available in all modern browsers for a few years now, been part of spec for a while. Makes layout really easy.
We will add this to the roadmap
. In the meantime, for the example above you can often achieve the same effect (with a little inconvenience) by putting a top margin on all but the first child of the flex containers in question.
+1 for this feature.
Thanks for adding to the roadmap. My team has been using Figma to design templates, then exporting them using AnimaApp, filling them with Jinja, and then creating PDFs with Prince. The Figma auto-layout feature heavily uses the flexbox/gap property and so lots of tweaks are required post-export.
Just another +1. Such a useful property. Thanks!
Try DocRaptor - PrinceXML web service and official PrinceXML partner
The latest build
now supports the column-gap and row-gap properties for flex containers, and we will support the "gap" shorthand property in the next build.