My css is as follows

.content {
display: flex;
flex-direction: column;
gap: 100px;
}

footer {
font-size: 12px;
display: flex;
flex-direction: column;
gap: 50px;
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.

Hi,

Prince supports "column-gap" for multi-column containers but doesn't otherwise support these properties.

Mark

Hi Mark,

do you know if support for gap property will be coming in a future version?

https://www.w3.org/TR/css-align-3/#gaps

https://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.

Mark

+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.

The gap shorthand is available now!

Hi Mike!

Is there an expected release date for a full release containing the flex gap properties?

not(:first-of-type) works well enough for my needs but the code is not as nice looking

The latest builds are usable now!

Hi!

Wondering if this feature will be available in a release soon? Unfortunately, utilizing one of the Latest Builds is not possible for us.

Thank you!

We have not decided the date for the release of Prince 16 yet, sorry.