From b4cbb04c78c42504c31cb6a3355bca5d320d4f88 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 7 Nov 2024 09:59:54 -0500 Subject: [PATCH 1/3] Add more keys to flexbox --- features/flexbox.yml | 60 +++++++++--- features/flexbox.yml.dist | 190 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 237 insertions(+), 13 deletions(-) diff --git a/features/flexbox.yml b/features/flexbox.yml index dd4d7c0a98b..3e303d72e72 100644 --- a/features/flexbox.yml +++ b/features/flexbox.yml @@ -6,28 +6,62 @@ caniuse: flexbox status: compute_from: css.properties.display.flex compat_features: + - css.properties.align-content + - css.properties.align-content.flex_context + - css.properties.align-content.flex_context.baseline + - css.properties.align-content.flex_context.first_baseline + - css.properties.align-content.flex_context.last_baseline + - css.properties.align-content.flex_context.safe_unsafe + - css.properties.align-content.flex_context.space-evenly + - css.properties.align-content.flex_context.start_end + - css.properties.align-content.flex_context.stretch + - css.properties.align-items + - css.properties.align-items.flex_context + - css.properties.align-items.flex_context.baseline + - css.properties.align-items.flex_context.first_baseline + - css.properties.align-items.flex_context.last_baseline + - css.properties.align-items.flex_context.safe_unsafe + - css.properties.align-items.flex_context.start_end + - css.properties.align-self + - css.properties.align-self.flex_context + - css.properties.align-self.flex_context.baseline + - css.properties.align-self.flex_context.first_baseline + - css.properties.align-self.flex_context.last_baseline + - css.properties.align-self.flex_context.safe_unsafe + - css.properties.align-self.flex_context.start_end + - css.properties.align-self.flex_context.stretch - css.properties.display.flex - css.properties.display.inline-flex - css.properties.flex - - css.properties.flex-direction - - css.properties.flex-grow - - css.properties.flex-shrink - - css.properties.order - css.properties.flex-basis - css.properties.flex-basis.auto - - css.properties.align-content.flex_context + - css.properties.flex-basis.content + - css.properties.flex-basis.fit-content + - css.properties.flex-basis.max-content + - css.properties.flex-basis.min-content + - css.properties.flex-direction + - css.properties.flex-direction.column + - css.properties.flex-direction.column-reverse + - css.properties.flex-direction.row + - css.properties.flex-direction.row-reverse - css.properties.flex-flow + - css.properties.flex-grow + - css.properties.flex-shrink - css.properties.flex-wrap - - css.properties.align-self.flex_context - - css.properties.align-items.flex_context + - css.properties.flex-wrap.nowrap + - css.properties.flex-wrap.wrap + - css.properties.flex-wrap.wrap-reverse + - css.properties.flex.none + - css.properties.justify-content - css.properties.justify-content.flex_context - - css.properties.justify-items.flex_context - - css.properties.align-content.flex_context.stretch - - css.properties.align-self.flex_context.stretch + - css.properties.justify-content.flex_context.left_right + - css.properties.justify-content.flex_context.safe_unsafe + - css.properties.justify-content.flex_context.space-evenly + - css.properties.justify-content.flex_context.start_end - css.properties.justify-content.flex_context.stretch + - css.properties.justify-items.flex_context + - css.properties.order - css.properties.place-content.flex_context - css.properties.place-items.flex_context - css.properties.place-self.flex_context - - css.properties.align-self.flex_context.baseline - - css.properties.align-items.flex_context.baseline - - css.properties.position.absolutely_positioned_flex_children + - css.properties.position.absolutely_positioned_flex_children \ No newline at end of file diff --git a/features/flexbox.yml.dist b/features/flexbox.yml.dist index 3e96c74edec..57d25f25613 100644 --- a/features/flexbox.yml.dist +++ b/features/flexbox.yml.dist @@ -26,12 +26,15 @@ compat_features: # firefox_android: "20" # safari: "9" # safari_ios: "9" + - css.properties.align-items + - css.properties.align-self - css.properties.display.flex - css.properties.display.inline-flex - css.properties.flex - css.properties.flex-direction - css.properties.flex-grow - css.properties.flex-shrink + - css.properties.justify-content - css.properties.order # baseline: high @@ -59,9 +62,13 @@ compat_features: # firefox_android: "28" # safari: "9" # safari_ios: "9" + - css.properties.align-content - css.properties.align-content.flex_context - css.properties.flex-flow - css.properties.flex-wrap + - css.properties.flex-wrap.nowrap + - css.properties.flex-wrap.wrap + - css.properties.flex-wrap.wrap-reverse # baseline: high # baseline_low_date: 2015-09-30 @@ -146,6 +153,20 @@ compat_features: - css.properties.place-items.flex_context - css.properties.place-self.flex_context + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "60" + # chrome_android: "60" + # edge: "79" + # firefox: "52" + # firefox_android: "52" + # safari: "11" + # safari_ios: "11" + - css.properties.align-content.flex_context.space-evenly + - css.properties.justify-content.flex_context.space-evenly + # baseline: high # baseline_low_date: ≤2020-01-15 # baseline_high_date: ≤2022-07-15 @@ -171,3 +192,172 @@ compat_features: # safari: "9" # safari_ios: "9" - css.properties.align-items.flex_context.baseline + + # baseline: high + # baseline_low_date: ≤2020-01-15 + # baseline_high_date: ≤2022-07-15 + # support: + # chrome: "57" + # chrome_android: "57" + # edge: ≤79 + # firefox: "45" + # firefox_android: "45" + # safari: "9" + # safari_ios: "9" + - css.properties.align-content.flex_context.baseline + + # baseline: high + # baseline_low_date: ≤2020-01-15 + # baseline_high_date: ≤2022-07-15 + # support: + # chrome: "59" + # chrome_android: "59" + # edge: ≤79 + # firefox: "52" + # firefox_android: "52" + # safari: "11" + # safari_ios: "11" + - css.properties.align-content.flex_context.first_baseline + - css.properties.align-items.flex_context.first_baseline + - css.properties.align-self.flex_context.first_baseline + + # baseline: high + # baseline_low_date: 2020-07-28 + # baseline_high_date: 2023-01-28 + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "12" + # firefox: ≤72 + # firefox_android: "79" + # safari: "9" + # safari_ios: "9" + - css.properties.flex-direction.column + - css.properties.flex-direction.row + - css.properties.flex.none + + # baseline: high + # baseline_low_date: 2020-09-22 + # baseline_high_date: 2023-03-22 + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "12" + # firefox: "81" + # firefox_android: "81" + # safari: "9" + # safari_ios: "9" + - css.properties.flex-direction.column-reverse + - css.properties.flex-direction.row-reverse + + # baseline: high + # baseline_low_date: 2021-09-02 + # baseline_high_date: 2024-03-02 + # support: + # chrome: "93" + # chrome_android: "93" + # edge: "93" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.justify-content.flex_context.left_right + + # baseline: high + # baseline_low_date: 2022-03-14 + # baseline_high_date: 2024-09-14 + # support: + # chrome: "93" + # chrome_android: "93" + # edge: "93" + # firefox: "45" + # firefox_android: "45" + # safari: "15.4" + # safari_ios: "15.4" + - css.properties.align-items.flex_context.start_end + - css.properties.align-self.flex_context.start_end + - css.properties.justify-content.flex_context.start_end + + # baseline: high + # baseline_low_date: 2022-03-14 + # baseline_high_date: 2024-09-14 + # support: + # chrome: "94" + # chrome_android: "94" + # edge: "94" + # firefox: "61" + # firefox_android: "61" + # safari: "15.4" + # safari_ios: "15.4" + - css.properties.flex-basis.content + + # baseline: low + # baseline_low_date: 2022-07-20 + # support: + # chrome: "93" + # chrome_android: "93" + # edge: "93" + # firefox: "45" + # firefox_android: "45" + # safari: "15.6" + # safari_ios: "15.6" + - css.properties.align-content.flex_context.start_end + + # baseline: low + # baseline_low_date: 2022-09-12 + # support: + # chrome: "94" + # chrome_android: "94" + # edge: "94" + # firefox: "66" + # firefox_android: "66" + # safari: "16" + # safari_ios: "16" + - css.properties.flex-basis.max-content + - css.properties.flex-basis.min-content + + # baseline: low + # baseline_low_date: 2022-09-12 + # support: + # chrome: "94" + # chrome_android: "94" + # edge: "94" + # firefox: "94" + # firefox_android: "94" + # safari: "16" + # safari_ios: "16" + - css.properties.flex-basis.fit-content + + # baseline: low + # baseline_low_date: 2022-12-13 + # support: + # chrome: "108" + # chrome_android: "108" + # edge: "108" + # firefox: "52" + # firefox_android: "52" + # safari: "16.2" + # safari_ios: "16.2" + - css.properties.align-items.flex_context.last_baseline + - css.properties.align-self.flex_context.last_baseline + + # baseline: low + # baseline_low_date: 2024-07-29 + # support: + # chrome: "115" + # chrome_android: "115" + # edge: "115" + # firefox: "63" + # firefox_android: "63" + # safari: "17.6" + # safari_ios: "17.6" + - css.properties.align-content.flex_context.safe_unsafe + - css.properties.align-items.flex_context.safe_unsafe + - css.properties.align-self.flex_context.safe_unsafe + - css.properties.justify-content.flex_context.safe_unsafe + + # baseline: false + # support: + # firefox: "52" + # firefox_android: "52" + - css.properties.align-content.flex_context.last_baseline From 9b4a3d0841eea01db6596c5cc3d8279d282ae80e Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 7 Nov 2024 10:01:05 -0500 Subject: [PATCH 2/3] Format --- features/flexbox.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/flexbox.yml b/features/flexbox.yml index 3e303d72e72..a8e4320914c 100644 --- a/features/flexbox.yml +++ b/features/flexbox.yml @@ -64,4 +64,4 @@ compat_features: - css.properties.place-content.flex_context - css.properties.place-items.flex_context - css.properties.place-self.flex_context - - css.properties.position.absolutely_positioned_flex_children \ No newline at end of file + - css.properties.position.absolutely_positioned_flex_children From ceff44bece2ea80e45454a5d87da6402741ce8ff Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 7 Nov 2024 10:23:56 -0500 Subject: [PATCH 3/3] Add justify-items --- features/flexbox.yml | 1 + features/flexbox.yml.dist | 1 + 2 files changed, 2 insertions(+) diff --git a/features/flexbox.yml b/features/flexbox.yml index a8e4320914c..b937a75ff51 100644 --- a/features/flexbox.yml +++ b/features/flexbox.yml @@ -59,6 +59,7 @@ compat_features: - css.properties.justify-content.flex_context.space-evenly - css.properties.justify-content.flex_context.start_end - css.properties.justify-content.flex_context.stretch + - css.properties.justify-items - css.properties.justify-items.flex_context - css.properties.order - css.properties.place-content.flex_context diff --git a/features/flexbox.yml.dist b/features/flexbox.yml.dist index 57d25f25613..d64d0096612 100644 --- a/features/flexbox.yml.dist +++ b/features/flexbox.yml.dist @@ -96,6 +96,7 @@ compat_features: # safari_ios: "9" - css.properties.align-items.flex_context - css.properties.justify-content.flex_context + - css.properties.justify-items - css.properties.justify-items.flex_context # baseline: high