Forum Bugs

Support for display:flex with gap: <size>

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

markbrown
Hi,

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

Mark
nojvek
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.

markbrown
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
jsh2134
+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.
jamespaden
Just another +1. Such a useful property. Thanks!

Try DocRaptor - PrinceXML web service and official PrinceXML partner

mikeday
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.
mikeday
The gap shorthand is available now! :)
Ryley
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 :'(
mikeday
The latest builds are usable now!