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