mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 21:07:34 +00:00
LibWeb: Honor column-gap and row-gap CSS properties in flex layout
This isn't actually part of CSS-FLEXBOX-1, but all major engines honor these properties in flex layout, and it's widely used on the web. There's a bug open against the flexbox spec where fantasai says the algorithm will be updated in CSS-FLEXBOX-2: https://github.com/w3c/csswg-drafts/issues/2336 I've added comments to all the places where we adjust calculations for gaps with "CSS-FLEXBOX-2" so we can find them easily. When that spec becomes available, we can add proper spec links.
This commit is contained in:
parent
7dd3c4a79c
commit
47c21cc349
4 changed files with 66 additions and 1 deletions
|
@ -0,0 +1,18 @@
|
|||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
font: 16px SerenitySans;
|
||||
}
|
||||
.flexbox {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 40px;
|
||||
width: 100px;
|
||||
}
|
||||
.flexbox > div {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class=flexbox><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
Loading…
Add table
Add a link
Reference in a new issue