CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Flexible Box Layout Module Level 1</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 60c422380, updated Thu Feb 20 19:11:22 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-flexbox-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="ac5cd82a239f8bfb12c380f4f1f968f94134ab9d" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> img { background: transparent; } code.one-line { white-space: pre; } .code-and-figure { display: table; margin: 0 auto; border-spacing: 1em; } .code-and-figure > div { display: table-cell; vertical-align: middle; } ol.layout-start { counter-reset: list 0; } ol.layout-start, ol.continue { list-style: none; } ol.layout-start > li, ol.continue > li { position: relative; counter-increment: list; } ol.layout-start > li::before, ol.continue > li::before { content: counter(list) "."; position: absolute; left: -4.5em; width: 4em; text-align: right; } .compact, .compact li { margin-top: 0; margin-bottom: 0; } /* Overview catalog example */ #overview-example { display:table; margin: 0 auto 1em; border-spacing: .5em 0; min-width: 672px; color: black; } #overview-example > .col { display: table-column; background: hsl(60,100%,90%); } #overview-example > .desc { display: table-cell; vertical-align: top; width: 300px; padding: 1em 1em 0; text-align: left; border: thick solid hsl(60,80%,50%); border-radius: 1em 1em 0 0; border-bottom: none; } #overview-example > .desc > img { margin: 0 auto; display: block; } #overview-example > .desc > h1 { background: transparent; } #overview-example > .buttons { display: table-row; } #overview-example > .buttons > div { display: table-cell; border: thick solid hsl(60,80%,50%); border-radius: 0 0 1em 1em; border-top: none; text-align: center; } #overview-example button { background-color: hsl(120,100%,40%); border: medium inset hsl(120,70%,40%); border-radius: 1em; padding: .5em; font-weight: bold; color: white; font-size: 1.6em; cursor: pointer; width: 90%; margin: 1em auto; } /* Visibility: Collapse example */ #visibility-collapse-example { display: table; width: 100%; box-shadow: 3px 3px 10px canvas; } #visibility-collapse-example > article, #visibility-collapse-example > nav { display: table-cell; } #visibility-collapse-example > article { width: 100%; background: canvas; } #visibility-collapse-example ul, #visibility-collapse-example li { list-style: none; margin: 0; padding: 0; } #visibility-collapse-example > nav > ul { background: #444; border-radius: 0.5em; padding: 0.075em; } #visibility-collapse-example li { padding: 0 0.5em; background: #ddd; color: black; border-radius: 0.40em; border: #444 solid 0.075em; white-space: nowrap; } #visibility-collapse-example li li { background: #444; color: white; margin: 0 -0.5em; border-radius: 0; } #visibility-collapse-example li li:first-child { border-radius: 0.375em 0.375em 0 0; } #visibility-collapse-example a { background: transparent; color: inherit; } #visibility-collapse-example > nav > ul > li:target, #visibility-collapse-example > nav > ul > li:hover { background: #888; color: white; } #visibility-collapse-example > nav > ul > li:not(:target):not(:hover) > ul { height: 0; overflow: hidden; } #auto-bar { overflow: hidden; padding: .25em 1em; background: #ddd; list-style: none; margin: 0; border-radius: .3em; } @media (prefers-color-scheme: dark) { #auto-bar { background: #444; } } #auto-bar > li { float: left; margin: 0; } #auto-bar > li:first-child:after, #auto-bar > li:first-child + li:after { content: " | "; white-space: pre; } #auto-bar > li > a { display: inline-block; padding: 0 .25em; border-radius: .3em; border: none; background: transparent; } #auto-bar > li > a:not(:hover):not(:focus) { text-decoration: none; } #auto-bar > li > a:hover { color: #ddd; background: #444; } #auto-bar > #login { float: right; } .cross-auto-figure > div { margin: 0 auto; width: 70px; background: #888; padding: 0 .5em; border-radius: 1em; border: 1px solid transparent; } .cross-auto-figure > div > div { border-spacing: 0; display: table; background: #ddd; color: black; text-align: center; margin: .5em auto; padding: .5em; border-radius: .5em; } .axis { color: hsl( 0,80%,40%); } .side { color: hsl(240,80%,50%); } .size { color: hsl(120,80%,30%); } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Flexible Box Layout Module Level 1</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2025-02-10">10 February 2025</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-flexbox/">https://drafts.csswg.org/css-flexbox/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/" rel="prev">https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/</a> <dd><a href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181108/" rel="prev">https://www.w3.org/TR/2018/CR-css-flexbox-1-20181108/</a> <dd><a href="https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/" rel="prev">https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/</a> <dd><a href="https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/" rel="prev">https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/</a> <dd><a href="https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/" rel="prev">https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/</a> <dd><a href="https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/" rel="prev">https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/</a> <dd><a href="https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/" rel="prev">https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/</a> <dd><a href="https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/" rel="prev">https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/</a> <dd><a href="https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/" rel="prev">https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a> <dd><a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" rel="prev">https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> <dd><a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/" rel="prev">https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a> <dd><a href="https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/" rel="prev">https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a> <dd><a href="https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/" rel="prev">https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a> <dd><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" rel="prev">https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-flexbox-1">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (Microsoft) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a> (Microsoft Corporation) <dd class="editor p-author h-card vcard" data-editor-id="15393"><a class="p-name fn u-url url" href="https://dbaron.org/">L. David Baron</a> (<a class="p-org org" href="https://www.mozilla.org/">Mozilla</a>) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:enndeakin@gmail.com">Neil Deakin</a> (Mozilla Corporation) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ian@hixie.ch">Ian Hickson</a> (formerly of Opera Software) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:hyatt@apple.com">David Hyatt</a> (formerly of Netscape Corporation) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-flexbox-1/Overview.bs">GitHub Editor</a> <dt>Issues List: <dd><a href="https://drafts.csswg.org/css-flexbox-1/issues">https://drafts.csswg.org/css-flexbox-1/issues</a> <dt>Test Suite: <dd class="wpt-overview"><a href="https://wpt.fyi/results/css/css-flexbox/">https://wpt.fyi/results/css/css-flexbox/</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2025 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-flexbox” in the title, like this: “[css-flexbox] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-flexbox%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#overview">1.1 Overview</a> <li><a href="#placement">1.2 Module interactions</a> <li><a href="#values">1.3 Value Definitions</a> </ol> <li><a href="#box-model">2 Flex Layout Box Model and Terminology</a> <li><a href="#flex-containers">3 Flex Containers: the flex and inline-flex display values</a> <li> <a href="#flex-items">4 Flex Items</a> <ol class="toc"> <li><a href="#abspos-items">4.1 Absolutely-Positioned Flex Children</a> <li><a href="#item-margins">4.2 Flex Item Margins and Paddings</a> <li><a href="#painting">4.3 Flex Item Z-Ordering</a> <li><a href="#visibility-collapse">4.4 Collapsed Items</a> <li><a href="#min-size-auto">4.5 Automatic Minimum Size of Flex Items</a> </ol> <li> <a href="#flow-order">5 Ordering and Orientation</a> <ol class="toc"> <li><a href="#flex-direction-property">5.1 Flex Flow Direction: the flex-direction property</a> <li><a href="#flex-wrap-property">5.2 Flex Line Wrapping: the flex-wrap property</a> <li><a href="#flex-flow-property">5.3 Flex Direction and Wrap: the flex-flow shorthand</a> <li><a href="#order-property">5.4 Item Reordering: the order property</a> </ol> <li><a href="#flex-lines">6 Flex Lines</a> <li> <a href="#flexibility">7 Flexibility</a> <ol class="toc"> <li> <a href="#flex-property">7.1 The flex Shorthand</a> <ol class="toc"> <li><a href="#flex-common">7.1.1 Basic Values of flex</a> </ol> <li> <a href="#flex-components">7.2 Components of Flexibility</a> <ol class="toc"> <li><a href="#flex-grow-property">7.2.1 The flex-grow property</a> <li><a href="#flex-shrink-property">7.2.2 The flex-shrink property</a> <li><a href="#flex-basis-property">7.2.3 The flex-basis property</a> </ol> </ol> <li> <a href="#alignment">8 Alignment</a> <ol class="toc"> <li><a href="#auto-margins">8.1 Aligning with auto margins</a> <li><a href="#justify-content-property">8.2 Axis Alignment: the justify-content property</a> <li><a href="#align-items-property">8.3 Cross-axis Alignment: the align-items and align-self properties</a> <li><a href="#align-content-property">8.4 Packing Flex Lines: the align-content property</a> <li><a href="#flex-baselines">8.5 Flex Container Baselines</a> </ol> <li> <a href="#layout-algorithm">9 Flex Layout Algorithm</a> <ol class="toc"> <li><a href="#box-manip">9.1 Initial Setup</a> <li><a href="#line-sizing">9.2 Line Length Determination</a> <li><a href="#main-sizing">9.3 Main Size Determination</a> <li><a href="#cross-sizing">9.4 Cross Size Determination</a> <li><a href="#main-alignment">9.5 Main-Axis Alignment</a> <li><a href="#cross-alignment">9.6 Cross-Axis Alignment</a> <li><a href="#resolve-flexible-lengths">9.7 Resolving Flexible Lengths</a> <li><a href="#definite-sizes">9.8 Definite and Indefinite Sizes</a> <li> <a href="#intrinsic-sizes">9.9 Intrinsic Sizes</a> <ol class="toc"> <li> <a href="#intrinsic-main-sizes">9.9.1 Flex Container Intrinsic Main Sizes</a> <ol class="toc"> <li><a href="#intrinsic-main-sizes-ideal">9.9.1.1 Ideal Algorithm</a> <li><a href="#intrinsic-main-sizes-compat">9.9.1.2 Web-compatible Intrinsic Sizing Algorithm</a> <li><a href="#intrinsic-main-sizes-multiline">9.9.1.3 Multi-line Min-content Algorithm</a> </ol> <li><a href="#intrinsic-cross-sizes">9.9.2 Flex Container Intrinsic Cross Sizes</a> <li><a href="#intrinsic-item-contributions">9.9.3 Flex Item Intrinsic Size Contributions</a> </ol> </ol> <li> <a href="#pagination">10 Fragmenting Flex Layout</a> <ol class="toc"> <li><a href="#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a> </ol> <li><a href="#axis-mapping"> Appendix A: Axis Mappings</a> <li><a href="#webkit-aliases"> Appendix B: <code>-webkit-</code> Legacy Properties</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-20181119"> Changes since the 19 November 2018 CR</a> <li><a href="#changes-20171016"> Changes since the 16 October 2017 CR</a> <li> <a href="#changes-20160526"> Changes since the 26 May 2016 CR</a> <ol class="toc"> <li><a href="#change-201605-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#change-201605-clarify"> Clarifications</a> </ol> <li> <a href="#changes-20160301"> Changes since the 1 March 2016 CR</a> <ol class="toc"> <li><a href="#change-201603-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#change-201603-clarify"> Clarifications</a> </ol> <li> <a href="#changes-201505"> Changes since the 14 May 2015 LCWD</a> <ol class="toc"> <li><a href="#change-201505-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#change-201505-clarify"> Clarifications</a> </ol> <li> <a href="#changes-201409"> Changes since the 25 September 2014 LCWD</a> <ol class="toc"> <li><a href="#change-201409-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#change-201409-clarify"> Clarifications</a> </ol> <li> <a href="#changes-201403"> Changes since the 25 March 2014 LCWD</a> <ol class="toc"> <li><a href="#change-201403-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#change-201403-clarify"> Clarifications</a> </ol> <li> <a href="#changes-2012"> Changes since the 18 September 2012 Candidate Recommendation</a> <ol class="toc"> <li><a href="#changes-2014-substantive"> Substantive Changes and Bugfixes</a> <li><a href="#changes-2014-clarify"> Clarifications</a> </ol> </ol> <li><a href="#priv-sec">11 Privacy and Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This section is not normative. CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: <ul> <li data-md> block layout, designed for laying out documents <li data-md> inline layout, designed for laying out text <li data-md> table layout, designed for laying out 2D data in a tabular format <li data-md> positioned layout, designed for very explicit positioning without much regard for other elements in the document </ul> This module introduces a new layout mode, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="flex-layout">flex layout</dfn>, which is designed for laying out more complex applications and webpages. <h3 class="heading settled" data-level="1.1" id="overview">1.1. Overview<a class="self-link" href="#overview"></a></h3> This section is not normative. Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as <a href="https://www.w3.org/TR/CSS2/visuren.html#floats">floats</a> and <a href="https://www.w3.org/TR/css3-multicol/">columns</a>. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container: <ul> <li data-md> can be laid out in any <a href="#flex-direction-property">flow direction</a> (leftwards, rightwards, downwards, or even upwards!) <li data-md> can have their display order <a class="css" data-link-type="value" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse">reversed</a> or 'order|rearranged' at the style layer (i.e., visual order can be independent of source and speech order) <li data-md> can be laid out linearly along a single (<a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis">main</a>) axis or <a href="#flex-wrap-property">wrapped</a> into multiple lines along a secondary (<a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis">cross</a>) axis <li data-md> can <a href="#flexibility">“flex” their sizes</a> to respond to the available space <li data-md> can be <a href="#alignment">aligned</a> with respect to their container or each other on the secondary (<a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①">cross</a>) <li data-md> can be dynamically <a href="#visibility-collapse">collapsed</a> or uncollapsed along the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①">main axis</a> while preserving the container’s <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size">cross size</a> </ul> <div class="example" id="example-843b1efd"> <a class="self-link" href="#example-843b1efd"></a> Here’s an example of a catalog where each item has a title, a photo, a description, and a purchase button. The designer’s intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons are aligned at the bottom, regardless of the length of the item’s description. Flex layout makes many aspects of this design easy: <ul> <li data-md> The catalog uses flex layout to lay out rows of items horizontally, and to ensure that items within a row are all equal-height. Each entry is then itself a column flex container, laying out its contents vertically. <li data-md> Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order">order</a> is used to pull the image up from later in the content to the top, and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self">align-self</a> is used to center it horizontally. <li data-md> An <a href="#auto-margins">auto margin</a> above the purchase button forces it to the bottom within each entry box, regardless of the height of that item’s description. </ul> <pre class="lang-css highlight">#deals <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- c>/* Flex layout so items </c-><a data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①"><c- c>have equal height</c-></a><c- c> */</c-> flex-flow: row wrap<c- p>;</c-> <c- c>/* </c-><a href="#flex-flow-property"><c- c>Allow items to wrap into multiple lines</c-></a><c- c> */</c-> <c- p>}</c-> .sale-item <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- c>/* Lay out each item using flex layout */</c-> flex-flow: column<c- p>;</c-> <c- c>/* </c-><a href="#flex-flow-property"><c- c>Lay out item’s contents vertically</c-></a><c- c> */</c-> <c- p>}</c-> .sale-item > img <c- p>{</c-> <c- k>order</c-><c- p>:</c-> <c- m>-1</c-><c- p>;</c-> <c- c>/* Shift image before other content (in visual order) */</c-> align-self: center<c- p>;</c-> <c- c>/* </c-><a data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②"><c- c>Center the image cross-wise (horizontally)</c-></a><c- c> */</c-> <c- p>}</c-> .sale-item > button <c- p>{</c-> <c- k>margin-top</c-><c- p>:</c-> auto<c- p>;</c-> <c- c>/* </c-><a href="#auto-margins"><c- c>Auto top margin pushes button to bottom</c-></a><c- c> */</c-> <c- p>}</c-> </pre> <pre class="lang-markup highlight"><c- p><</c-><c- f>section</c-> <c- e>id</c-><c- o>=</c-><c- s>"deals"</c-><c- p>></c-> <c- p><</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>"sale-item"</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->Computer Starter Kit<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->This is the best computer money can buy, if you don’t have much money. <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->Computer <c- p><</c-><c- f>li</c-><c- p>></c->Monitor <c- p><</c-><c- f>li</c-><c- p>></c->Keyboard <c- p><</c-><c- f>li</c-><c- p>></c->Mouse <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"images/computer.jpg"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"You get: a white computer with matching peripherals."</c-><c- p>></c-> <c- p><</c-><c- f>button</c-><c- p>></c->BUY NOW<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-> <c- p><</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>"sale-item"</c-><c- p>></c-> … <c- p></</c-><c- f>section</c-><c- p>></c-> … <c- p></</c-><c- f>section</c-><c- p>></c-> </pre> <figure> <div id="overview-example"> <div class="col"></div> <div class="col"></div> <div class="desc"> <img alt="You get: a white computer with matching keyboard and monitor." height="188" src="images/computer.jpg" width="250"> <h1 id="quiet-pubrules-1" style="font-size: 1.4em;">Computer Starter Kit</h1> This is the best computer money can buy, if you don’t have much money. <ul> <li>Computer <li>Monitor <li>Keyboard <li>Mouse </ul> </div> <div class="desc"> <img alt="You get: beautiful ASCII art." height="188" src="images/printer.png" width="159"> <h1 id="quiet-pubrules-2" style="font-size: 1.4em;">Printer</h1> Only capable of printing ASCII art. <ul> <li>Paper and ink not included. </ul> </div> <div class="buttons"> <div> <button>BUY NOW</button> </div> <div> <button>BUY NOW</button> </div> </div> </div> <figcaption> An example rendering of the code above. </figcaption> </figure> </div> <h3 class="heading settled" data-level="1.2" id="placement">1.2. Module interactions<a class="self-link" href="#placement"></a></h3> This module extends the definition of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display</a> property <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, adding a new block-level and new inline-level display type, and defining a new type of formatting context along with properties to control its layout. None of the properties defined in this module apply to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> pseudo-elements. The <a href="http://www.w3.org/TR/css-align/">CSS Box Alignment Module</a> extends and supersedes the definitions of the alignment properties (<a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a>, <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items">align-items</a>, <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self③">align-self</a>, <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content">align-content</a>) introduced here. <h3 class="heading settled" data-level="1.3" id="values">1.3. Value Definitions<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="box-model">2. Flex Layout Box Model and Terminology<a class="self-link" href="#box-model"></a></h2> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="flex-container">flex container</dfn> is the box generated by an element with a computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①">display</a> of <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex">flex</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex">inline-flex</a>. In-flow children of a flex container are called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flex item" id="flex-item">flex items</dfn> and are laid out using the flex layout model. Unlike block and inline layout, whose layout calculations are biased to the <a href="https://www.w3.org/TR/css3-writing-modes/#abstract-box">block and inline flow directions</a>, flex layout is biased to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flex direction" id="flex-direction">flex directions</dfn>. To make it easier to talk about flex layout, this section defines a set of flex flow–relative terms. The <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow">flex-flow</a> value and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> determine how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height). <figure> <img alt height="277" src="images/flex-direction-terms.svg" width="665"> <figcaption> An illustration of the various directions and sizing terms as applied to a <a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row">row</a> flex container. </figcaption> </figure> <dl id="main"> <dt class="axis">main axis <dt class="axis">main dimension <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="main axis|main-axis" id="main-axis">main axis</dfn> of a flex container is the primary axis along which <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item">flex items</a> are laid out. It extends in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="main-dimension">main dimension</dfn>. <dt class="side">main-start <dt class="side">main-end <dd> The <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①">flex items</a> are placed within the container starting on the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="main-start">main-start</dfn> side and going toward the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="main-end">main-end</dfn> side. <dt class="size">main size <dt class="size">main size property <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="main-size">main size</dfn> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container">flex container</a> or <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②">flex item</a> refers to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#width" id="ref-for-width">width</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#height" id="ref-for-height">height</a>, whichever is in the <a data-link-type="dfn" href="#main-dimension" id="ref-for-main-dimension">main dimension</a>. Its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="main-size-property">main size property</dfn> is either its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> property, whichever is in the main dimension. Likewise, its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="min main size property" id="min-main-size-property">min</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="max main size property" id="max-main-size-property">max main size properties</dfn> are its <a class="property css" data-link-type="property">min-width</a>/max-width or min-height/max-height properties, whichever are in the main dimension, and determine its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="min main size" id="min-main-size">min</dfn>/<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="max-main-size">max main size</dfn>. In <a data-link-type="dfn" href="#flex-layout" id="ref-for-flex-layout">flex layout</a>, the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size">main size</a> is controlled by the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex">flex</a> property rather than directly by the <a data-link-type="dfn" href="#main-size-property" id="ref-for-main-size-property">main size property</a>. Note: This means any references to a flex item’s used size in the <a data-link-type="dfn" href="#main-dimension" id="ref-for-main-dimension③">main dimension</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#width" id="ref-for-width①">width</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#height" id="ref-for-height①">height</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline size</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size">block size</a>) refers to its post-flexing <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①">main size</a>. </dl> <dl id="cross"> <dt class="axis">cross axis <dt class="axis">cross dimension <dd> The axis perpendicular to the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②">main axis</a> is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="cross axis|cross-axis" id="cross-axis">cross axis</dfn>. It extends in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cross-dimension">cross dimension</dfn>. <dt class="side">cross-start <dt class="side">cross-end <dd> <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line">Flex lines</a> are filled with items and placed into the container starting on the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cross-start">cross-start</dfn> side of the flex container and going toward the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cross-end">cross-end</dfn> side. <dt class="size">cross size <dt class="size">cross size property <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cross-size">cross size</dfn> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①">flex container</a> or <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③">flex item</a> refers to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#width" id="ref-for-width②">width</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#height" id="ref-for-height②">height</a>, whichever is in the <a data-link-type="dfn" href="#cross-dimension" id="ref-for-cross-dimension">cross dimension</a>. Its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cross-size-property">cross size property</dfn> is either its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①">width</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height</a> property, whichever is in the cross dimension. Likewise, its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="min cross size property" id="min-cross-size-property">min</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="max cross size property" id="max-cross-size-property">max cross size properties</dfn> are its <a class="property css" data-link-type="property">min-width</a>/max-width or min-height/max-height properties, whichever are in the cross dimension, and determine its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="min cross size" id="min-cross-size">min</dfn>/<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="max-cross-size">max cross size</dfn>. </dl> Additional sizing terminology used in this specification is defined in <a href="http://www.w3.org/TR/CSS-SIZING-3/">CSS Intrinsic and Extrinsic Sizing</a>. <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a> <h2 class="heading settled" data-level="3" id="flex-containers">3. Flex Containers: the <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex①">flex</a> and <a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex①">inline-flex</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②">display</a> values<a class="self-link" href="#flex-containers"></a></h2> <div class="informative"> <table class="def propdef partial" data-link-for-hint="display"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display③">display</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">flex <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> inline-flex </table> </div> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="display" data-dfn-type="value" data-export id="valdef-display-flex">flex</dfn> <dd> This value causes an element to generate a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②">flex container</a> box that is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> when placed in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#flow-layout" id="ref-for-flow-layout">flow layout</a>. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/display-flex-001.htm" title="css/css-flexbox/display-flex-001.htm">display-flex-001.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/display-flex-001.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/display-flex-001.htm">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="display" data-dfn-type="value" data-export id="valdef-display-inline-flex">inline-flex</dfn> <dd> This value causes an element to generate a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③">flex container</a> box that is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level" id="ref-for-inline-level">inline-level</a> when placed in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#flow-layout" id="ref-for-flow-layout①">flow layout</a>. </dl> A <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④">flex container</a> establishes a new <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="flex-formatting-context">flex formatting context</dfn> for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">exactly like block containers do</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property applies to flex containers. Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: <ul> <li data-md> <a class="property css" data-link-type="property">float</a> and clear do not create floating or clearance of <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④">flex item</a>, and do not take it out-of-flow. <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> has no effect on a flex item. <li data-md> the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line①">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter①">::first-letter</a> pseudo-elements do not apply to <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦">flex containers</a>, and flex containers do not contribute a <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line">first formatted line</a> or <a data-link-type="dfn">first letter</a> to their ancestors. </ul> If an element’s specified <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display④">display</a> is <a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex②">inline-flex</a>, then its display property computes to <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex②">flex</a> in certain circumstances: the table in <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Section 9.7</a> is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column. <h2 class="heading settled" data-level="4" id="flex-items">4. Flex Items<a class="self-link" href="#flex-items"></a></h2> Loosely speaking, the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑤">flex items</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨">flex container</a> are boxes representing its in-flow contents. Each in-flow child of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪">flex container</a> becomes a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑥">flex item</a>, and each child <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#css-text-sequence" id="ref-for-css-text-sequence">text sequence</a> is wrapped in an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block container</a> flex item. However, if the entire text sequences contains only <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#white-space" id="ref-for-white-space">document white space characters</a> (i.e. characters that can be affected by the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-white-space" id="ref-for-propdef-white-space">white-space</a> property) it is instead not rendered (just as if its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#text-nodes" id="ref-for-text-nodes">text nodes</a> were display:none). <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-001.html" title="css/css-flexbox/anonymous-flex-item-001.html">anonymous-flex-item-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-002.html" title="css/css-flexbox/anonymous-flex-item-002.html">anonymous-flex-item-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-003.html" title="css/css-flexbox/anonymous-flex-item-003.html">anonymous-flex-item-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-004.html" title="css/css-flexbox/anonymous-flex-item-004.html">anonymous-flex-item-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-005.html" title="css/css-flexbox/anonymous-flex-item-005.html">anonymous-flex-item-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-flex-item-006.html" title="css/css-flexbox/anonymous-flex-item-006.html">anonymous-flex-item-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-flex-item-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-flex-item-006.html">(source)</a> </ul> </details> <div class="example" id="example-cbe28400"> <a class="self-link" href="#example-cbe28400"></a> Examples of flex items: <pre class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:flex"</c-><c- p>></c-> <c- d></c-> <c- p><</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"item1"</c-><c- p>></c->block<c- p></</c-><c- f>div</c-><c- p>></c-> <c- d></c-> <c- p><</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"item2"</c-> <c- e>style</c-><c- o>=</c-><c- s>"float: left;"</c-><c- p>></c->float<c- p></</c-><c- f>div</c-><c- p>></c-> <c- d></c-> anonymous item 3 <c- d></c-> <c- p><</c-><c- f>span</c-><c- p>></c-> item 4 <c- d></c-> <c- p><</c-><c- f>q</c-> <c- e>style</c-><c- o>=</c-><c- s>"display: block"</c-> <c- e>id</c-><c- o>=</c-><c- s>not-an-item</c-><c- p>></c->item 4<c- p></</c-><c- f>q</c-><c- p>></c-> item 4 <c- p></</c-><c- f>span</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> <figure> <figcaption>Flex items determined from above code block</figcaption> <a href="examples/flex-item-determination.html"> <object data="images/flex-item-determination.png" type="image/png"> <ol> <li>Flex item containing <samp>block</samp>. </li><li>Flex item containing <samp>float</samp>. </li><li>(Anonymous, unstyleable) flex item containing <samp>anonymous item 3</samp>. </li><li>Flex item containing three blocks in succession: <ul> <li>Anonymous block containing <samp>item 4</samp>. </li><li><code><q></code> element block containing <samp>item 4</samp>. </li><li>Anonymous block containing <samp>item 4</samp>. </li></ul> </li></ol> </object> </a> </figure> Note that the inter-element white space disappears: it does not become its own flex item, even though the inter-element text does get wrapped in an anonymous flex item. Note also that the anonymous item’s box is unstyleable, since there is no element to assign style rules to. Its contents will however inherit styles (such as font settings) from the flex container. </div> A <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧">flex item</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context">establishes an independent formatting context</a> for its contents. However, flex items themselves are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="flex-level">flex-level</dfn> boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context. <hr> Note: Authors reading this spec may want to <a href="#item-margins">skip past the following box-generation and static position details</a>. If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display⑥">display</a> value of an element’s nearest ancestor element (skipping display:contents ancestors) is <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex④">flex</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex④">inline-flex</a>, the element’s own display value is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#blockify" id="ref-for-blockify">blockified</a>. (See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1§9.7</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> and <a href="https://drafts.csswg.org/css-display-3/#transformations"><cite>CSS Display 3</cite> § 2.7 Automatic Box Type Transformations</a> for details on this type of display value conversion.) Note: Blockification still occurs even when the <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex⑤">flex</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex⑤">inline-flex</a> element does not end up generating a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①">flex container</a> box, e.g. when it is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element">replaced</a> or in a <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display⑨">display: none</a> subtree. Note: Some values of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①⓪">display</a> normally trigger the creation of anonymous boxes around the original box. If such a box is a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨">flex item</a>, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table. In the case of flex items with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①③">display: table</a>, the table wrapper box becomes the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②">flex item</a>, so the <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self④">align-self</a> property applies to it. The contents of any caption boxes contribute to the calculation of the table wrapper box’s min-content and max-content sizes. However, like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height②">height</a>, the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex①">flex</a> longhands apply to the table box as follows: the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area, and the table box were the flex item. <h3 class="heading settled" data-level="4.1" id="abspos-items">4.1. Absolutely-Positioned Flex Children<a class="self-link" href="#abspos-items"></a></h3> As it is out-of-flow, an absolutely-positioned child of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①②">flex container</a> does not participate in flex layout. The <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②">cross-axis</a> edges of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-rectangle" id="ref-for-static-position-rectangle">static-position rectangle</a> of an absolutely-positioned child of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①③">flex container</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#content-edge" id="ref-for-content-edge">content edges</a> of the flex container. The <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis③">main-axis</a> edges of the static-position rectangle are where the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge">margin edges</a> of the child would be positioned if it were the sole <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤">flex item</a> in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. (For this purpose, the child’s auto margins are treated as zero.) <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html" title="css/css-flexbox/abspos/abspos-autopos-htb-ltr.html">abspos-autopos-htb-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html" title="css/css-flexbox/abspos/abspos-autopos-htb-rtl.html">abspos-autopos-htb-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html" title="css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html">abspos-autopos-vlr-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html" title="css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html">abspos-autopos-vlr-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html" title="css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html">abspos-autopos-vrl-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html" title="css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html">abspos-autopos-vrl-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html">(source)</a> </ul> </details> <div class="example" id="example-bcd8b89a"><a class="self-link" href="#example-bcd8b89a"></a> The effect of this is that if you set, for example, <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self⑤">align-self: center;</a> on an absolutely-positioned child of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⑥">flex container</a>, auto offsets on the child will center it in the flex container’s <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis③">cross axis</a>. </div> <h3 class="heading settled" data-level="4.2" id="item-margins">4.2. Flex Item Margins and Paddings<a class="self-link" href="#item-margins"></a></h3> The margins of adjacent <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥">flex items</a> do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>. Percentage margins and paddings on <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦">flex items</a>, like those on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-box" id="ref-for-block-box">block boxes</a>, are resolved against the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size①">inline size</a> of their <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a>, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①">writing modes</a>. Auto margins expand to absorb extra space in the corresponding dimension. They can be used for alignment, or to push adjacent flex items apart. See <a href="#auto-margins">Aligning with auto margins</a>. <h3 class="heading settled" data-level="4.3" id="painting">4.3. Flex Item Z-Ordering<a class="self-link" href="#painting"></a></h3> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧">Flex items</a> paint exactly the same as inline blocks <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, except that <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①">order</a>-modified document order is used in place of raw document order, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> values other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-z-index-auto" id="ref-for-valdef-z-index-auto">auto</a> create a stacking context even if <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a> (behaving exactly as if position were <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-relative" id="ref-for-valdef-position-relative">relative</a>). Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item. <h3 class="heading settled" data-level="4.4" id="visibility-collapse">4.4. Collapsed Items<a class="self-link" href="#visibility-collapse"></a></h3> Specifying visibility:collapse on a flex item causes it to become a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="collapsed" id="collapsed-flex-item">collapsed flex item</dfn>, producing an effect similar to visibility:collapse on a table-row or table-column: the <a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item">collapsed flex item</a> is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⑧">flex container</a>’s <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②">main size</a>, but is guaranteed to have no effect on its <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①">cross size</a> and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change. Though <a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item①">collapsed flex items</a> aren’t rendered, they do appear in the <a href="https://www.w3.org/TR/CSS2/intro.html#formatting-structure">formatting structure</a>. Therefore, unlike on display:none items <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items. <div class="example" id="example-ec2b5bd9"> <a class="self-link" href="#example-ec2b5bd9"></a> In the following example, a sidebar is sized to fit its content. <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility: collapse</a> is used to dynamically hide parts of a navigation sidebar without affecting its width, even though the widest item (“Architecture”) is in a collapsed section. <figure> <figcaption>Sample live rendering for example code below</figcaption> <div id="visibility-collapse-example"> <nav> <ul> <li id="nav-about"> <a href="#nav-about">About</a> <ul> <li><a href="#">History</a> <li><a href="#">Mission</a> <li><a href="#">People</a> </ul> <li id="nav-projects"> <a href="#nav-projects">Projects</a> <ul> <li><a href="#">Art</a> <li><a href="#">Architecture</a> <li><a href="#">Music</a> </ul> <li id="nav-interact"> <a href="#nav-interact">Interact</a> <ul> <li><a href="#">Blog</a> <li><a href="#">Forums</a> </ul> </ul> </nav> <article> Hover over the menu to the left: each section expands to show its sub-items. In order to keep the sidebar width (and this main area width) stable, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility①">visibility: collapse</a> is used instead of <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①④">display: none</a>. This results in a sidebar that is always wide enough for the word “Architecture”, even though it is not always visible. </article> </div> </figure> <pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->min-width: <c- m>60</c-><c- k>em</c-><c- p>)</c-> <c- p>{</c-> <c- c>/* </c-><a href="https://www.w3.org/TR/css3-mediaqueries/#width"><c- c>two column layout only when enough room</c-></a><c- c> (relative to default text size) */</c-> div <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- p>}</c-> #main <c- p>{</c-> <c- k>flex</c-><c- p>:</c-> <c- m>1</c-><c- p>;</c-> <c- c>/* </c-><a href="#flexibility"><c- c>Main takes up all remaining space</c-></a><c- c> */</c-> order: <c- m>1</c-><c- p>;</c-> <c- c>/* Place it after (to the right of) the navigation */</c-> min-width: <c- m>12</c-><c- k>em</c-><c- p>;</c-> <c- c>/* Optimize main content area sizing */</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* menu items use flex layout so that visibility:collapse will work */</c-> nav > ul > li <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- k>flex-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- p>}</c-> <c- c>/* dynamically collapse submenus when not targeted */</c-> nav > ul > li<c- nf>:not</c-><c- p>(</c->:target<c- p>)</c-><c- nf>:not</c-><c- p>(</c->:hover<c- p>)</c-> > ul <c- p>{</c-> <c- k>visibility</c-><c- p>:</c-> collapse<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-markup highlight"><c- p><</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>article</c-> <c- e>id</c-><c- o>=</c-><c- s>"main"</c-><c- p>></c-> Interesting Stuff to Read <c- p></</c-><c- f>article</c-><c- p>></c-> <c- p><</c-><c- f>nav</c-><c- p>></c-> <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-> <c- e>id</c-><c- o>=</c-><c- s>"nav-about"</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"#nav-about"</c-><c- p>></c->About<c- p></</c-><c- f>a</c-><c- p>></c-> … <c- p><</c-><c- f>li</c-> <c- e>id</c-><c- o>=</c-><c- s>"nav-projects"</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"#nav-projects"</c-><c- p>></c->Projects<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"…"</c-><c- p>></c->Art<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"…"</c-><c- p>></c->Architecture<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"…"</c-><c- p>></c->Music<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-> <c- e>id</c-><c- o>=</c-><c- s>"nav-interact"</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"#nav-interact"</c-><c- p>></c->Interact<c- p></</c-><c- f>a</c-><c- p>></c-> … <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p></</c-><c- f>nav</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>footer</c-><c- p>></c-> … </pre> </div> To compute the size of the strut, flex layout is first performed with all items uncollapsed, and then re-run with each <a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item②">collapsed flex item</a> replaced by a strut that maintains the original cross-size of the item’s original line. See the <a href="#layout-algorithm">Flex Layout Algorithm</a> for the normative definition of how visibility:collapse interacts with flex layout. Note: Using visibility:collapse on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It’s recommended that authors continue to use display:none to hide items if the items will not be dynamically collapsed and uncollapsed, as that is more efficient for the layout engine. (Since only part of the steps need to be repeated when <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility②">visibility</a> is changed, however, 'visibility: collapse' is still recommended for dynamic cases.) <h3 class="heading settled" data-level="4.5" id="min-size-auto">4.5. Automatic Minimum Size of Flex Items<a class="self-link" href="#min-size-auto"></a></h3> Note: The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> keyword, representing an <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size">automatic minimum size</a>, is the new initial value of the <a class="property css" data-link-type="property">min-width</a> and min-height properties. The keyword was previously defined in this specification, but is now defined in the <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">CSS Sizing</a> module. To provide a more reasonable default <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width">minimum size</a> for <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨">flex items</a>, the used value of a <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis④">main axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size①">automatic minimum size</a> on a flex item whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> value is <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#non-scrollable-overflow-value" id="ref-for-non-scrollable-overflow-value">non-scrollable</a> is its <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size">content-based minimum size</a>; for <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll containers</a> the automatic minimum size is zero, as usual. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="content-based-minimum-size">content-based minimum size</dfn> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②①">flex item</a> is the smaller of its <a data-link-type="dfn" href="#specified-size-suggestion" id="ref-for-specified-size-suggestion">specified size suggestion</a> and its <a data-link-type="dfn" href="#content-size-suggestion" id="ref-for-content-size-suggestion">content size suggestion</a> if its specified size suggestion exists; otherwise, the smaller of its <a data-link-type="dfn" href="#transferred-size-suggestion" id="ref-for-transferred-size-suggestion">transferred size suggestion</a> and its content size suggestion if the element is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element①">replaced</a> and its transferred size suggestion exists; otherwise its content size suggestion. In all cases, the size is clamped by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width">maximum</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③">main size</a> if it’s <a data-link-type="dfn" href="#definite" id="ref-for-definite">definite</a>. The <a data-link-type="dfn" href="#content-size-suggestion" id="ref-for-content-size-suggestion③">content size suggestion</a>, <a data-link-type="dfn" href="#specified-size-suggestion" id="ref-for-specified-size-suggestion②">specified size suggestion</a>, and <a data-link-type="dfn" href="#transferred-size-suggestion" id="ref-for-transferred-size-suggestion②">transferred size suggestion</a> used in this calculation account for the relevant min/max/preferred size properties so that the <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size①">content-based minimum size</a> does not interfere with any author-provided constraints, and are defined below: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specified-size-suggestion">specified size suggestion</dfn> <dd> If the item’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size">preferred</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④">main size</a> is <a data-link-type="dfn" href="#definite" id="ref-for-definite①">definite</a> and not <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-size" id="ref-for-automatic-size">automatic</a>, then the <a data-link-type="dfn" href="#specified-size-suggestion" id="ref-for-specified-size-suggestion③">specified size suggestion</a> is that size. It is otherwise undefined. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="transferred-size-suggestion">transferred size suggestion</dfn> <dd> If the item has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio">preferred aspect ratio</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size①">preferred</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size②">cross size</a> is <a data-link-type="dfn" href="#definite" id="ref-for-definite②">definite</a>, then the <a data-link-type="dfn" href="#transferred-size-suggestion" id="ref-for-transferred-size-suggestion③">transferred size suggestion</a> is that size (clamped by its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width①">minimum</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width①">maximum</a> cross sizes if they are definite), converted through the aspect ratio. It is otherwise undefined. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="content-size-suggestion">content size suggestion</dfn> <dd> The <a data-link-type="dfn" href="#content-size-suggestion" id="ref-for-content-size-suggestion④">content size suggestion</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content size</a> in the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis⑤">main axis</a>, clamped, if it has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio①">preferred aspect ratio</a>, by any <a data-link-type="dfn" href="#definite" id="ref-for-definite④">definite</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width②">minimum</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width②">maximum</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④">cross sizes</a> converted through the aspect ratio. </dl> Note: The <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size②">content-based minimum size</a> is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution" id="ref-for-intrinsic-size-contribution">intrinsic size contribution</a>, and thus the cyclic percentage provisions in <a href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"><cite>CSS Sizing 3</cite> § 5.2 Intrinsic Contributions</a> apply. For the purpose of calculating an intrinsic size of the box (e.g. the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①">min-content size</a>), a <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size③">content-based minimum size</a> causes the box’s size in that axis to become indefinite (even if e.g. its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width③">width</a> property specifies a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤">definite</a> size). Note this means that percentages calculated against this size will <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#behave-as-auto" id="ref-for-behave-as-auto">behave as auto</a>. For any purpose other than calculating intrinsic sizes, a <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size④">content-based minimum size</a> (unlike an explicit <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content">min-content</a>/etc <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width③">minimum size</a>) does not force the box’s size to become indefinite. However, if a percentage resolved against the box’s size before this minimum was applied, it must be re-resolved against the new size after it is applied. <div class="note" id="min-size-opt" role="note"> <a class="self-link" href="#min-size-opt"></a> Note that while a content-based minimum size is often appropriate, and helps prevent content from overlapping or spilling outside its container, in some cases it is not: In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as <a class="css" data-link-type="propdesc">min-width: 12em</a>. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read. Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.) </div> <h2 class="heading settled" data-level="5" id="flow-order">5. Ordering and Orientation<a class="self-link" href="#flow-order"></a></h2> The contents of a flex container can be laid out in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the <a class="property css" data-link-type="property">float</a> and clear properties. This functionality is exposed through the <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction">flex-direction</a>, <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap">flex-wrap</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②">order</a> properties. Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation. See <a href="https://drafts.csswg.org/css-display-3/#order-accessibility"><cite>CSS Display 3</cite> § 3.1 Reordering and Accessibility</a> and the <a href="#overview">Flex Layout Overview</a> for examples that use this dichotomy to improve accessibility. Authors must not use <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order③">order</a> or the *-reverse values of <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow①">flex-flow</a>/<a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction①">flex-direction</a> as a substitute for correct source ordering, as that can ruin the accessibility of the document. <h3 class="heading settled" data-level="5.1" id="flex-direction-property">5.1. Flex Flow Direction: the <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction②">flex-direction</a> property<a class="self-link" href="#flex-direction-property"></a></h3> <table class="def propdef" data-link-for-hint="flex-direction"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-direction">flex-direction</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">row <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> row-reverse | column | column-reverse <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>row <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⑨">flex containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction③">flex-direction</a> property specifies how <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②②">flex items</a> are placed in the flex container, by setting the direction of the flex container’s <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis⑥">main axis</a>. This determines the direction in which flex items are laid out. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="flex-direction" data-dfn-type="value" data-export id="valdef-flex-direction-row">row</dfn> <dd> The flex container’s <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis⑦">main axis</a> has the same orientation as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a> of the current <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②">writing mode</a>. The <a data-link-type="dfn" href="#main-start" id="ref-for-main-start">main-start</a> and <a data-link-type="dfn" href="#main-end" id="ref-for-main-end">main-end</a> directions are equivalent to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> directions, respectively, of the current writing mode. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-direction" data-dfn-type="value" data-export id="valdef-flex-direction-row-reverse">row-reverse</dfn> <dd> Same as <a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row①">row</a>, except the <a data-link-type="dfn" href="#main-start" id="ref-for-main-start①">main-start</a> and <a data-link-type="dfn" href="#main-end" id="ref-for-main-end①">main-end</a> directions are swapped. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-direction" data-dfn-type="value" data-export id="valdef-flex-direction-column">column</dfn> <dd> The flex container’s <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis⑧">main axis</a> has the same orientation as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a> of the current <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode④">writing mode</a>. The <a data-link-type="dfn" href="#main-start" id="ref-for-main-start②">main-start</a> and <a data-link-type="dfn" href="#main-end" id="ref-for-main-end②">main-end</a> directions are equivalent to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> directions, respectively, of the current writing mode. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-direction" data-dfn-type="value" data-export id="valdef-flex-direction-column-reverse">column-reverse</dfn> <dd> Same as <a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column">column</a>, except the <a data-link-type="dfn" href="#main-start" id="ref-for-main-start③">main-start</a> and <a data-link-type="dfn" href="#main-end" id="ref-for-main-end③">main-end</a> directions are swapped. </dl> Note: The reverse values do not reverse box ordering: like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> <a data-link-type="biblio" href="#biblio-css3-writing-modes" title="CSS Writing Modes Level 3">[CSS3-WRITING-MODES]</a>, they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected. Note: Depending on the value of <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①">justify-content</a>, the reverse values of <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction④">flex-direction</a> can alter the initial scroll position on <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②⓪">flex containers</a> that are also <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll containers</a>. See <a href="https://drafts.csswg.org/css-align-3/#overflow-scroll-position"><cite>CSS Box Alignment 3</cite> § 5.3 Overflow and Scroll Positions</a>. <h3 class="heading settled" data-level="5.2" id="flex-wrap-property">5.2. Flex Line Wrapping: the <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap①">flex-wrap</a> property<a class="self-link" href="#flex-wrap-property"></a></h3> <table class="def propdef" data-link-for-hint="flex-wrap"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-wrap">flex-wrap</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">nowrap <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> wrap | wrap-reverse <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>nowrap <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②①">flex containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap②">flex-wrap</a> property controls whether the flex container is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container">single-line</a> or <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container">multi-line</a>, and the direction of the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis④">cross-axis</a>, which determines the direction new lines are stacked in. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="flex-wrap" data-dfn-type="value" data-export id="valdef-flex-wrap-nowrap">nowrap</dfn> <dd> The flex container is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①">single-line</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-wrap" data-dfn-type="value" data-export id="valdef-flex-wrap-wrap">wrap</dfn> <dd> The flex container is <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①">multi-line</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-wrap" data-dfn-type="value" data-export id="valdef-flex-wrap-wrap-reverse">wrap-reverse</dfn> <dd> Same as <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap">wrap</a>. </dl> For the values that are not <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse">wrap-reverse</a>, the <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start">cross-start</a> direction is equivalent to either the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start①">inline-start</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start①">block-start</a> direction of the current <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑥">writing mode</a> (whichever is in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis⑤">cross axis</a>) and the <a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end">cross-end</a> direction is the opposite direction of cross-start. When <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap③">flex-wrap</a> is wrap-reverse, the cross-start and cross-end directions are swapped. Note: Depending on the value of <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①">align-content</a>, the <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse②">wrap-reverse</a> value of <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap④">flex-wrap</a> can alter the initial scroll position on <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②②">flex containers</a> that are also <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container②">scroll containers</a>. See <a href="https://drafts.csswg.org/css-align-3/#overflow-scroll-position"><cite>CSS Box Alignment 3</cite> § 5.3 Overflow and Scroll Positions</a>. <h3 class="heading settled" data-level="5.3" id="flex-flow-property">5.3. Flex Direction and Wrap: the <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow②">flex-flow</a> shorthand<a class="self-link" href="#flex-flow-property"></a></h3> <table class="def propdef" data-link-for-hint="flex-flow"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-flow">flex-flow</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction⑤"><'flex-direction'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap⑤"><'flex-wrap'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow③">flex-flow</a> property is a shorthand for setting the <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction⑥">flex-direction</a> and <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap⑥">flex-wrap</a> properties, which together define the flex container’s main and cross axes. <div class="example" id="example-c226b82c"> <a class="self-link" href="#example-c226b82c"></a> Some examples of valid flows in an English (left-to-right, horizontal writing mode) document: <table style="margin: 0 auto; vertical-align: middle; border-spacing: 2em 1em;"> <tbody> <tr> <td> <pre class="lang-css highlight">div <c- p>{</c-> <c- k>flex-flow</c-><c- p>:</c-> row<c- p>;</c-> <c- p>}</c-> <c- c>/* Initial value. Main-axis is inline, no wrapping.</c-> <c- c> (Items will either shrink to fit or overflow.) */</c-> </pre> <td><img alt height="46" src="images/flex-flow1.svg" width="205"> <tr> <td> <pre class="lang-css highlight">div <c- p>{</c-> <c- k>flex-flow</c-><c- p>:</c-> column wrap<c- p>;</c-> <c- p>}</c-> <c- c>/* Main-axis is block-direction (top to bottom)</c-> <c- c> and lines wrap in the inline direction (rightwards). */</c-> </pre> <td><img alt height="160" src="images/flex-flow2.svg" width="89"> <tr> <td> <pre class="lang-css highlight">div <c- p>{</c-> <c- k>flex-flow</c-><c- p>:</c-> row-reverse wrap-reverse<c- p>;</c-> <c- p>}</c-> <c- c>/* Main-axis is the opposite of inline direction</c-> <c- c> (right to left). New lines wrap upwards. */</c-> </pre> <td><img alt height="89" src="images/flex-flow3.svg" width="160"> </table> </div> <div class="note" role="note"> Note that the <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow④">flex-flow</a> directions are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑦">writing mode</a> sensitive. In vertical Japanese, for example, a <a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row②">row</a> flex container lays out its contents from top to bottom, as seen in this example: <table style="margin: 1em auto; text-align: center;"> <thead> <tr> <th>English <th>Japanese <tbody> <tr> <td> <pre class="lang-css highlight"><c- k>flex-flow</c-><c- p>:</c-> row wrap<c- p>;</c-> <c- k>writing-mode</c-><c- p>:</c-> horizontal-tb<c- p>;</c-></pre> <td> <pre class="lang-css highlight"><c- k>flex-flow</c-><c- p>:</c-> row wrap<c- p>;</c-> <c- k>writing-mode</c-><c- p>:</c-> vertical-rl<c- p>;</c-></pre> <tr> <td><img alt src="images/flex-flow-english.svg"> <td><img alt src="images/flex-flow-japanese.svg"> </table> </div> <h3 class="heading settled" data-level="5.4" id="order-property">5.4. Item Reordering: the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order④">order</a> property<a class="self-link" href="#order-property"></a></h3> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②③">Flex items</a> are, by default, displayed and laid out in the same order as they appear in the source document, which represents their logical ordering. This same order is used in rendering to non-visual media (such as <a href="https://www.w3.org/TR/css-speech/">speech</a>), in the default traversal order of sequential navigation modes (such as cycling through links, see e.g. <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>), and when content is represented in non-CSS UAs. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order⑤">order</a> property can be used to change flex items’ ordering, laying them out in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#order-modified-document-order" id="ref-for-order-modified-document-order">order-modified document order</a> instead, in order to make their spatial arrangement on the 2D visual canvas differ from their logical order in linear presentations such as speech and sequential navigation. See <a href="https://drafts.csswg.org/css-display-3/#order-property"><cite>CSS Display 3</cite> § 3 Display Order: the order property</a>. <a data-link-type="biblio" href="#biblio-css-display-3" title="CSS Display Module Level 3">[CSS-DISPLAY-3]</a> Note: Since visual perception is two-dimensional and non-linear, the desired box order is not always the same logical order used by non-visual media and non-CSS UAs. Authors must use <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order⑥">order</a> only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming. <div class="example" id="example-d528284a"> <a class="self-link" href="#example-d528284a"></a> Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it’s desirable that the content come first in the page’s source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order⑧">order</a> makes this trivial. For example, take the following sketch of a page’s code and desired layout: <div class="code-and-figure"> <div> <pre class="lang-markup highlight"><c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>header</c-><c- p>></c->...<c- p></</c-><c- f>header</c-><c- p>></c-> <c- p><</c-><c- f>main</c-><c- p>></c-> <c- p><</c-><c- f>article</c-><c- p>></c->...<c- p></</c-><c- f>article</c-><c- p>></c-> <c- p><</c-><c- f>nav</c-><c- p>></c->...<c- p></</c-><c- f>nav</c-><c- p>></c-> <c- p><</c-><c- f>aside</c-><c- p>></c->...<c- p></</c-><c- f>aside</c-><c- p>></c-> <c- p></</c-><c- f>main</c-><c- p>></c-> <c- p><</c-><c- f>footer</c-><c- p>></c->...<c- p></</c-><c- f>footer</c-><c- p>></c-> </pre> </div> <div><img alt="In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left." height="360" src="images/flex-order-page.svg" width="400"></div> </div> This layout can be easily achieved with flex layout: <pre class="lang-css highlight">main <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- p>}</c-> main > article <c- p>{</c-> <c- k>order</c-><c- p>:</c-> <c- m>2</c-><c- p>;</c-> <c- k>min-width</c-><c- p>:</c-> <c- m>12</c-><c- k>em</c-><c- p>;</c-> <c- k>flex</c-><c- p>:</c-><c- m>1</c-><c- p>;</c-> <c- p>}</c-> main > nav <c- p>{</c-> <c- k>order</c-><c- p>:</c-> <c- m>1</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>200</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> main > aside <c- p>{</c-> <c- k>order</c-><c- p>:</c-> <c- m>3</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>200</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> </pre> As an added bonus, the columns will all be <a class="css" data-link-type="value" href="#valdef-align-items-stretch" id="ref-for-valdef-align-items-stretch">equal-height</a> by default, and the main content will be as wide as necessary to fill the screen. Additionally, this can then be combined with media queries to switch to an all-vertical layout on narrow screens: <pre class="lang-css highlight"><c- n>@media</c-> all and <c- p>(</c->max-width: <c- m>600</c-><c- k>px</c-><c- p>)</c-> <c- p>{</c-> <c- c>/* Too narrow to support three columns */</c-> main <c- p>{</c-> <c- k>flex-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- p>}</c-> main > article<c- p>,</c-> main > nav<c- p>,</c-> main > aside <c- p>{</c-> <c- c>/* Return them to document order */</c-> order: <c- m>0</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> (Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.) </div> <h2 class="heading settled" data-level="6" id="flex-lines">6. Flex Lines<a class="self-link" href="#flex-lines"></a></h2> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②④">Flex items</a> in a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②③">flex container</a> are laid out and aligned within <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flex line" id="flex-line">flex lines</dfn>, hypothetical containers used for grouping and alignment by the layout algorithm. A flex container can be either <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container②">single-line</a> or <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②">multi-line</a>, depending on the <a class="property css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap⑦">flex-wrap</a> property: <ul> <li data-md> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="single-line" id="single-line-flex-container">single-line flex container</dfn> (i.e. one with <a class="css" data-link-type="propdesc" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap⑧">flex-wrap: nowrap</a>) lays out all of its children in a single line, even if that would cause its contents to overflow. <li data-md> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="multi-line" id="multi-line-flex-container">multi-line flex container</dfn> (i.e. one with <a class="css" data-link-type="propdesc" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap⑨">flex-wrap: wrap</a> or flex-wrap: wrap-reverse) breaks its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⑤">flex items</a> across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. When additional lines are created, they are stacked in the flex container along the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis⑥">cross axis</a> according to the flex-wrap property. Every line contains at least one flex item, unless the flex container itself is completely empty. </ul> <div class="example" id="example-b7468756"> <a class="self-link" href="#example-b7468756"></a> This example shows four buttons that do not fit side-by-side horizontally, and therefore will wrap into multiple lines. <pre class="lang-css highlight">#flex <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- k>flex-flow</c-><c- p>:</c-> row wrap<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>300</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> .item <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- m>80</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"flex"</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>></c->1<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>></c->2<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>></c->3<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>></c->4<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> Since the container is 300px wide, only three of the items fit onto a single line. They take up 240px, with 60px left over of remaining space. Because the <a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow⑤">flex-flow</a> property specifies a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container③">multi-line</a> flex container (due to the <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap①">wrap</a> keyword appearing in its value), the flex container will create an additional line to contain the last item. <figure> <img src="images/multiline-no-flex.svg"> <figcaption>An example rendering of the multi-line flex container.</figcaption> </figure> </div> Once content is broken into lines, each line is laid out independently; flexible lengths and the <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content②">justify-content</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑥">align-self</a> properties only consider the items on a single line at a time. In a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container④">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②④">flex container</a> (even one with only a single line), the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤">cross size</a> of each line is the minimum size necessary to contain the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⑦">flex items</a> on the line (after alignment due to <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑦">align-self</a>), and the lines are aligned within the flex container with the <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content②">align-content</a> property. In a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container③">single-line</a> flex container, the cross size of the line is the cross size of the flex container, and align-content has no effect. The <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤">main size</a> of a line is always the same as the main size of the flex container’s content box. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-001.htm" title="css/css-flexbox/align-content-001.htm">align-content-001.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-001.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-001.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-002.htm" title="css/css-flexbox/align-content-002.htm">align-content-002.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-002.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-002.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-003.htm" title="css/css-flexbox/align-content-003.htm">align-content-003.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-003.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-003.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-004.htm" title="css/css-flexbox/align-content-004.htm">align-content-004.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-004.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-004.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-005.htm" title="css/css-flexbox/align-content-005.htm">align-content-005.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-005.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-005.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-006.htm" title="css/css-flexbox/align-content-006.htm">align-content-006.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-006.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-006.htm">(source)</a> </ul> </details> <div class="example" id="example-5601e71c"> <a class="self-link" href="#example-5601e71c"></a> Here’s the same example as the previous, except that the flex items have all been given <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex②">flex: auto</a>. The first line has 60px of remaining space, and all of the items have the same flexibility, so each of the three items on that line will receive 20px of extra width, each ending up 100px wide. The remaining item is on a line of its own and will stretch to the entire width of the line, i.e. 300px. <figure> <img src="images/multiline-flex.svg"> <figcaption> A rendering of the same as above, but with the items all given <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex③">flex: auto</a>. </figcaption> </figure> </div> <h2 class="heading settled" data-level="7" id="flexibility">7. Flexibility<a class="self-link" href="#flexibility"></a></h2> The defining aspect of flex layout is the ability to make the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⑧">flex items</a> “flex”, altering their width/height to fill the available space in the <a data-link-type="dfn" href="#main-dimension" id="ref-for-main-dimension④">main dimension</a>. This is done with the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex④">flex</a> property. A flex container distributes free space to its items (proportional to their <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor">flex grow factor</a>) to fill the container, or shrinks them (proportional to their <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor">flex shrink factor</a>) to prevent overflow. A <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⑨">flex item</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fully-inflexible">fully inflexible</dfn> if both its <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow">flex-grow</a> and <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink">flex-shrink</a> values are zero, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="flexible">flexible</dfn> otherwise. <h3 class="heading settled" data-level="7.1" id="flex-property">7.1. The <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex⑤">flex</a> Shorthand<a class="self-link" href="#flex-property"></a></h3> <table class="def propdef" data-link-for-hint="flex"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex">flex</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> [ <a class="production css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①"><'flex-grow'></a> <a class="production css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink①"><'flex-shrink'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="production css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis"><'flex-basis'></a> ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 1 auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③⓪">flex items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex⑥">flex</a> property specifies the components of a flexible size: the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="flex factor" data-noexport id="flex-factor">flex factors</dfn> (<a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor①">grow</a> and <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor①">shrink</a>) and the <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis">flex basis</a>. When a box is a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③①">flex item</a>, flex is consulted instead of the <a data-link-type="dfn" href="#main-size-property" id="ref-for-main-size-property①">main size property</a> to determine the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑦">main size</a> of the box. If a box is not a flex item, flex has no effect. Note: The initial values of the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex⑨">flex</a> longhands are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 auto</a>. This differs from their defaults when omitted in the flex shorthand (effectively 1 1 0px) so that the flex shorthand can better accommodate <a href="#flex-common">the most common cases</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="flex" data-dfn-type="value" data-export id="valdef-flex-flex-grow"><a class="production css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow②"><'flex-grow'></a></dfn> <dd> This <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> component sets <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow③">flex-grow</a> <a href="#flex-components">longhand</a> and specifies the <dfn class="dfn-paneled" data-dfn-for="flex" data-dfn-type="dfn" data-noexport id="flex-flex-grow-factor">flex grow factor</dfn>, which determines how much the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③③">flex item</a> will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-001.htm" title="css/css-flexbox/flex-001.htm">flex-001.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-001.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-001.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-003.htm" title="css/css-flexbox/flex-003.htm">flex-003.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-003.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-003.htm">(source)</a> </ul> </details> <details class="note"> <summary>Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.</summary> An item’s <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow④">flex-grow</a> value is effectively a request for some proportion of the free space, with 1 meaning “100% of the free space”; then if the items on the line are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the items request less than the full amount (such as three items that are each flex-grow: .25) then they’ll each get exactly what they request (25% of the free space to each, with the final 25% left unfilled). See <a href="#resolve-flexible-lengths">§ 9.7 Resolving Flexible Lengths</a> for the exact details of how free space is distributed. This pattern is required for continuous behavior as <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow⑥">flex-grow</a> approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space. With this behavior, the item instead gradually takes less of the free space as flex-grow shrinks below 1, smoothly transitioning to taking none of the free space at zero. Unless this “partial fill” behavior is specifically what’s desired, authors should stick to values ≥ 1; for example, using 1 and 2 is usually better than using .33 and .67, as they’re more likely to behave as intended if items are added, removed, or line-wrapped. </details> <dt><dfn class="dfn-paneled css" data-dfn-for="flex" data-dfn-type="value" data-export id="valdef-flex-flex-shrink"><a class="production css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink②"><'flex-shrink'></a></dfn> <dd> This <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a> component sets <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink③">flex-shrink</a> <a href="#flex-components">longhand</a> and specifies the <dfn class="dfn-paneled" data-dfn-for="flex" data-dfn-type="dfn" data-noexport id="flex-flex-shrink-factor">flex shrink factor</dfn>, which determines how much the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③⑤">flex item</a> will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-002.htm" title="css/css-flexbox/flex-002.htm">flex-002.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-002.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-002.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-004.htm" title="css/css-flexbox/flex-004.htm">flex-004.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-004.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-004.htm">(source)</a> </ul> </details> Note: The <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor②">flex shrink factor</a> is multiplied by the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size">flex base size</a> when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced. <dt><dfn class="dfn-paneled css" data-dfn-for="flex" data-dfn-type="value" data-export id="valdef-flex-flex-basis"><a class="production css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①"><'flex-basis'></a></dfn> <dd> This component sets the <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②">flex-basis</a> <a href="#flex-components">longhand</a>, which specifies the <dfn class="dfn-paneled" data-dfn-for="flex" data-dfn-type="dfn" data-noexport id="flex-flex-basis">flex basis</dfn>: the initial <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑧">main size</a> of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③⑦">flex item</a>, before free space is distributed according to the flex factors. <a class="production css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis③"><'flex-basis'></a> accepts the same values as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width④">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height③">height</a> properties (except that <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto">auto</a> is treated differently) plus the <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content">content</a> keyword: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="flex-basis" data-dfn-type="value" data-export id="valdef-flex-basis-auto">auto</dfn> <dd> When specified on a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③⑧">flex item</a>, the <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto①">auto</a> keyword retrieves the value of the <a data-link-type="dfn" href="#main-size-property" id="ref-for-main-size-property②">main size property</a> as the used <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis④">flex-basis</a>. If that value is itself <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto">auto</a>, then the used value is <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①">content</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="flex-basis" data-dfn-type="value" data-export id="valdef-flex-basis-content">content</dfn> <dd> Indicates an <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-size" id="ref-for-automatic-size①">automatic size</a> based on the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item③⑨">flex item</a>’s content. (This is typically equivalent to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content size</a>, but with adjustments to handle <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio②">preferred aspect ratios</a>, intrinsic sizing constraints, and orthogonal flows; see <a href="#algo-main-item">details</a> in <a href="#layout-algorithm">§ 9 Flex Layout Algorithm</a>.) Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be achieved by using auto together with a main size (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑤">width</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height④">height</a>) of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a>. <dt><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑥"><'width'></a> <dd> For all other values, <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis⑤">flex-basis</a> is resolved the same way as for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑦">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑤">height</a>. </dl> When omitted from the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex①②">flex</a> shorthand, its specified value is 0. <dt><dfn class="dfn-paneled css" data-dfn-for="flex" data-dfn-type="value" data-export id="valdef-flex-none">none</dfn> <dd> The keyword <a class="css" data-link-type="maybe" href="#valdef-flex-none" id="ref-for-valdef-flex-none">none</a> expands to 0 0 auto. </dl> <figure> <img height="240" src="images/rel-vs-abs-flex.svg" width="504"> <figcaption> A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item’s content size). The three items have flex factors of 1, 1, and 2, respectively: notice that the item with a flex factor of 2 grows twice as fast as the others. </figcaption> </figure> A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <a class="production css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis⑥"><'flex-basis'></a> component with a unit or precede it by two flex factors. <h4 class="heading settled" data-level="7.1.1" id="flex-common">7.1.1. Basic Values of <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex①③">flex</a><a class="self-link" href="#flex-common"></a></h4> This section is informative. The list below summarizes the effects of the four <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex①④">flex</a> values that represent most commonly-desired effects: <dl> <dt id="flex-initial"><a class="self-link" href="#flex-initial"></a><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex①⑤">flex: initial</a> <dd> Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex①⑥">flex: 0 1 auto</a>. (This is the initial value.) Sizes the item based on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑧">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑥">height</a> properties. (If the item’s <a data-link-type="dfn" href="#main-size-property" id="ref-for-main-size-property③">main size property</a> computes to <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a>, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum size when there is insufficient space. The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">auto margins</a> can be used to align flex items along the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis⑨">main axis</a>. <dt><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex①⑦">flex: auto</a> <dd> Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex①⑧">flex: 1 1 auto</a>. Sizes the item based on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑨">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑦">height</a> properties, but makes them fully flexible, so that they absorb any free space along the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⓪">main axis</a>. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto. <dt><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex②③">flex: none</a> <dd> Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex②④">flex: 0 0 auto</a>. This value sizes the item according to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⓪">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑧">height</a> properties, but makes the flex item <a data-link-type="dfn" href="#fully-inflexible" id="ref-for-fully-inflexible">fully inflexible</a>. This is similar to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a>, except that flex items are not allowed to shrink, even in overflow situations. <dt><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex②⑤">flex: <number [1,∞]></a> <dd> Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex②⑥">flex: <number [1,∞]> 1 0</a>. Makes the flex item flexible and sets the <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①">flex basis</a> to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor. </dl> By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the <a class="property css" data-link-type="property">min-width</a> or min-height property. (See <a href="#min-size-auto">§ 4.5 Automatic Minimum Size of Flex Items</a>.) <h3 class="heading settled" data-level="7.2" id="flex-components">7.2. Components of Flexibility<a class="self-link" href="#flex-components"></a></h3> Individual components of flexibility can be controlled by independent longhand properties. Authors are encouraged to control flexibility using the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex②⑦">flex</a> shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate <a href="#flex-common">common uses</a>. <h4 class="heading settled" data-level="7.2.1" id="flex-grow-property">7.2.1. The <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①①">flex-grow</a> property<a class="self-link" href="#flex-grow-property"></a></h4> <table class="def propdef" data-link-for-hint="flex-grow"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-grow">flex-grow</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②"><number [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④⓪">flex items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified number <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> Authors are encouraged to control flexibility using the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex②⑧">flex</a> shorthand rather than with <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①②">flex-grow</a> directly, as the shorthand correctly resets any unspecified components to accommodate <a href="#flex-common">common uses</a>. The <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①③">flex-grow</a> property sets the <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor②">flex grow factor</a> to the provided <dfn class="dfn-paneled css" data-dfn-for="flex-grow" data-dfn-type="value" data-export id="valdef-flex-grow-number"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③"><number></a></dfn>. Negative values are not allowed. <h4 class="heading settled" data-level="7.2.2" id="flex-shrink-property">7.2.2. The <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink④">flex-shrink</a> property<a class="self-link" href="#flex-shrink-property"></a></h4> <table class="def propdef" data-link-for-hint="flex-shrink"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-shrink">flex-shrink</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④"><number [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>1 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④①">flex items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>number </table> Authors are encouraged to control flexibility using the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex②⑨">flex</a> shorthand rather than with <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink⑤">flex-shrink</a> directly, as the shorthand correctly resets any unspecified components to accommodate <a href="#flex-common">common uses</a>. The <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink⑥">flex-shrink</a> property sets the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor③">flex shrink factor</a> to the provided <dfn class="dfn-paneled css" data-dfn-for="flex-shrink" data-dfn-type="value" data-export id="valdef-flex-shrink-number"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑤"><number></a></dfn>. Negative values are not allowed. <h4 class="heading settled" data-level="7.2.3" id="flex-basis-property">7.2.3. The <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis⑦">flex-basis</a> property<a class="self-link" href="#flex-basis-property"></a></h4> <table class="def propdef" data-link-for-hint="flex-basis"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-flex-basis">flex-basis</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">content <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①①"><'width'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④②">flex items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>relative to the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②⑥">flex container’s</a> inner <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑨">main size</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> Authors are encouraged to control flexibility using the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③⓪">flex</a> shorthand rather than with <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis⑧">flex-basis</a> directly, as the shorthand correctly resets any unspecified components to accommodate <a href="#flex-common">common uses</a>. The <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis⑨">flex-basis</a> property sets the <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis②">flex basis</a>. It accepts the same values as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①②">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑨">height</a> property, plus <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content②">content</a>. For all values other than <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto②">auto</a> and <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content③">content</a> (defined above), <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①⓪">flex-basis</a> is resolved the same way as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①③">width</a> in horizontal writing modes <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, except that if a value would resolve to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> for width, it instead resolves to content for flex-basis. For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②⑦">flex container</a>); and if that containing block’s size is <a data-link-type="dfn" href="#definite" id="ref-for-definite⑥">indefinite</a>, the used value for flex-basis is content. As another corollary, flex-basis determines the size of the content box, unless otherwise specified such as by <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing">box-sizing</a> <a data-link-type="biblio" href="#biblio-css3ui" title="CSS Basic User Interface Module Level 3 (CSS3 UI)">[CSS3UI]</a>. <h2 class="heading settled" data-level="8" id="alignment">8. Alignment<a class="self-link" href="#alignment"></a></h2> After a flex container’s contents have finished their flexing and the dimensions of all flex items are finalized, they can then be aligned within the flex container. The <a class="property css" data-link-type="property">margin</a> properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④③">Flex items</a> also respect the alignment properties from <a href="https://www.w3.org/TR/css3-align/">CSS Box Alignment</a>, which allow easy keyword-based alignment of items in both the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①①">main axis</a> and <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis⑦">cross axis</a>. These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering. Note: While the alignment properties are defined in <a href="https://www.w3.org/TR/css3-align/">CSS Box Alignment</a> <a data-link-type="biblio" href="#biblio-css-align-3" title="CSS Box Alignment Module Level 3">[CSS-ALIGN-3]</a>, Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until <a href="https://www.w3.org/TR/css3-align/">CSS Box Alignment Level 3</a> is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in other words, the Box Alignment module, once completed, will supersede the definitions here. <h3 class="heading settled" data-level="8.1" id="auto-margins">8.1. Aligning with <a class="css" data-link-type="value">auto</a> margins<a class="self-link" href="#auto-margins"></a></h3> This section is non-normative. The normative definition of how margins affect flex items is in the <a href="#layout-algorithm">Flex Layout Algorithm</a> section. Auto margins on flex items have an effect very similar to auto margins in block flow: <ul> <li data-md> During calculations of flex bases and flexible lengths, auto margins are treated as 0. <li data-md> Prior to alignment via <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content③">justify-content</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑧">align-self</a>, any positive free space is distributed to auto margins in that dimension. <li data-md> Overflowing boxes ignore their auto margins and overflow in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end">end</a> direction. </ul> <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/auto-margins-001.html" title="css/css-flexbox/auto-margins-001.html">auto-margins-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/auto-margins-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/auto-margins-001.html">(source)</a> </ul> </details> Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing. <div class="example" id="example-243a1d6d"> <a class="self-link" href="#example-243a1d6d"></a> One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right. <figure> <figcaption> Sample rendering of the code below. </figcaption> <ul id="auto-bar"> <li><a href="#">About</a> <li><a href="#">Projects</a> <li><a href="#">Interact</a> <li id="login"><a href="#">Login</a> </ul> </figure> <pre class="lang-css highlight">nav > ul <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- p>}</c-> nav > ul > #login <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-markup highlight"><c- p><</c-><c- f>nav</c-><c- p>></c-> <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/about</c-><c- p>></c->About<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/projects</c-><c- p>></c->Projects<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/interact</c-><c- p>></c->Interact<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-> <c- e>id</c-><c- o>=</c-><c- s>"login"</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/login</c-><c- p>></c->Login<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p></</c-><c- f>nav</c-><c- p>></c-> </pre> </div> <div class="example" id="example-543514d9"> <a class="self-link" href="#example-543514d9"></a> The figure below illustrates the difference in cross-axis alignment in overflow situations between using <a href="#auto-margins">auto margins</a> and using the <a class="css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items①">alignment properties</a>. <figure> <div style="display:table; margin: 0 auto 1em;"> <div class="cross-auto-figure" style="display:table-cell; padding-right: 50px;"> <div> <div>About</div> <div>Authoritarianism</div> <div>Blog</div> </div> </div> <div class="cross-auto-figure" style="display:table-cell; padding-left: 50px;"> <div> <div>About</div> <div style="margin-left: -31px;">Authoritarianism</div> <div>Blog</div> </div> </div> </div> <figcaption> The items in the figure on the left are centered with margins, while those in the figure on the right are centered with <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑨">align-self</a>. If this column flex container was placed against the left edge of the page, the margin behavior would be more desirable, as the long item would be fully readable. In other circumstances, the true centering behavior might be better. </figcaption> </figure> </div> <h3 class="heading settled" data-level="8.2" id="justify-content-property">8.2. Axis Alignment: the <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content④">justify-content</a> property<a class="self-link" href="#justify-content-property"></a></h3> <table class="def propdef" data-link-for-hint="justify-content"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-content">justify-content</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">flex-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> flex-end | center | space-between | space-around <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>flex-start <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②⑧">flex containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑤">justify-content</a> property aligns <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④④">flex items</a> along the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①②">main axis</a> of the current line of the flex container. This is done after any flexible lengths and any <a href="#auto-margins">auto margins</a> have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content" data-dfn-type="value" data-export id="valdef-justify-content-flex-start">flex-start</dfn> <dd> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④⑥">Flex items</a> are packed toward the start of the line. The <a data-link-type="dfn" href="#main-start" id="ref-for-main-start④">main-start</a> margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content" data-dfn-type="value" data-export id="valdef-justify-content-flex-end">flex-end</dfn> <dd> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item④⑨">Flex items</a> are packed toward the end of the line. The <a data-link-type="dfn" href="#main-end" id="ref-for-main-end④">main-end</a> margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-box-justify-content.html" title="css/css-flexbox/css-box-justify-content.html">css-box-justify-content.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-box-justify-content.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-box-justify-content.html">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content" data-dfn-type="value" data-export id="valdef-justify-content-center">center</dfn> <dd> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑤②">Flex items</a> are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the <a data-link-type="dfn" href="#main-start" id="ref-for-main-start⑥">main-start</a> edge of the line and the first item on the line and between the <a data-link-type="dfn" href="#main-end" id="ref-for-main-end⑥">main-end</a> edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content" data-dfn-type="value" data-export id="valdef-justify-content-space-between">space-between</dfn> <dd> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑤⑤">Flex items</a> are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value falls back to safe flex-start. Otherwise, the <a data-link-type="dfn" href="#main-start" id="ref-for-main-start⑦">main-start</a> margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the <a data-link-type="dfn" href="#main-end" id="ref-for-main-end⑦">main-end</a> margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content" data-dfn-type="value" data-export id="valdef-justify-content-space-around">space-around</dfn> <dd> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑥⓪">Flex items</a> are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value falls back to safe center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container②⑨">flex container</a> edges is half the size of the spacing between flex items. </dl> <div class="figure"> <img alt height="270" src="images/flex-pack.svg" width="504"> An illustration of the five <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑥">justify-content</a> keywords and their effects on a flex container with three colored items. </div> <h3 class="heading settled" data-level="8.3" id="align-items-property">8.3. Cross-axis Alignment: the <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items②">align-items</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⓪">align-self</a> properties<a class="self-link" href="#align-items-property"></a></h3> <table class="def propdef" data-link-for-hint="align-items"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-items">align-items</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">flex-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> flex-end | center | baseline | stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③⓪">flex containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> <table class="def propdef" data-link-for-hint="align-self"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-self">align-self</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> flex-start | flex-end | center | baseline | stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑥⑥">flex items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-013.html" title="css/css-flexbox/align-self-013.html">align-self-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-013.html">(source)</a> </ul> </details> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑥⑦">Flex items</a> can be aligned in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis⑧">cross axis</a> of the current line of the flex container, similar to <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑦">justify-content</a> but in the perpendicular direction. <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items③">align-items</a> sets the default alignment for all of the flex container’s items, including anonymous flex items. <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①①">align-self</a> allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.) If either of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦①">flex item’s</a> cross-axis margins are <a class="css" data-link-type="value">auto</a>, <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①③">align-self</a> has no effect. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-auto">auto</dfn> <dd> Defers <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis⑨">cross-axis</a> alignment control to the value of <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑤">align-items</a> on the parent box. (This is the initial value of <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①④">align-self</a>.) <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-007.html" title="css/css-flexbox/align-self-007.html">align-self-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-008.html" title="css/css-flexbox/align-self-008.html">align-self-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-009.html" title="css/css-flexbox/align-self-009.html">align-self-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-011.html" title="css/css-flexbox/align-self-011.html">align-self-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-012.html" title="css/css-flexbox/align-self-012.html">align-self-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-012.html">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-flex-start">flex-start</dfn> <dd> The <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start③">cross-start</a> margin edge of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦②">flex item</a> is placed flush with the cross-start edge of the line. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-002.htm" title="css/css-flexbox/align-items-002.htm">align-items-002.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-002.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-002.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-006.html" title="css/css-flexbox/align-items-006.html">align-items-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-001.html" title="css/css-flexbox/align-self-001.html">align-self-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-001.html">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-flex-end">flex-end</dfn> <dd> The <a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end②">cross-end</a> margin edge of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦③">flex item</a> is placed flush with the cross-end edge of the line. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-003.htm" title="css/css-flexbox/align-items-003.htm">align-items-003.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-003.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-003.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-002.html" title="css/css-flexbox/align-self-002.html">align-self-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-002.html">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-center">center</dfn> <dd> The <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦④">flex item</a>’s margin box is centered in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①⓪">cross axis</a> within the line. (If the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑧">cross size</a> of the flex line is less than that of the flex item, it will overflow equally in both directions.) <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-001.htm" title="css/css-flexbox/align-items-001.htm">align-items-001.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-001.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-001.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-003.html" title="css/css-flexbox/align-self-003.html">align-self-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-003.html">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-baseline">baseline</dfn> <dd> The <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦⑥">flex item</a> <dfn class="dfn-paneled" data-dfn-for="align-items, align-self" data-dfn-type="dfn" data-noexport id="baseline-participation">participates in baseline alignment</dfn>: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start⑤">cross-start</a> margin edge is placed flush against the cross-start edge of the line. If the item does not have a baseline in the necessary axis, then one is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline">synthesized</a> from the flex item’s border box. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-004.htm" title="css/css-flexbox/align-items-004.htm">align-items-004.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-004.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-004.htm">(source)</a> </ul> </details> <dt><dfn class="dfn-paneled css" data-dfn-for="align-items, align-self" data-dfn-type="value" data-export id="valdef-align-items-stretch">stretch</dfn> <dd> If the <a data-link-type="dfn" href="#cross-size-property" id="ref-for-cross-size-property">cross size property</a> of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑦⑨">flex item</a> computes to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto④">auto</a>, and neither of the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①①">cross-axis</a> margins are auto, the flex item is <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-noexport id="stretched">stretched</dfn>. Its used value is the length necessary to make the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑨">cross size</a> of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by <a class="property css" data-link-type="property">min-height</a>/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧①">flex item</a> to overflow the item. The <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start⑦">cross-start</a> margin edge of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧②">flex item</a> is placed flush with the cross-start edge of the line. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-005.htm" title="css/css-flexbox/align-items-005.htm">align-items-005.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-005.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-005.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-004.html" title="css/css-flexbox/align-self-004.html">align-self-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-005.html" title="css/css-flexbox/align-self-005.html">align-self-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-005.html">(source)</a> <li class="wpt-test">css-flexbox-height-animation-stretch.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-height-animation-stretch.html">(source)</a> </ul> </details> </dl> <div class="figure"> <img alt height="377" src="images/flex-align.svg" width="508"> An illustration of the five <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑥">align-items</a> keywords and their effects on a flex container with four colored items. </div> <h3 class="heading settled" data-level="8.4" id="align-content-property">8.4. Packing Flex Lines: the <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content④">align-content</a> property<a class="self-link" href="#align-content-property"></a></h3> <table class="def propdef" data-link-for-hint="align-content"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-content">align-content</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">flex-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> flex-end | center | space-between | space-around | stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container⑤">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③①">flex containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑤">align-content</a> property aligns a flex container’s lines within the flex container when there is extra space in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①②">cross-axis</a>, similar to how <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑧">justify-content</a> aligns individual items within the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①③">main-axis</a>. Note, this property has no effect on a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container④">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③②">flex container</a>. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-flex-start">flex-start</dfn> <dd> Lines are packed toward the start of the flex container. The <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start⑨">cross-start</a> edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-flex-end">flex-end</dfn> <dd> Lines are packed toward the end of the flex container. The <a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end④">cross-end</a> edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-center">center</dfn> <dd> Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①①">cross-start</a> content edge of the flex container and the first line in the flex container, and between the <a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end⑥">cross-end</a> content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-space-between">space-between</dfn> <dd> Lines are evenly distributed in the flex container. If the leftover free-space is negative or there is only a single <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①">flex line</a> in the flex container, this value falls back to safe flex-start. Otherwise, the <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①②">cross-start</a> edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the <a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end⑦">cross-end</a> edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-space-around">space-around</dfn> <dd> Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value falls back to safe center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③③">flex container</a> edges is half the size of the spacing between <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line②">flex lines</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content" data-dfn-type="value" data-export id="valdef-align-content-stretch">stretch</dfn> <dd> Lines stretch to take up the remaining space. If the leftover free-space is negative, this value falls back to safe flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size. </dl> Note: Only <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container⑥">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③④">flex containers</a> ever have free space in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①③">cross-axis</a> for lines to be aligned in, because in a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container⑤">single-line</a> flex container the sole line automatically stretches to fill the space. <div class="figure"> <img alt height="508" src="images/align-content-example.svg" width="612"> An illustration of the <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑥">align-content</a> keywords and their effects on a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container⑦">multi-line</a> flex container. </div> <h3 class="heading settled" data-level="8.5" id="flex-baselines">8.5. Flex Container Baselines<a class="self-link" href="#flex-baselines"></a></h3> In order for a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③⑤">flex container</a> to itself <a href="#baseline-participation" id="ref-for-baseline-participation">participate in baseline alignment</a> (e.g. when the flex container is itself a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧③">flex item</a> in an outer flex container), it needs to submit the position of the baselines that will best represent its contents. To this end, the baselines of a flex container are determined as follows (after reordering with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order⑨">order</a>, and taking <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction⑦">flex-direction</a> into account): <dl> <dt>first/last <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="main-axis baseline set|first main-axis baseline set|last main-axis baseline set" id="main-axis-baseline"> main-axis baseline set</dfn> <dd> When the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①">inline axis</a> of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③⑧">flex container</a> matches its <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①④">main axis</a>, its baselines are determined as follows: <ol> <li data-md> If any of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧④">flex items</a> on the flex container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start">startmost</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end①">endmost</a> <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line③">flex line</a> <a href="#baseline-participation" id="ref-for-baseline-participation①">participate in baseline alignment</a>, the flex container’s first/last <a data-link-type="dfn" href="#main-axis-baseline" id="ref-for-main-axis-baseline">main-axis baseline set</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#generate-baselines" id="ref-for-generate-baselines">generated</a> from the shared <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-baseline" id="ref-for-alignment-baseline">alignment baseline</a> of those flex items. <li data-md> Otherwise, if the flex container has at least one <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧⑥">flex item</a>, the flex container’s first/last <a data-link-type="dfn" href="#main-axis-baseline" id="ref-for-main-axis-baseline①">main-axis baseline set</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#generate-baselines" id="ref-for-generate-baselines①">generated</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-baseline" id="ref-for-alignment-baseline①">alignment baseline</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start①">startmost</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end②">endmost</a> flex item. (If that item has no alignment baseline parallel to the flex container’s <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⑤">main axis</a>, then one is first <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline①">synthesized</a> from its border edges.) <li data-md> Otherwise, the flex container has no first/last main-axis <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-set" id="ref-for-baseline-set">baseline set</a>, and one is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline②">synthesized</a> if needed according to the rules of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context">alignment context</a>. </ol> <dt>first/last <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="cross-axis baseline set|first cross-axis baseline set|last cross-axis baseline set" id="cross-axis-baseline"> cross-axis baseline set</dfn> <dd> When the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline axis</a> of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container③⑨">flex container</a> matches its <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①④">cross axis</a>, its baselines are determined as follows: <ol> <li data-md> If the flex container has at least one <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑧⑧">flex item</a>, the flex container’s first/last <a data-link-type="dfn" href="#cross-axis-baseline" id="ref-for-cross-axis-baseline">cross-axis baseline set</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#generate-baselines" id="ref-for-generate-baselines②">generated</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-baseline" id="ref-for-alignment-baseline③">alignment baseline</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start②">startmost</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end③">endmost</a> flex item. (If that item has no alignment baseline parallel to the flex container’s <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①⑤">cross axis</a>, then one is first <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline③">synthesized</a> from its border edges.) <li data-md> Otherwise, the flex container has no first/last cross-axis <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-set" id="ref-for-baseline-set①">baseline set</a>, and one is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline" id="ref-for-synthesize-baseline④">synthesized</a> if needed according to the rules of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#shared-alignment-context" id="ref-for-shared-alignment-context①">alignment context</a>. </ol> </dl> When calculating the baseline according to the above rules, if the box contributing a baseline has an <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a> value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline. When <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">determining the baseline of a table cell</a>, a flex container provides a baseline just as a line box or table-row does. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> See <a href="https://drafts.csswg.org/css-writing-modes-3/#intro-baselines"><cite>CSS Writing Modes 3</cite> § 4.1 Introduction to Baselines</a> and <a href="https://drafts.csswg.org/css-align-3/#baseline-rules"><cite>CSS Box Alignment 3</cite> § 9 Baseline Alignment Details</a> for more information on baselines. <h2 class="heading settled" data-level="9" id="layout-algorithm">9. Flex Layout Algorithm<a class="self-link" href="#layout-algorithm"></a></h2> This section contains normative algorithms detailing the exact layout behavior of a flex container and its contents. The algorithms here are written to optimize readability and theoretical simplicity, and may not necessarily be the most efficient. Implementations may use whatever actual algorithms they wish, but must produce the same results as the algorithms described here. Note: This section is mainly intended for implementors. Authors writing web pages should generally be served well by the individual property descriptions, and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout. The following sections define the algorithm for laying out a flex container and its contents. Note: Flex layout works with the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨⓪">flex items</a> in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#order-modified-document-order" id="ref-for-order-modified-document-order①">order-modified document order</a>, not their original document order. <h3 class="heading settled" data-level="9.1" id="box-manip">9.1. Initial Setup<a class="self-link" href="#box-manip"></a></h3> <ol class="layout-start" start="1"> <li id="algo-anon-box"><a class="self-link" href="#algo-anon-box"></a> Generate anonymous flex items as described in <a href="#flex-items">§ 4 Flex Items</a>. </ol> <h3 class="heading settled" data-level="9.2" id="line-sizing">9.2. Line Length Determination<a class="self-link" href="#line-sizing"></a></h3> <ol class="continue"> <li id="algo-available"> <a class="self-link" href="#algo-available"></a> Determine the available main and cross space for the flex items. For each dimension, if that dimension of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④⓪">flex container</a>’s content box is a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑦">definite size</a>, use that; if that dimension of the flex container is being sized under a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint">min</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint">max-content constraint</a>, the available space in that dimension is that constraint; otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value. <div class="example" id="example-34f93ad9"> <a class="self-link" href="#example-34f93ad9"></a> For example, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> to a flex item in a <a href="https://www.w3.org/TR/CSS2/visuren.html#floats">floated</a> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑤">auto</a>-sized <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④③">flex container</a> is: <ul> <li>the width of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④④">flex container</a>’s containing block minus the flex container’s margin, border, and padding in the horizontal dimension <li>infinite in the vertical dimension </ul> </div> <li id="algo-main-item"> <a class="self-link" href="#algo-main-item"></a> Determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="flex-base-size">flex base size</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="hypothetical-main-size">hypothetical main size</dfn> of each item: <ol type="A"> <li> If the item has a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑧">definite</a> used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis③">flex basis</a>, that’s the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①">flex base size</a>. <li> If the flex item has ... <ul> <li>a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio③">preferred aspect ratio</a>, <li>a used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis④">flex basis</a> of <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content⑥">content</a>, and <li>a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑨">definite</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①⓪">cross size</a>, </ul> then the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②">flex base size</a> is calculated from its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①①">cross size</a> and the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨①">flex item</a>’s aspect ratio. <li> If the used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis⑤">flex basis</a> is <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content⑦">content</a> or depends on its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available①">available space</a>, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">automatic table layout</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>), size the item under that constraint. The <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③">flex base size</a> is the item’s resulting <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①⓪">main size</a>. <li> Otherwise, if the used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis⑥">flex basis</a> is <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content⑧">content</a> or depends on its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available space</a>, the available main size is infinite, and the flex item’s inline axis is parallel to the main axis, lay the item out using <a href="https://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> <a data-link-type="biblio" href="#biblio-css3-writing-modes" title="CSS Writing Modes Level 3">[CSS3-WRITING-MODES]</a>. The <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size④">flex base size</a> is the item’s max-content <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①①">main size</a>. Note: This case occurs, for example, in an English document (horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑧">writing mode</a>) containing a column flex container containing a vertical Japanese (vertical writing mode) <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨②">flex item</a>. <li> Otherwise, size the item into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available③">available space</a> using its used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis⑦">flex basis</a> in place of its <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①②">main size</a>, treating a value of <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content⑨">content</a> as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content">max-content</a>. If a <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①②">cross size</a> is needed to determine the main size (e.g. when the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨③">flex item</a>’s main size is in its block axis, or when it has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio④">preferred aspect ratio</a>) and the flex item’s cross size is <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto①">auto</a> and not <a data-link-type="dfn" href="#definite" id="ref-for-definite①⓪">definite</a>, in this calculation use fit-content as the flex item’s cross size. The <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size⑤">flex base size</a> is the item’s resulting main size. <details class="wpt-tests-block" dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-img-expand-evenly.html" title="css/css-flexbox/css-flexbox-img-expand-evenly.html">css-flexbox-img-expand-evenly.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-img-expand-evenly.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-img-expand-evenly.html">(source)</a> </ul> </details> </ol> When determining the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size⑥">flex base size</a>, the item’s min and max <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①⑥">main sizes</a> are ignored (no clamping occurs). Furthermore, the sizing calculations that floor the content box size at zero when applying <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing①">box-sizing</a> are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer flex base size of zero—and hence a negative inner flex base size.) The <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size">hypothetical main size</a> is the item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size⑨">flex base size</a> clamped according to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used</a> min and max <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①⑦">main sizes</a> (and flooring the content box size at zero). <li id="algo-main-container"> <a class="self-link" href="#algo-main-container"></a> Determine the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①⑧">main size</a> of the flex container using the rules of the formatting context in which it participates. <div class="note" role="note"> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-block-size" id="ref-for-automatic-block-size">automatic block size</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level①">block-level</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④⑥">flex container</a> is its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①">max-content size</a>. The Block Layout spec should define this equivalency, but it doesn’t exist yet. </div> </ol> <h3 class="heading settled" data-level="9.3" id="main-sizing">9.3. Main Size Determination<a class="self-link" href="#main-sizing"></a></h3> <ol class="continue"> <li id="algo-line-break"> <a class="self-link" href="#algo-line-break"></a> Collect flex items into flex lines: <ul> <li> If the flex container is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container⑥">single-line</a>, collect all the flex items into a single flex line. <li> Otherwise, starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#inner-size" id="ref-for-inner-size">inner</a> main size (or until a forced break is encountered, see <a href="#pagination">§ 10 Fragmenting Flex Layout</a>). If the very first uncollected item wouldn’t fit, collect just it into the line. For this step, the size of a flex item is its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size">outer</a> <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size①">hypothetical main size</a>. (Note: This can be negative.) Repeat until all flex items have been collected into flex lines. Note that the "collect as many" line will collect zero-sized flex items onto the end of the previous line even if the last non-zero item exactly "filled up" the line. </ul> <li id="algo-flex"><a class="self-link" href="#algo-flex"></a> <a href="#resolve-flexible-lengths">Resolve the flexible lengths</a> of all the flex items to find their used <a data-link-type="dfn" href="#main-size" id="ref-for-main-size①⑨">main size</a>. See <a href="#resolve-flexible-lengths">§ 9.7 Resolving Flexible Lengths</a>. </ol> <h3 class="heading settled" data-level="9.4" id="cross-sizing">9.4. Cross Size Determination<a class="self-link" href="#cross-sizing"></a></h3> <ol class="continue"> <li id="algo-cross-item"><a class="self-link" href="#algo-cross-item"></a> Determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="hypothetical-cross-size">hypothetical cross size</dfn> of each item by performing layout as if it were an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow">in-flow</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level-box" id="ref-for-block-level-box">block-level box</a> with the used <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②⓪">main size</a> and the given available space, treating <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑥">auto</a> as fit-content. <li id="algo-cross-line"> <a class="self-link" href="#algo-cross-line"></a> Calculate the cross size of each flex line. If the flex container is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container⑦">single-line</a> and has a <a data-link-type="dfn" href="#definite" id="ref-for-definite①①">definite</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①④">cross size</a>, the cross size of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line④">flex line</a> is the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④⑦">flex container</a>’s inner cross size. Otherwise, for each flex line: <ol> <li> Collect all the flex items whose inline-axis is parallel to the main-axis, whose <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑤">align-self</a> is <a class="css" data-link-type="maybe" href="#valdef-align-items-baseline" id="ref-for-valdef-align-items-baseline">baseline</a>, and whose cross-axis margins are both non-<a class="css" data-link-type="value">auto</a>. Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge, and sum these two values. <li> Among all the items not collected by the previous step, find the largest outer <a data-link-type="dfn" href="#hypothetical-cross-size" id="ref-for-hypothetical-cross-size">hypothetical cross size</a>. <li> The used cross-size of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line⑤">flex line</a> is the largest of the numbers found in the previous two steps and zero. If the flex container is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container⑧">single-line</a>, then clamp the line’s cross-size to be within the container’s computed min and max <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①⑦">cross sizes</a>. Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically. </ol> <li id="algo-line-stretch"><a class="self-link" href="#algo-line-stretch"></a> Handle 'align-content: stretch'. If the flex container has a <a data-link-type="dfn" href="#definite" id="ref-for-definite①②">definite</a> cross size, <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑦">align-content</a> is <a class="css" data-link-type="value" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch">stretch</a>, and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size, increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container’s inner cross size. <li id="algo-visibility"> <a class="self-link" href="#algo-visibility"></a> Collapse visibility:collapse items. If any flex items have <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility③">visibility: collapse</a>, note the cross size of the line they’re in as the item’s <var>strut size</var>, and restart layout from the beginning. In this second layout round, when <a href="#algo-line-break">collecting items into lines</a>, treat the collapsed items as having zero <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②①">main size</a>. For the rest of the algorithm following that step, ignore the collapsed items entirely (as if they were display:none) except that after <a href="#algo-cross-line">calculating the cross size of the lines</a>, if any line’s cross size is less than the largest <var>strut size</var> among all the collapsed items in the line, set its cross size to that <var>strut size</var>. Skip this step in the second layout round. <li id="algo-stretch"> <a class="self-link" href="#algo-stretch"></a> Determine the used cross size of each flex item. If a flex item has <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑥">align-self: stretch</a>, its computed cross size property is <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑦">auto</a>, and neither of its cross-axis margins are <a class="css" data-link-type="value">auto</a>, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①⑧">cross sizes</a>. Otherwise, the used cross size is the item’s <a data-link-type="dfn" href="#hypothetical-cross-size" id="ref-for-hypothetical-cross-size①">hypothetical cross size</a>. If the flex item has <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑦">align-self: stretch</a>, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved. Note that this step does not affect the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②②">main size</a> of the flex item, even if it has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio⑤">preferred aspect ratio</a>. </ol> <h3 class="heading settled" data-level="9.5" id="main-alignment">9.5. Main-Axis Alignment<a class="self-link" href="#main-alignment"></a></h3> <ol class="continue"> <li id="algo-main-align"> <a class="self-link" href="#algo-main-align"></a> Distribute any remaining free space. For each flex line: <ol> <li> If the remaining free space is positive and at least one main-axis margin on this line is <a class="css" data-link-type="value">auto</a>, distribute the free space equally among these margins. Otherwise, set all auto margins to zero. <li> Align the items along the main-axis per <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑨">justify-content</a>. </ol> </ol> <h3 class="heading settled" data-level="9.6" id="cross-alignment">9.6. Cross-Axis Alignment<a class="self-link" href="#cross-alignment"></a></h3> <ol class="continue"> <li id="algo-cross-margins"> <a class="self-link" href="#algo-cross-margins"></a> Resolve cross-axis <a class="css" data-link-type="value">auto</a> margins. If a flex item has <a class="css" data-link-type="value">auto</a> cross-axis margins: <ul> <li> If its outer cross size (treating those <a class="css" data-link-type="value">auto</a> margins as zero) is less than the cross size of its flex line, distribute the difference in those sizes equally to the auto margins. <li> Otherwise, if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start②">block-start</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start②">inline-start</a> margin (whichever is in the cross axis) is <a class="css" data-link-type="value">auto</a>, set it to zero. Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line. </ul> <li id="algo-cross-align"><a class="self-link" href="#algo-cross-align"></a> Align all flex items along the cross-axis per <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑧">align-self</a>, if neither of the item’s cross-axis margins are <a class="css" data-link-type="value">auto</a>. <li id="algo-cross-container"><a class="self-link" href="#algo-cross-container"></a> Determine the flex container’s used cross size using the rules of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#formatting-context" id="ref-for-formatting-context">formatting context</a> in which it participates. If a content-based <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size①⑨">cross size</a> is needed, use the sum of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line⑥">flex lines</a>' cross sizes. <li id="algo-line-align"><a class="self-link" href="#algo-line-align"></a> Align all flex lines per <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑧">align-content</a>. </ol> <h3 class="heading settled" data-level="9.7" id="resolve-flexible-lengths">9.7. Resolving Flexible Lengths<a class="self-link" href="#resolve-flexible-lengths"></a></h3> To resolve the flexible lengths of the items within a flex line: <ol> <li> Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. If the sum is less than the flex container’s inner <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②③">main size</a>, use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor. <li> Each item in the flex line has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="target-main-size">target main size</dfn>, initially set to its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①⓪">flex base size</a>. Each item is initially unfrozen and may become frozen. Note: An item’s <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size">target main size</a> doesn’t change after freezing. <li> Size inflexible items. Freeze, setting its <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size①">target main size</a> to its <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size②">hypothetical main size</a>… <ul> <li> any item that has a flex factor of zero <li> if using the <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor③">flex grow factor</a>: any item that has a <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①①">flex base size</a> greater than its <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size③">hypothetical main size</a> <li> if using the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor④">flex shrink factor</a>: any item that has a <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①②">flex base size</a> smaller than its <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size④">hypothetical main size</a> </ul> <li> Calculate <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="initial-free-space">initial free space</dfn>. Sum the outer sizes of all items on the line, and subtract this from the flex container’s inner <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②④">main size</a>. For frozen items, use their outer <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size②">target main size</a>; for other items, use their outer <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①③">flex base size</a>. <li> Loop: <ol type="a"> <li> Check for flexible items. If all the flex items on the line are frozen, free space has been distributed; exit this loop. <li> Calculate the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="remaining-free-space">remaining free space</dfn> as for <a data-link-type="dfn" href="#initial-free-space" id="ref-for-initial-free-space">initial free space</a>, above. If the sum of the unfrozen flex items’ flex factors is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the <a data-link-type="dfn" href="#remaining-free-space" id="ref-for-remaining-free-space">remaining free space</a>, use this as the remaining free space. <li> If the <a data-link-type="dfn" href="#remaining-free-space" id="ref-for-remaining-free-space②">remaining free space</a> is non-zero, distribute it proportional to the flex factors: <dl> <dt>If using the <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor④">flex grow factor</a> <dd> For every unfrozen item on the line, find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size③">target main size</a> to its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①④">flex base size</a> plus a fraction of the <a data-link-type="dfn" href="#remaining-free-space" id="ref-for-remaining-free-space③">remaining free space</a> proportional to the ratio. <dt>If using the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor⑤">flex shrink factor</a> <dd> For every unfrozen item on the line, multiply its flex shrink factor by its inner <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①⑤">flex base size</a>, and note this as its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scaled-flex-shrink-factor">scaled flex shrink factor</dfn>. Find the ratio of the item’s <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor">scaled flex shrink factor</a> to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size④">target main size</a> to its flex base size minus a fraction of the absolute value of the <a data-link-type="dfn" href="#remaining-free-space" id="ref-for-remaining-free-space④">remaining free space</a> proportional to the ratio. Note this may result in a negative inner <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②⑤">main size</a>; it will be corrected in the next step. </dl> <li> Fix min/max violations. Clamp each non-frozen item’s <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size⑤">target main size</a> by its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used</a> min and max <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②⑥">main sizes</a> and floor its content-box size at zero. If the item’s target main size was made smaller by this, it’s a max violation. If the item’s target main size was made larger by this, it’s a min violation. <li> Freeze over-flexed items. The total violation is the sum of the adjustments from the previous step <code>∑(clamped size - unclamped size)</code>. If the total violation is: <dl> <dt>Zero <dd> Freeze all items. <dt>Positive <dd> Freeze all the items with min violations. <dt>Negative <dd> Freeze all the items with max violations. </dl> Note: This freezes at least one item, ensuring that the loop makes progress and eventually terminates. <li> Return to the start of this loop. </ol> <li> Set each item’s used <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②⑦">main size</a> to its <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size⑧">target main size</a>. </ol> <h3 class="heading settled" data-level="9.8" id="definite-sizes">9.8. Definite and Indefinite Sizes<a class="self-link" href="#definite-sizes"></a></h3> Although CSS Sizing <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a> defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite①③">definite</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#indefinite" id="ref-for-indefinite">indefinite</a> lengths, Flexbox has several additional cases where a length can be considered <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="definite|definite size|indefinite|indefinite size" data-noexport id="definite">definite</dfn>: <ol> <li data-md> If the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④⑧">flex container</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite①④">definite</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size②⑧">main size</a>, then the post-flexing main sizes of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨⑥">flex items</a> are treated as definite. <li data-md> If a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨⑦">flex item’s</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis⑧">flex basis</a> is <a data-link-type="dfn" href="#definite" id="ref-for-definite①⑥">definite</a>, then its post-flexing <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⓪">main size</a> is also definite. <li data-md> If a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container⑨">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container④⑨">flex container</a> has a definite <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size②①">cross size</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-size" id="ref-for-automatic-size②">automatic</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size②">preferred</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size①">outer</a> cross size of any <a data-link-type="dfn" href="#stretched" id="ref-for-stretched">stretched</a> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item⑨⑧">flex items</a> is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered <a data-link-type="dfn" href="#definite" id="ref-for-definite①⑧">definite</a>. <li data-md> Once the cross size of a flex line has been determined, the cross sizes of items in auto-sized flex containers are also considered definite for the purpose of layout; see <a href="#algo-stretch">step 11</a>. </ol> Note: This means that within <a data-link-type="dfn" href="#flex-layout" id="ref-for-flex-layout①">flex layout</a>, “definite” sizes can require performing layout. This was done to allow percentages inside of <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪⓪">flex items</a> to resolve where authors expected them to resolve. <h3 class="heading settled" data-level="9.9" id="intrinsic-sizes">9.9. Intrinsic Sizes<a class="self-link" href="#intrinsic-sizes"></a></h3> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizing" id="ref-for-intrinsic-sizing">intrinsic sizing</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⓪">flex container</a> is used to produce various types of content-based automatic sizing, such as shrink-to-fit logical widths (which use the fit-content formula) and content-based logical heights (which use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content②">max-content size</a>). For these computations, <a class="css" data-link-type="value">auto</a> margins on flex items are treated as 0. See <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a> for a definition of the terms in this section. <h4 class="heading settled" data-level="9.9.1" id="intrinsic-main-sizes">9.9.1. Flex Container Intrinsic Main Sizes<a class="self-link" href="#intrinsic-main-sizes"></a></h4> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content③">max-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③①">main size</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤①">flex container</a> is, theoretically, the smallest size the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤②">flex container</a> can take such that when flex layout is run with that container size, each <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪①">flex item</a> ends up at least as large as its <a href="#intrinsic-item-contributions">max-content contribution</a>, to the extent allowed by the items’ flexibility. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content②">min-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③②">main size</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤③">flex container</a> is, theoretically, the smallest size the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤④">flex container</a> can take such that no items overflow it, and no item’s contents overflow the item—setting aside the cases in which the boxes layouts are defined to overflow (for example with negative margins or percentage sizes that add up to more than 100%). <h5 class="heading settled" data-level="9.9.1.1" id="intrinsic-main-sizes-ideal">9.9.1.1. Ideal Algorithm<a class="self-link" href="#intrinsic-main-sizes-ideal"></a></h5> Note: The following algorithm calculates the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⑤">flex container</a>’s ideal intrinsic <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③③">main sizes</a>. However, because it was not implemented correctly initially, and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior, <a href="https://github.com/w3c/csswg-drafts/issues/8884">it is not Web-compatible</a>. Implementers and the CSS Working Group are investigating to what extent Web browser implementations can safely approach this behavior, and further experimentation is welcome. Considering only non-<a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item③">collapsed</a> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪②">flex items</a>; <ol> <li> For each <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪③">flex item</a>, subtract its outer <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①⑦">flex base size</a> from its <a href="#intrinsic-item-contributions">max-content contribution</a> size. If that result is positive, divide it by the item’s <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor⑤">flex grow factor</a> if the flex grow factor is ≥ 1, or multiply it by the flex grow factor if the flex grow factor is < 1; if the result is negative, divide it by the item’s <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor②">scaled flex shrink factor</a> (if dividing by zero, treat the result as negative infinity). This is the item’s <var>desired flex fraction</var>. <li> Place all <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪④">flex items</a> into lines of infinite length. Within each line, find the greatest (most positive) <var>desired flex fraction</var> among all the flex items. This is the line’s <var>chosen flex fraction</var>. <li> If the <var>chosen flex fraction</var> is positive, and the sum of the line’s <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor⑨">flex grow factors</a> is less than 1, divide the <var>chosen flex fraction</var> by that sum. If the <var>chosen flex fraction</var> is negative, and the sum of the line’s <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor⑥">flex shrink factors</a> is less than 1, multiply the <var>chosen flex fraction</var> by that sum. <li> Add each item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①⑧">flex base size</a> to the product of its <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor①⓪">flex grow factor</a> (<a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor③">scaled flex shrink factor</a>, if shrinking) and the <var>chosen flex fraction</var>, then clamp that result by the <a data-link-type="dfn" href="#max-main-size" id="ref-for-max-main-size">max main size</a> floored by the <a data-link-type="dfn" href="#min-main-size" id="ref-for-min-main-size">min main size</a>. <li> The <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⑥">flex container</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content④">max-content size</a> is the largest sum (among all the lines) of the afore-calculated sizes of all items within a single line. </ol> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content③">min-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③④">main size</a> of a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⓪">single-line</a> flex container is calculated identically to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content⑤">max-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⑤">main size</a>, except that the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪⑥">flex items</a>’ <a href="#intrinsic-item-contributions">min-content contributions</a> are used instead of their <a href="#intrinsic-item-contributions">max-content contributions</a>. <details class="note"> <summary>Implications of this algorithm when the sum of flex is less than 1</summary> The above algorithm is designed to give the correct behavior for two cases in particular, and make the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⑦">flex container’s</a> size continuous as you transition between the two: <ol> <li data-md> If all items are inflexible, the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⑧">flex container</a> is sized to the sum of their <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size①⑨">flex base size</a>. (An inflexible flex base size basically substitutes for a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⑤">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①⓪">height</a>, which, when specified, is what a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution">max-content contribution</a> is based on in Block Layout.) <li data-md> When all items are flexible with <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor">flex factors</a> ≥ 1, the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑤⑨">flex container</a> is sized to the sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①">max-content contributions</a> of its items (or perhaps a slightly larger size, so that every flex item is at least the size of its max-content contribution, but also has the correct ratio of its size to the size of the other items, as determined by its flexibility). </ol> For example, if a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⓪">flex container</a> has a single <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪⑦">flex item</a> with <a class="css" data-link-type="propdesc" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①⑤">flex-basis: 100px;</a> but a max-content size of 200px, then when the item is <a class="css" data-link-type="propdesc" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①④">flex-grow: 0</a>, the flex container (and flex item) is 100px wide, but when the item is flex-grow: 1 or higher, the flex container (and flex item) is 200px wide. There are several possible ways to make the overall behavior continuous between these two cases, but all of them have drawbacks. We chose one we feel has the least bad implications; unfortunately, it "double-applies" the flexibility in cases with <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor①">flex factors</a> that are < 1. In the above example, if the item has <a class="css" data-link-type="propdesc" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①⑥">flex-grow: .5</a>, then the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥③">flex container</a> ends up 150px wide, but the item then sizes normally into that available space, ending up 125px wide. <details class="note"> <summary>Even more involved notes on the specific behavior chosen</summary> Principles: <ol> <li data-md> Don’t explode any sizes, whether growing or shrinking, as inputs approach zero. <li data-md> When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size. <li data-md> Items with a zero flex shouldn’t affect the sizes at all. <li data-md> Keep it continuous over variance of flex factors and item sizes. <li data-md> Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor). <li data-md> When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size. </ol> To get these all to work together, we have to apply some correction when either flex factors or the sum of flex factors on a line is < 1. For shrink our behavior is somewhat easier; since the explosive case of 0 shrink results in a negative infinity desired fraction which we’ll never choose (since we always take the largest), we can just apply the correction at the line level, giving us double-application only when the sum is < 1. For positives it’s more complicated. 0 grow naively explodes into *positive* infinity, which we’d choose, so we need to apply the correction at the individual item level. We do that by multiplying the space by the factor when factor is <1. Leaving it at that would result in a double-application for items < 1 but sum >= 1, but a *triple*-application when the sum is < 1. To avoid *that* ridiculousness, we apply a *reverse* correction when the sum is 1, dividing by the sum instead. This leaves us with a double correction in all cases for items with factors < 1. We can’t eliminate the double-applications entirely without giving up other, more important principles (in particular, principle 3 —try to come up with rules that don’t double-apply when you have two items with <a class="css" data-link-type="propdesc" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow①⑦">flex-grow: .5</a>, but also don’t give a flex-grow: 0 item any power over a flex-grow: 1 sibling; you can’t, as far as we can tell.) </details> </details> <h5 class="heading settled" data-level="9.9.1.2" id="intrinsic-main-sizes-compat">9.9.1.2. Web-compatible Intrinsic Sizing Algorithm<a class="self-link" href="#intrinsic-main-sizes-compat"></a></h5> Note: The following algorithm has been demonstrated to be Web-compatible. It may be altered in the future to bring it closer to the ideal algorithm above, if possible. <a class="self-link" href="#issue-bc420653"></a> Outline Web-compatible algorithm here, once we have one. <a href="https://github.com/w3c/csswg-drafts/issues/8884">[Issue #8884]</a> <h5 class="heading settled" data-level="9.9.1.3" id="intrinsic-main-sizes-multiline">9.9.1.3. Multi-line Min-content Algorithm<a class="self-link" href="#intrinsic-main-sizes-multiline"></a></h5> For a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container⑧">multi-line</a> container, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content④">min-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⑥">main size</a> is simply the largest <a href="#intrinsic-item-contributions">min-content contribution</a> of all the non-<a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item④">collapsed</a> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⓪⑨">flex items</a> in the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥④">flex container</a>. For this purpose, each item’s contribution is capped by the item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②①">flex base size</a> if the item is not growable, floored by the item’s flex base size if the item is not shrinkable, and then further clamped by the item’s min and max main sizes. <h4 class="heading settled" data-level="9.9.2" id="intrinsic-cross-sizes">9.9.2. Flex Container Intrinsic Cross Sizes<a class="self-link" href="#intrinsic-cross-sizes"></a></h4> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content⑤">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content⑥">max-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size②⑤">cross size</a> of a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①①">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⑤">flex container</a> is the largest <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution">min-content contribution</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution③">max-content contribution</a> (respectively) of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①⓪">flex items</a>. For a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container⑨">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⑥">flex container</a>, the behavior depends on whether it’s a row or column flexbox: <dl> <dt data-md><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row③">row</a> <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⓪">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⑦">flex container</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#cross-size" id="ref-for-cross-size②⑥">cross-size</a> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content⑥">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content⑦">max-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size②⑦">cross size</a> is the sum of the flex line cross sizes resulting from sizing the flex container under a <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①⑥">cross-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint①">min-content constraint</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint①">max-content constraint</a> (respectively). <dt data-md><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column①">column</a> <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①①">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⑧">flex container</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#cross-size" id="ref-for-cross-size②⑧">cross-size</a> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content⑦">min-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size②⑨">cross size</a> is the largest <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution①">min-content contribution</a> among all of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①①">flex items</a>. Note: This heuristic effectively assumes a single flex line, in order to guarantee that the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content⑧">min-content size</a> is smaller than the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content⑧">max-content size</a>. If the flex container has a height constraint, this will result in overflow, but if the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑥⑨">flex container</a> is also a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a>, it will at least be large enough to fit any given column entirely within its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content⑨">max-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③⓪">cross size</a> is the sum of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line⑦">flex line</a> cross sizes resulting from sizing the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⓪">flex container</a> under a <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①⑦">cross-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint②">max-content constraint</a>, using the largest <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution④">max-content</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#cross-size" id="ref-for-cross-size③②">cross-size</a> contribution among the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①②">flex items</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available④">available space</a> in the cross axis for each of the flex items during layout. Note: This heuristic gives a reasonable approximation of the size that the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦①">flex container</a> should be, with each <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①④">flex item</a> laid out at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution⑤">max-content contribution</a> or larger, and each <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line⑧">flex line</a> no larger than its largest flex item. It’s not a perfect fit in some cases, but doing it completely correct is insanely expensive, and this works reasonably well. </dl> <h4 class="heading settled" data-level="9.9.3" id="intrinsic-item-contributions">9.9.3. Flex Item Intrinsic Size Contributions<a class="self-link" href="#intrinsic-item-contributions"></a></h4> The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution②">min-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①⑥">flex item</a> is the larger of its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content⑨">min-content size</a> and outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size③">preferred size</a> if that is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑧">auto</a>, clamped by its <a data-link-type="dfn" href="#min-main-size" id="ref-for-min-main-size①">min</a>/<a data-link-type="dfn" href="#max-main-size" id="ref-for-max-main-size①">max main size</a>. The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution⑥">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①⑦">flex item</a> is the larger of its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⓪">max-content size</a> and outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size④">preferred size</a> if that is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑨">auto</a>, clamped by its <a data-link-type="dfn" href="#min-main-size" id="ref-for-min-main-size②">min</a>/<a data-link-type="dfn" href="#max-main-size" id="ref-for-max-main-size②">max main size</a>. <h2 class="heading settled" data-level="10" id="pagination">10. Fragmenting Flex Layout<a class="self-link" href="#pagination"></a></h2> Flex containers can break across pages between items, between lines of items (in <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①②">multi-line</a> mode), and inside items. The <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before">break-*</a> properties apply to flex containers as normal for block-level or inline-level boxes. This section defines how they apply to flex items and the contents of flex items. See the <a href="http://www.w3.org/TR/css-break/">CSS Fragmentation Module</a> for more context <a data-link-type="biblio" href="#biblio-css3-break" title="CSS Fragmentation Module Level 3">[CSS3-BREAK]</a>. The following breaking rules refer to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container">fragmentation container</a> as the “page”. The same rules apply in any other <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context" id="ref-for-fragmentation-context">fragmentation context</a>. (Substitute “page” with the appropriate fragmentation container type as needed.) For readability, in this section the terms "row" and "column" refer to the relative orientation of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦②">flex container</a> with respect to the block flow direction of the fragmentation context, rather than to that of the flex container itself. The exact layout of a fragmented flex container is not defined in this level of Flexible Box Layout. However, breaks inside a flex container are subject to the following rules (interpreted using <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#order-modified-document-order" id="ref-for-order-modified-document-order②">order-modified document order</a>): <ul> <li> In a row flex container, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before①">break-before</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-after" id="ref-for-propdef-break-after">break-after</a> values on flex items are propagated to the flex line. The break-before values on the first line and the break-after values on the last line are propagated to the flex container. Note: Break propagation (like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> propagation) does not affect <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed values</a>. <li> In a column flex container, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before③">break-before</a> values on the first item and the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-after" id="ref-for-propdef-break-after②">break-after</a> values on the last item are propagated to the flex container. Forced breaks on other items are applied to the item itself. <li> A forced break inside a flex item effectively increases the size of its contents; it does not trigger a forced break inside sibling items. <li> In a row flex container, <a href="https://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur between sibling flex lines, and <a href="https://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur between the first/last flex line and the flex container’s content edges. In a column flex container, <a href="https://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur between sibling flex items, and <a href="https://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur between the first/last flex items on a line and the flex container’s content edges. <a data-link-type="biblio" href="#biblio-css3-break" title="CSS Fragmentation Module Level 3">[CSS3-BREAK]</a> <li> When a flex container is continued after a break, the space available to its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①⑧">flex items</a> (in the block flow direction of the fragmentation context) is reduced by the space consumed by flex container fragments on previous pages. The space consumed by a flex container fragment is the size of its content box on that page. If as a result of this adjustment the available space becomes negative, it is set to zero. <li> If the first fragment of the flex container is not at the top of the page, and none of its flex items fit in the remaining space on the page, the entire fragment is moved to the next page. <li> When breaking a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①③">multi-line</a> column flex container, the UA may organize each fragment into its own “stack” of flex lines—just like each fragment of a multi-column container has its own row of column boxes—in order to ensure that content presented on earlier pages corresponds to content earlier in the box order. <li> Aside from the rearrangement of items imposed by the previous point, UAs should attempt to minimize distortion of the flex container with respect to unfragmented flow. </ul> <h3 class="heading settled" data-level="10.1" id="pagination-algo">10.1. Sample Flex Fragmentation Algorithm<a class="self-link" href="#pagination-algo"></a></h3> This informative section presents a possible fragmentation algorithm for flex containers. Implementors are encouraged to improve on this algorithm and <a href="#sotd">provide feedback to the CSS Working Group</a>. <div class="example" id="example-93cdec9b"> <a class="self-link" href="#example-93cdec9b"></a> This algorithm assumes that pagination always proceeds only in the forward direction; therefore, in the algorithms below, alignment is mostly ignored prior to pagination. Advanced layout engines may be able to honor alignment across fragments. <dl> <dt><a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①②">single-line</a> column flex container <dd> <ol> <li> Run the flex layout algorithm (without regards to pagination) through <a href="#cross-sizing">Cross Sizing Determination</a>. <li> Lay out as many consecutive flex items or item fragments as possible (but at least one or a fragment thereof), starting from the first, until there is no more room on the page or a forced break is encountered. <li> If the previous step ran out of room and the free space is positive, the UA may reduce the distributed free space on this page (down to, but not past, zero) in order to make room for the next unbreakable flex item or fragment. Otherwise, the item or fragment that does not fit is pushed to the next page. The UA should pull up if more than 50% of the fragment would have fit in the remaining space and should push otherwise. <li> If there are any flex items or fragments not laid out by the previous steps, rerun the flex layout algorithm from <a href="#line-sizing">Line Length Determination</a> through <a href="#cross-sizing">Cross Sizing Determination</a> with the next page’s size and all the contents (including those already laid out), and return to the previous step, but starting from the first item or fragment not already laid out. <li> For each fragment of the flex container, continue the flex layout algorithm from <a href="#main-alignment">Main-Axis Alignment</a> to its finish. </ol> It is the intent of this algorithm that column-direction <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①③">single-line</a> flex containers paginate very similarly to block flow. As a test of the intent, a flex container with justify-content:start and no flexible items should paginate identically to a block with in-flow children with same content, same used size and same used margins. <dt><a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①④">multi-line</a> column flex container <dd> <ol> <li> Run the flex layout algorithm with regards to pagination (limiting the flex container’s maximum line length to the space left on the page) through <a href="#cross-sizing">Cross Sizing Determination</a>. <li> Lay out as many flex lines as possible (but at least one) until there is no more room in the flex container in the cross dimension or a forced break is encountered: <ol> <li> Lay out as many consecutive flex items as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered. Forced breaks within flex items are ignored. <li> If this is the first flex container fragment, this line contains only a single flex item that is larger than the space left on the page, and the flex container is not at the top of the page already, move the flex container to the next page and restart flex container layout entirely. <li> If there are any flex items not laid out by the first step, rerun the flex layout algorithm from <a href="#main-sizing">Main Sizing Determination</a> through <a href="#cross-sizing">Cross Sizing Determination</a> using only the items not laid out on a previous line, and return to the previous step, starting from the first item not already laid out. </ol> <li> If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from <a href="#line-sizing">Line Sizing Determination</a> through <a href="#cross-sizing">Cross Sizing Determination</a> with the next page’s size and only the items not already laid out, and return to the previous step, but starting from the first item not already laid out. <li> For each fragment of the flex container, continue the flex layout algorithm from <a href="#main-alignment">Main-Axis Alignment</a> to its finish. </ol> A shortcoming of this sample algorithm is that if a flex item does not entirely fit on a single page, it will not be paginated in <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⑤">multi-line</a> column flex containers. <dt><a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①④">single-line</a> row flex container <dd> <ol> <li> Run the entire flex layout algorithm (without regards to pagination), except treat any <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑨">align-self</a> other than <a class="css" data-link-type="maybe" href="#valdef-align-items-flex-start" id="ref-for-valdef-align-items-flex-start">flex-start</a> or <a class="css" data-link-type="maybe" href="#valdef-align-items-baseline" id="ref-for-valdef-align-items-baseline①">baseline</a> as flex-start. <li> If an unbreakable item doesn’t fit within the space left on the page, and the flex container is not at the top of the page, move the flex container to the next page and restart flex container layout entirely. <li> For each item, lay out as much of its contents as will fit in the space left on the page, and fragment the remaining content onto the next page, rerunning the flex layout algorithm from <a href="#line-sizing">Line Length Determination</a> through <a href="#main-alignment">Main-Axis Alignment</a> into the new page size using all the contents (including items completed on previous pages). Any flex items that fit entirely into previous fragments still take up space in the main axis in later fragments. <li> For each fragment of the flex container, rerun the flex layout algorithm from <a href="#cross-alignment">Cross-Axis Alignment</a> to its finish. For all fragments besides the first, treat <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⓪">align-self</a> and <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑨">align-content</a> as being <a class="css" data-link-type="maybe" href="#valdef-align-items-flex-start" id="ref-for-valdef-align-items-flex-start②">flex-start</a> for all item fragments and lines. <li> If any item, when aligned according to its original <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②①">align-self</a> value into the combined <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③③">cross size</a> of all the flex container fragments, would fit entirely within a single flex container fragment, it may be shifted into that fragment and aligned appropriately. </ol> <dt><a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⑥">multi-line</a> row flex container <dd> <ol> <li> Run the flex layout algorithm (without regards to pagination), through <a href="#cross-sizing">Cross Sizing Determination</a>. <li> Lay out as many flex lines as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered. If a line doesn’t fit on the page, and the line is not at the top of the page, move the line to the next page and restart the flex layout algorithm entirely, using only the items in and following this line. If a flex item itself causes a forced break, rerun the flex layout algorithm from <a href="#main-sizing">Main Sizing Determination</a> through <a href="#main-alignment">Main-Axis Alignment</a>, using only the items on this and following lines, but with the item causing the break automatically starting a new line in the <a href="#algo-line-break">line breaking step</a>, then continue with this step. Forced breaks within flex items are ignored. <li> If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from <a href="#line-sizing">Line Length Determination</a> through <a href="#main-alignment">Main-Axis Alignment</a> with the next page’s size and only the items not already laid out. Return to the previous step, but starting from the first line not already laid out. <li> For each fragment of the flex container, continue the flex layout algorithm from <a href="#cross-alignment">Cross Axis Alignment</a> to its finish. </ol> </dl> </div> <h2 class="no-num heading settled" id="axis-mapping"> Appendix A: Axis Mappings<a class="self-link" href="#axis-mapping"></a></h2> This appendix is non-normative. <table class="data" id="axis-mapping-table-en"> <caption>Axis Mappings for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a> + <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⓪">Writing Mode</a> (e.g. English)</caption> <colgroup span="1"> <colgroup span="3"> <colgroup span="3"> <thead> <tr> <th><a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow⑥">flex-flow</a> <th><a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⑥">main axis</a> <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start③">start</a> <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end④">end</a> <th><a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis①⑨">cross axis</a> <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start④">start</a> <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end⑤">end</a> <tbody> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row④">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap②">wrap</a> <td rowspan="4">horizontal <td>left <td>right <td rowspan="4">vertical <td rowspan="2">top <td rowspan="2">bottom <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse①">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap①">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap③">wrap</a> <td>right <td>left <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row⑤">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse③">wrap-reverse</a> <td>left <td>right <td rowspan="2">bottom <td rowspan="2">top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse②">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse④">wrap-reverse</a> <td>right <td>left <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column②">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap②">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap④">wrap</a> <td rowspan="4">vertical <td>top <td>bottom <td rowspan="4">horizontal <td rowspan="2">left <td rowspan="2">right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap③">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap⑤">wrap</a> <td>bottom <td>top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column③">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse⑤">wrap-reverse</a> <td>top <td>bottom <td rowspan="2">right <td rowspan="2">left <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse①">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse⑥">wrap-reverse</a> <td>bottom <td>top </table> <table class="data" id="axis-mapping-table-fa"> <caption>Axis Mappings for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a> + <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①">horizontal-tb</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①①">Writing Mode</a> (e.g. Farsi)</caption> <colgroup span="1"> <colgroup span="3"> <colgroup span="3"> <thead> <tr> <th><a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow⑦">flex-flow</a> <th><a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⑦">main axis</a> <th><a data-link-type="dfn" href="#main-start" id="ref-for-main-start⑨">main-start</a> <th><a data-link-type="dfn" href="#main-end" id="ref-for-main-end⑨">main-end</a> <th><a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②⓪">cross axis</a> <th><a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①④">cross-start</a> <th><a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end⑨">cross-end</a> <tbody> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row⑥">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap④">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap⑥">wrap</a> <td rowspan="4">horizontal <td>right <td>left <td rowspan="4">vertical <td rowspan="2">top <td rowspan="2">bottom <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse③">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap⑤">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap⑦">wrap</a> <td>left <td>right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row⑦">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse⑦">wrap-reverse</a> <td>right <td>left <td rowspan="2">bottom <td rowspan="2">top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse④">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse⑧">wrap-reverse</a> <td>left <td>right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column④">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap⑥">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap⑧">wrap</a> <td rowspan="4">vertical <td>top <td>bottom <td rowspan="4">horizontal <td rowspan="2">right <td rowspan="2">left <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse②">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap⑦">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap⑨">wrap</a> <td>bottom <td>top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column⑤">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse⑨">wrap-reverse</a> <td>top <td>bottom <td rowspan="2">left <td rowspan="2">right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse③">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse①⓪">wrap-reverse</a> <td>bottom <td>top </table> <table class="data" id="axis-mapping-table-ja"> <caption>Axis Mappings for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a> + <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl">vertical-rl</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①②">Writing Mode</a> (e.g. Japanese)</caption> <colgroup span="1"> <colgroup span="3"> <colgroup span="3"> <thead> <tr> <th><a class="property css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow⑧">flex-flow</a> <th><a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⑧">main axis</a> <th><a data-link-type="dfn" href="#main-start" id="ref-for-main-start①⓪"><abbr title="cross-start">start</abbr></a> <th><a data-link-type="dfn" href="#main-end" id="ref-for-main-end①⓪"><abbr title="cross-end">end</abbr></a> <th><a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②①">cross axis</a> <th><a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①⑤"><abbr title="cross-start">start</abbr></a> <th><a data-link-type="dfn" href="#cross-end" id="ref-for-cross-end①⓪"><abbr title="cross-end">end</abbr></a> <tbody> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row⑧">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap⑧">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap①⓪">wrap</a> <td rowspan="4">vertical <td>top <td>bottom <td rowspan="4">horizontal <td rowspan="2">right <td rowspan="2">left <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse⑤">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap⑨">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap①①">wrap</a> <td>bottom <td>top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row⑨">row</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse①①">wrap-reverse</a> <td>top <td>bottom <td rowspan="2">left <td rowspan="2">right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse⑥">row-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse①②">wrap-reverse</a> <td>bottom <td>top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column⑥">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap①⓪">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap①②">wrap</a> <td rowspan="4">vertical <td>right <td>left <td rowspan="4">horizontal <td rowspan="2">top <td rowspan="2">bottom <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse④">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-nowrap" id="ref-for-valdef-flex-wrap-nowrap①①">nowrap</a>/<a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap" id="ref-for-valdef-flex-wrap-wrap①③">wrap</a> <td>left <td>right <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column⑦">column</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse①③">wrap-reverse</a> <td>right <td>left <td rowspan="2">bottom <td rowspan="2">top <tr> <th><a class="css" data-link-type="maybe" href="#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse⑤">column-reverse</a> + <a class="css" data-link-type="maybe" href="#valdef-flex-wrap-wrap-reverse" id="ref-for-valdef-flex-wrap-wrap-reverse①④">wrap-reverse</a> <td>left <td>right </table> <h2 class="no-num heading settled" id="webkit-aliases"> Appendix B: <code>-webkit-</code> Legacy Properties<a class="self-link" href="#webkit-aliases"></a></h2> This appendix is normative. These aliases are deprecated and authors should not use them unless their content needs to support actively-used legacy UAs. For compatibility with general Web content, UAs that are Web browsers must and other UAs may implement the following <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#legacy-name-alias" id="ref-for-legacy-name-alias">legacy name aliases</a>: <table class="data"> <thead> <tr> <th>Alias <th>Standard <tbody> <tr> <td>-webkit-align-content <td>align-content <tr> <td>-webkit-align-items <td>align-items <tr> <td>-webkit-align-self <td>align-self <tr> <td>-webkit-flex <td>flex <tr> <td>-webkit-flex-basis <td>flex-basis <tr> <td>-webkit-flex-direction <td>flex-direction <tr> <td>-webkit-flex-flow <td>flex-flow <tr> <td>-webkit-flex-grow <td>flex-grow <tr> <td>-webkit-flex-shrink <td>flex-shrink <tr> <td>-webkit-flex-wrap <td>flex-wrap <tr> <td>-webkit-justify-content <td>justify-content <tr> <td>-webkit-order <td>order </table> <h2 class="no-num heading settled" id="acknowledgments">Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> Thanks for feedback and contributions to Erik Anderson, Christian Biesinger, Tony Chang, Phil Cupp, Arron Eicholz, James Elmore, Andrew Fedoniouk, Brian Heuston, Shinichiro Hamaji, Daniel Holbert, Ben Horst, John Jansen, Brad Kemper, Kang-hao Lu, Markus Mielke, Peter Moulder, Robert O’Callahan, Christoph Päper, Ning Rogers, Peter Salas, Elliott Sprehn, Morten Stenshorne, Christian Stockwell, Ojan Vafai, Eugene Veselov, Greg Whitworth, Boris Zbarsky. <h2 class="no-num heading settled" id="changes">Changes<a class="self-link" href="#changes"></a></h2> This section documents the changes since previous publications. <h3 class="heading settled" id="changes-20181119"> Changes since the <a href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/">19 November 2018 CR</a><a class="self-link" href="#changes-20181119"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2018">Disposition of Comments</a> is available. Significant changes include: <ul> <li id="change-2018-static-pos-align-content"><a class="self-link" href="#change-2018-static-pos-align-content"></a> Use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#content-edge" id="ref-for-content-edge①">content edges</a> of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦④">flex container</a> for determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-rectangle" id="ref-for-static-position-rectangle②">static-position rectangle</a> of flex container children, rather than doing extra layout work. This will result in ignoring <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⓪">align-content</a> on the flex container, but allow <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②②">align-self</a> on the box itself to still take effect. (<a href="https://github.com/w3c/csswg-drafts/issues/5843">Issue 5843</a>, <a href="https://github.com/w3c/csswg-drafts/issues/7596">7596</a>) <li id="change-2018-correctly-ignore-auto"><a class="self-link" href="#change-2018-correctly-ignore-auto"></a> Correctly ignore <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⓪">auto</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size⑤">preferred sizes</a> in both min and max size contribution calculations. (It was accidentally omitted from the max, though it shows up correctly in the <a href="#change-2017-flex-min-contribution">changelog</a>...) (<a href="https://github.com/w3c/csswg-drafts/issues/6455">Issue 6455</a>) <li id="change-2018-move-order"><a class="self-link" href="#change-2018-move-order"></a> Moved the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⓪">order</a> property definition to <a data-link-type="biblio" href="#biblio-css-display-3" title="CSS Display Module Level 3">[CSS-DISPLAY-3]</a>. See <a href="#order-property">§ 5.4 Item Reordering: the order property</a> for remaining explanation. (<a href="https://github.com/w3c/csswg-drafts/issues/5865">Issue 5865</a>) <li id="change-2018-definite-basis-definite"> <a class="self-link" href="#change-2018-definite-basis-definite"></a> Made <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⑦">main size</a> always <a data-link-type="dfn" href="#definite" id="ref-for-definite①⑨">definite</a> for <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①①⑨">flex items</a> with a definite <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis⑨">flex basis</a>, to match implementations. (<a href="https://github.com/w3c/csswg-drafts/issues/4311">Issue 4311</a>) <blockquote> <ol> <li> If the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⑤">flex container</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite②①">definite</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⑧">main size</a>, <ins>then the post-flexing <a data-link-type="dfn" href="#main-size" id="ref-for-main-size③⑨">main sizes</a> of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⓪">flex items</a> are treated as <a data-link-type="dfn" href="#definite" id="ref-for-definite②②">definite</a></ins> <del>a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②①">flex item</a>’s post-flexing <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⓪">main size</a> is treated as <a data-link-type="dfn" href="#definite" id="ref-for-definite②③">definite</a>, even though it can rely on the indefinite sizes of any flex items in the same line</del> . <li> <ins>If a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②②">flex item’s</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⓪">flex basis</a> is <a data-link-type="dfn" href="#definite" id="ref-for-definite②⑤">definite</a>, then its post-flexing <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④①">main size</a> is also definite.</ins> </ol> </blockquote> <blockquote> <del>Note: The main size of a <a data-link-type="dfn" href="#fully-inflexible" id="ref-for-fully-inflexible①">fully inflexible</a> item with a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite②⑦">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①①">flex basis</a> is, by definition, definite.</del> <ins>Note: This means that within <a data-link-type="dfn" href="#flex-layout" id="ref-for-flex-layout②">flex layout</a>, “definite” sizes can require performing layout. This was done to allow percentages inside of <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②③">flex items</a> to resolve where authors expected them to resolve.</ins> </blockquote> <li id="change-2018-flex-column-wrap-fragmentation"><a class="self-link" href="#change-2018-flex-column-wrap-fragmentation"></a> Made the re-arrangement of <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②④">flex items</a> into independent stacks of flex lines on each page optional. (<a href="https://github.com/w3c/csswg-drafts/issues/6855">6855</a>) <li id="change-2018-bracket-range-notation"><a class="self-link" href="#change-2018-bracket-range-notation"></a> Updated value syntax in property definition tables to use newer <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation">CSS bracketed range notation</a> reflecting the prose restrictions on negative values. (Editorial.) <li id="change-2018-preferred-aspect-ratio"><a class="self-link" href="#change-2018-preferred-aspect-ratio"></a> Updated aspect ratio terminology to use the term <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio" id="ref-for-preferred-aspect-ratio⑥">preferred aspect ratio</a>, and clarify any uses that are specific to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element②">replaced elements</a>, in order to accommodate forthcoming <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio" id="ref-for-propdef-aspect-ratio">aspect-ratio</a> property. <li id="change-2018-collapsed-intrinsic-container"> <a class="self-link" href="#change-2018-collapsed-intrinsic-container"></a> Explicitly excluded <a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item⑤">collapsed flex items</a> from the <a href="#intrinsic-main-sizes">intrinsic main size calculations</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5985">Issue 5985</a>) <blockquote> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①①">max-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④②">main size</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⑥">flex container</a> is the smallest size the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⑦">flex container</a> can take while maintaining the <a href="#intrinsic-item-contributions">max-content contributions</a> of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⑤">flex items</a>, insofar as allowed by the items’ own flexibility. <ins>Considering only non-<a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item⑥">collapsed</a> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⑥">flex items</a>:</ins> </blockquote> <blockquote> However, for a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⑦">multi-line</a> container, it is simply the largest <a href="#intrinsic-item-contributions">min-content contribution</a> of all the <ins>non-<a data-link-type="dfn" href="#collapsed-flex-item" id="ref-for-collapsed-flex-item⑦">collapsed</a></ins> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⑦">flex items</a> in the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⑧">flex container</a>. </blockquote> <li id="change-2018-used-cross-size"> <a class="self-link" href="#change-2018-used-cross-size"></a> Clarified that the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②③">flex base size</a> calculations rely on the used <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③④">cross size</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/3736">Issue 3736</a>) <blockquote> … then the flex base size is calculated from its <ins>used</ins> inner cross size and the flex item’s intrinsic aspect ratio. </blockquote> <li id="change-2018-flexible-length-text"><a class="self-link" href="#change-2018-flexible-length-text"></a> Slightly restructured the prose in <a href="#resolve-flexible-lengths">§ 9.7 Resolving Flexible Lengths</a> to fix errors. (<a href="https://github.com/w3c/csswg-drafts/issues/5179">Issue 5179</a>) <li id="change-2018-cross-layout"> <a class="self-link" href="#change-2018-cross-layout"></a> Clarified that “performing layout” means using the block-level layout rules. (<a href="https://github.com/w3c/csswg-drafts/issues/5188">Issue 5188</a>) <blockquote> Determine the hypothetical cross size of each item by performing layout <ins>as if it were an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow①">in-flow</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level-box" id="ref-for-block-level-box①">block-level box</a></ins> with the used <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④③">main size</a> and the <ins>given</ins> available space … </blockquote> <li id="change-2018-cross-sizing"> <a class="self-link" href="#change-2018-cross-sizing"></a> Rewrote flex-contain cross-sizing step to depend on the rules of whatever formatting context it’s in, rather than assuming block-layout rules. (<a href="https://github.com/w3c/csswg-drafts/issues/5190">Issue 5190</a>) <blockquote> Determine the flex container’s used cross size <ins>using the rules of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#formatting-context" id="ref-for-formatting-context①">formatting context</a> in which it participates. If a content-based <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③⑤">cross size</a> is needed, use the sum of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line⑨">flex lines</a>' cross sizes.</ins> <del> <ul> <li> If the cross size property is a <a data-link-type="dfn" href="#definite" id="ref-for-definite②⑨">definite</a> size, use that, clamped by the used min and max <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③⑦">cross sizes</a> of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑦⑨">flex container</a>. <li> Otherwise, use the sum of the flex lines' cross sizes, clamped by the used min and max <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③⑧">cross sizes</a> of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⓪">flex container</a>. </ul> </del> </blockquote> <li id="change-2018-aspect-ratio-box"> <a class="self-link" href="#change-2018-aspect-ratio-box"></a> Removed explicit mention of which box to use for calculating aspect-ratio, to allow for behavior introduced by the new <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio" id="ref-for-propdef-aspect-ratio①">aspect-ratio</a> property in <a data-link-type="biblio" href="#biblio-css-sizing-4" title="CSS Box Sizing Module Level 4">[css-sizing-4]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5246/">Issue 5246</a>) <blockquote> then the flex base size is calculated from its used <del>inner</del> cross size and the flex item’s intrinsic aspect ratio. </blockquote> <li id="change-2018-auto-min-contribution"> <a class="self-link" href="#change-2018-auto-min-contribution"></a> Clarified that the <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size⑤">content-based minimum size</a> of a flex item is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution" id="ref-for-intrinsic-size-contribution①">intrinsic size contribution</a>, and thus impacted by associated rules in <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5665#issuecomment-738391191">Issue 5665</a>) <blockquote> Note: The <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size⑥">content-based minimum size</a> is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution" id="ref-for-intrinsic-size-contribution②">intrinsic size contribution</a>, and thus the provisions in <a href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"><cite>CSS Sizing 3</cite> § 5.2 Intrinsic Contributions</a> apply. </blockquote> <li id="change-2018-safe-fallback"><a class="self-link" href="#change-2018-safe-fallback"></a> Made the fallback alignment (in case of negative free space) for the space-* keywords apply safe. (<a href="https://github.com/w3c/csswg-drafts/issues/10154">Issue 10154</a>) <li id="change-2018-content-based-editorial"><a class="self-link" href="#change-2018-content-based-editorial"></a> Redrafted the definition of <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size⑦">content-based minimum size</a> for easier reading. (Editorial) <li id="change-2018-webkit-aliases"><a class="self-link" href="#change-2018-webkit-aliases"></a> Added <a href="#webkit-aliases">Appendix B: -webkit- Legacy Properties</a> to document <code>-webkit-</code> aliases of flex layout properties that are necessary for Web-compat. (<a href="https://github.com/w3c/csswg-drafts/issues/5634">Issue 5634</a>) <li id="change-2018-blockification"><a class="self-link" href="#change-2018-blockification"></a> Rephrased blockification rules in terms of <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed values</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4065">Issue 4065</a>) <li> Various minor editorial fixes and clarifications, </ul> <h3 class="heading settled" id="changes-20171016"> Changes since the 16 October 2017 CR<a class="self-link" href="#changes-20171016"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2017">Disposition of Comments</a> is also available. <ul> <li id="change-2017-margin-padding-percent"><a class="self-link" href="#change-2017-margin-padding-percent"></a> Removed the option for flex-item block-axis margins and paddings to be resolved against the block dimension; they must be resolved against the inline dimension, as for blocks. (<a href="https://github.com/w3c/csswg-drafts/issues/2085">Issue 2085</a>) <li id="change-2017-flex-min-contribution"> <a class="self-link" href="#change-2017-flex-min-contribution"></a> Floored <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⑧">flex item</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution③">min-content contribution</a> by their <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size⑥">preferred size</a> (<a href="https://github.com/w3c/csswg-drafts/issues/2353">Issue 2353</a>) and cleaned up associated wording to be more precise. <blockquote> The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution④">min-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①②⑨">flex item</a> is the larger of its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⓪">min-content size</a> <ins>and outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#preferred-size" id="ref-for-preferred-size⑦">preferred size</a> (its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⑥">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①①">height</a> as appropriate) if that is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①①">auto</a></ins> , clamped by its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②④">flex base size</a> as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its <a data-link-type="dfn" href="#min-main-size-property" id="ref-for-min-main-size-property">min</a>/<a data-link-type="dfn" href="#max-main-size-property" id="ref-for-max-main-size-property">max main size properties</a>. The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution⑦">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③⓪">flex item</a> is the larger of its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①②">max-content size</a> and <ins>outer</ins> <del>specified</del> <ins>preferred</ins> size (its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⑦">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①②">height</a> as appropriate <del>,</del> <ins>)</ins> if that is <del>definite</del> <ins>not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①②">auto</a></ins> , clamped by its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②⑤">flex base size</a> as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its <a data-link-type="dfn" href="#min-main-size-property" id="ref-for-min-main-size-property①">min</a>/<a data-link-type="dfn" href="#max-main-size-property" id="ref-for-max-main-size-property①">max main size properties</a>. </blockquote> <li id="change-2017-content-desc"> <a class="self-link" href="#change-2017-content-desc"></a> Added some (effectively informative) prose and a cross-reference to more clearly define <a class="css" data-link-type="propdesc" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①⑥">flex-basis: content</a>. <blockquote> Indicates <del>automatic sizing</del> <ins>an <a href="#algo-main-item">automatic size</a></ins> based on the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③①">flex item</a>’s content. <ins>(It is typically equivalent to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①③">max-content size</a>, but with adjustments to handle aspect ratios, intrinsic sizing constraints, and orthogonal flows; see <a href="#algo-main-item">details</a> in <a href="#layout-algorithm">§ 9 Flex Layout Algorithm</a>.)</ins> </blockquote> <li id="change-2017-min-size-auto"><a class="self-link" href="#change-2017-min-size-auto"></a> Moved the definition of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①③">auto</a> keyword for <a class="property css" data-link-type="property">min-width</a> and min-height to <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>. The definition of what an <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size③">automatic minimum size</a> for flex items is remains here. (<a href="https://github.com/w3c/csswg-drafts/issues/1920">Issue 1920</a>, <a href="https://github.com/w3c/csswg-drafts/issues/2103">Issue 2103</a>) <li id="change-2017-min-size-auto-computation"><a class="self-link" href="#change-2017-min-size-auto-computation"></a> Altered the computation of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①④">auto</a> in <a class="property css" data-link-type="property">min-width</a> and min-height such that it always computes to itself—although its <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value">resolved value</a> remains zero on CSS2 display types. (<a href="https://github.com/w3c/csswg-drafts/issues/2230">Issue 2230</a>, <a href="https://github.com/w3c/csswg-drafts/issues/2248">Issue 2248</a>) <li id="change-2017-used-min-sizes"><a class="self-link" href="#change-2017-used-min-sizes"></a> Clarified that min/max clamping is according to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used value</a> of the min/max size properties—which in the case of tables with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-table-layout-auto" id="ref-for-valdef-table-layout-auto">auto</a> layout, is floored by the table’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①①">min-content size</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2442">Issue 2442</a>) <li id="change-2017-break-propagation"> <a class="self-link" href="#change-2017-break-propagation"></a> Clarified that break propagation does not affect computed values and that <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#order-modified-document-order" id="ref-for-order-modified-document-order③">order-modified document order</a> is used. (<a href="https://github.com/w3c/csswg-drafts/issues/2614">Issue 2614</a>) <blockquote> The exact layout of a fragmented flex container is not defined in this level of Flexible Box Layout. However, breaks inside a flex container are subject to the following rules <ins>(interpreted using <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#order-modified-document-order" id="ref-for-order-modified-document-order④">order-modified document order</a>)</ins> : <ul> <li> In a row flex container, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before④">break-before</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-after" id="ref-for-propdef-break-after③">break-after</a> values on flex items are propagated to the flex line. The break-before values on the first line and the break-after values on the last line are propagated to the flex container. <ins> Note: Break propagation (like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration①">text-decoration</a> propagation) does not affect <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed values</a>. </ins> </ul> </blockquote> <li id="change-2017-auto-min-zero"> <a class="self-link" href="#change-2017-auto-min-zero"></a> Clarified that if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size④">automatic minimum size</a> resolves directly to zero rather than being a <a data-link-type="dfn" href="#content-based-minimum-size" id="ref-for-content-based-minimum-size⑧">content-based minimum size</a>, it does not cause indefiniteness. <blockquote> For the purpose of calculating an intrinsic size of the element (e.g. the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①②">min-content size</a>), <del>this value</del> <ins>a content-based minimum size</ins> causes the element’s size in that axis to become indefinite (even if e.g. its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⑧">width</a> property specifies a <a data-link-type="dfn" href="#definite" id="ref-for-definite③⓪">definite</a> size). </blockquote> <li id="change-2017-auto-min-size"><a class="self-link" href="#change-2017-auto-min-size"></a> Editorial improvements to the <a href="#min-size-auto">automatic minimum size</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2385">Issue 2385</a>) <li> Some minor editorial fixes and clarifications, including updates to vocabulary to match updates to other CSS modules. </ul> <h3 class="heading settled" id="changes-20160526"> Changes since the 26 May 2016 CR<a class="self-link" href="#changes-20160526"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160526">Disposition of Comments</a> is also available. <h4 class="heading settled" id="change-201605-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#change-201605-substantive"></a></h4> <ul> <li id="change-2016-box-sizing-basis"> <a class="self-link" href="#change-2016-box-sizing-basis"></a> To allow flex factors to actually represent absolute ratios of flex item sizes as was originally intended (see various examples), removed the flooring of content-box sizes at zero for the purpose of finding the item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②⑥">flex base size</a>, since this type of ratio requires a flex base size of zero, which would otherwise only be possible if margins, borders, and padding are also all zero. (The flooring remains in effect, alongside the min and max size constraints, in calculating the hypothetical and final sizes of the item.) (<a href="https://github.com/w3c/csswg-drafts/issues/316">Issue 316</a>) <blockquote> When determining the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②⑧">flex base size</a>, the item’s min and max main size properties are ignored (no clamping occurs). <ins>Furthermore, the sizing calculations that floor the content box size at zero when applying <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing③">box-sizing</a> are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size②⑨">flex base size</a> of zero—and hence a negative inner flex base size.)</ins> The <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size⑤">hypothetical main size</a> is the item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③①">flex base size</a> clamped according to its min and max main size properties <ins>(and flooring the content box size at zero)</ins> . </blockquote> <blockquote> Fix min/max violations. Clamp each non-frozen item’s <a data-link-type="dfn" href="#target-main-size" id="ref-for-target-main-size⑨">target main size</a> by its min and max main size properties <ins>and floor its content-box size at zero</ins> . If the item’s target main size was made smaller by this, it’s a max violation. If the item’s target main size was made larger by this, </blockquote> <li id="change-2016-max-contribution"> <a class="self-link" href="#change-2016-max-contribution"></a> To prevent empty flex items in shrink-to-fit containers from collapsing to zero even when given a specified size, the specified size is now accounted for in calculating its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution⑧">max-content contribution</a> in <a href="#intrinsic-item-contributions">§ 9.9.3 Flex Item Intrinsic Size Contributions</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/1435">Issue 1435</a>) <blockquote> The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution⑨">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③②">flex item</a> is <ins>the larger of</ins> its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①④">max-content size</a> <ins>and specified size (its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①⑨">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①③">height</a> as appropriate, if that is <a data-link-type="dfn" href="#definite" id="ref-for-definite③①">definite</a>)</ins> , clamped by its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③②">flex base size</a> as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its <a data-link-type="dfn" href="#min-main-size-property" id="ref-for-min-main-size-property②">min</a>/<a data-link-type="dfn" href="#max-main-size-property" id="ref-for-max-main-size-property②">max main size properties</a>. </blockquote> <li id="change-2016-definite-basis"> <a class="self-link" href="#change-2016-definite-basis"></a> Since at least two implementations ended up allowing percentages inside flex items with indefinite flex basis to resolve anyway, removed the condition requiring definite flex basis. (<a href="https://github.com/w3c/csswg-drafts/issues/1679">Issue 1679</a>) <blockquote> If <del>a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③③">flex item</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite③②">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①②">flex basis</a> and</del> the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧①">flex container</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite③③">definite</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④④">main size</a>, <del>its</del> <ins>a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③④">flex item</a>’s</ins> post-flexing main size is treated as definite (even though it might technically rely on the <del>sizes of <a data-link-type="dfn" href="#definite" id="ref-for-definite③⑤">indefinite</a> siblings to resolve its flexed main size</del> the indefinite sizes of any flex items in the same line). </blockquote> <li id="change-2016-align-self-as-specified"> <a class="self-link" href="#change-2016-align-self-as-specified"></a> For ease of implementation, <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto②">auto</a> value of <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②③">align-self</a> now computes to itself always. See <a href="#change-2015-align-self-auto">related previous change</a> requiring this computation for absolutely-positioned elements. (<a href="https://github.com/w3c/csswg-drafts/issues/440">Issue 440</a>, <a href="https://github.com/w3c/csswg-drafts/issues/644">Issue 644</a>) <blockquote> <table class="data"> <tbody> <tr> <th>Computed value: <td> <del><a class="css" data-link-type="value" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto③">auto</a> computes to parent’s <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑦">align-items</a> value; otherwise</del> as specified </table> … <del>On absolutely positioned elements, a value of <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto④">auto</a> computes to itself. On all other elements, a value of auto for <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②④">align-self</a> computes to the value of <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑧">align-items</a> on the element’s parent, or <a class="css" data-link-type="maybe" href="#valdef-align-items-stretch" id="ref-for-valdef-align-items-stretch①">stretch</a> if the element has no parent.</del> </blockquote> <li id="change-2016-baseline-alignment"><a class="self-link" href="#change-2016-baseline-alignment"></a> Change <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③⑤">flex items</a> in orthogonal flows and flex items without a baseline to both synthesize their alignment baseline from the flex item’s border box. (<a href="https://github.com/w3c/csswg-drafts/issues/373">Issue 373</a>) <li id="change-2016-main-cross-baseline"> <a class="self-link" href="#change-2016-main-cross-baseline"></a> Fix main/cross error in definition of <a data-link-type="dfn" href="#cross-axis-baseline" id="ref-for-cross-axis-baseline①">cross-axis baseline set</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/792">Issue 792</a>) <blockquote> Otherwise, the flex container has no first/last <del>main</del> <ins>cross</ins> -axis baseline set… </blockquote> <li id="change-2016-table-wrapper"> <a class="self-link" href="#change-2016-table-wrapper"></a> Restore accidentally-deleted text about tables as flex items. See <a href="#change-2015-anonymous-fixup">anonymous box change</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/547">Issue 547</a>) <blockquote> <ins> In the case of flex items with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①⑤">display: table</a>, the table wrapper box becomes the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①③⑧">flex item</a>, and the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①①">order</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑤">align-self</a> properties apply to it. The contents of any caption boxes contribute to the calculation of the table wrapper box’s min-content and max-content sizes. However, like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②⓪">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①④">height</a>, the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③①">flex</a> longhands apply to the table box as follows: the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area, and the table box were the flex item. </ins> </blockquote> <li id="change-2016-auto-margin-abspos"> <a class="self-link" href="#change-2016-auto-margin-abspos"></a> Clarified that auto margins are treated as zero for the purpose of calculating a absolutely-positioned flex container child’s static position. (<a href="https://github.com/w3c/csswg-drafts/issues/665">Issue 665</a>) <blockquote> For this purpose, a value of <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑥">align-self: auto</a> is treated identically to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a> <ins>, and auto margins are treated as zero</ins> . </blockquote> <li id="change-2016-floor-intrinsic-size"> <a class="self-link" href="#change-2016-floor-intrinsic-size"></a> When clamping by the <a data-link-type="dfn" href="#max-main-size-property" id="ref-for-max-main-size-property③">max main size property</a> in the <a href="#intrinsic-main-sizes">calculation of the flex container’s intrinsic size</a>, be sure to floor by the <a data-link-type="dfn" href="#min-main-size-property" id="ref-for-min-main-size-property③">min main size property</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/361">Issue 361</a>) <blockquote> Within each line, find the largest <var>max-content flex fraction</var> among all the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④①">flex items</a>. Add each item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③③">flex base size</a> to the product of its <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor①①">flex grow factor</a> (or <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor④">scaled flex shrink factor</a>, if the chosen <var>max-content flex fraction</var> was negative) and the chosen <var>max-content flex fraction</var>, then clamp that result <ins>ing item size according to</ins> <del>by</del> the max <ins>and min</ins> main size propert <del>y</del> <ins>ies</ins> . </blockquote> <li id="change-2016-abspos-no-order-fix"> <a class="self-link" href="#change-2016-abspos-no-order-fix"></a> Added missing edits for <a href="#change-2016-abspos-no-order">change</a> that made <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①②">order</a> not apply to absolutely-positioned children of a flex container. (<a href="https://github.com/w3c/csswg-drafts/issues/1439">Issue 1439</a>) <blockquote> <table class="data"> <tbody> <tr> <th>Applies to: <td> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④②">flex items</a> <del>and absolutely-positioned children of <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧②">flex containers</a></del> </table> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①③">order</a> property controls the order in which <del>children of a flex container</del> <ins>flex items</ins> appear within the flex container, by assigning them to ordinal groups. … <ins>Absolutely-positioned children of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧③">flex container</a> are treated as having <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①④">order: 0</a> for the purpose of determining their painting order relative to <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④③">flex items</a>.</ins> </blockquote> <blockquote> Unless otherwise specified by a future specification, this property has no effect on boxes that are not <del>children of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧④">flex container</a></del> <ins><a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④④">flex items</a></ins> . </blockquote> <li id="change-2016-flex-direction-baseline"> <a class="self-link" href="#change-2016-flex-direction-baseline"></a> Take <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction⑧">flex-direction</a> into account when determining first/last baseline of the flex container. (<a href="https://github.com/w3c/csswg-drafts/issues/995">Issue 995</a>) <blockquote> To this end, the baselines of a flex container are determined as follows (after reordering with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⑤">order</a> <ins>, and taking <a class="property css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction⑨">flex-direction</a> into account</ins> ): … <ol> <li> If any of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④⑤">flex items</a> on the flex container’s <del>first/last</del> <ins>startmost/endmost</ins> <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①⓪">flex line</a> <a href="#baseline-participation" id="ref-for-baseline-participation②">participate in baseline alignment</a>, the flex container’s first/last <a data-link-type="dfn" href="#main-axis-baseline" id="ref-for-main-axis-baseline②">main-axis baseline set</a> … <li> Otherwise, if the flex container has at least one <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④⑥">flex item</a>, the flex container’s first/last <a data-link-type="dfn" href="#main-axis-baseline" id="ref-for-main-axis-baseline③">main-axis baseline set</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#generate-baselines" id="ref-for-generate-baselines③">generated</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-baseline" id="ref-for-alignment-baseline⑤">alignment baseline</a> of the <del>first/last</del> <ins>startmost/endmost</ins> flex item. … <li> Otherwise, the flex container has no first/last main-axis <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-set" id="ref-for-baseline-set②">baseline set</a>, … </ol> … <ol> <li> If the flex container has at least one <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①④⑧">flex item</a>, the flex container’s first/last <a data-link-type="dfn" href="#cross-axis-baseline" id="ref-for-cross-axis-baseline②">cross-axis baseline set</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#generate-baselines" id="ref-for-generate-baselines④">generated</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-baseline" id="ref-for-alignment-baseline⑥">alignment baseline</a> of the <del>first/last</del> <ins>startmost/endmost</ins> flex item. … </ol> </blockquote> <li id="change-2016-space-between-single-line"> <a class="self-link" href="#change-2016-space-between-single-line"></a> Define <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①①">align-content: space-between</a> handling of a single <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①①">flex line</a> as equivalent to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start①">start</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/718">Issue 718</a>) <blockquote> Lines are evenly distributed in the flex container. If the leftover free-space is negative <ins>or there is only a single <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①②">flex line</a> in the flex container,</ins> this value is identical to <a class="css" data-link-type="value" href="#valdef-align-content-flex-start" id="ref-for-valdef-align-content-flex-start">flex-start</a>. </blockquote> <li id="change-2016-axis-error"><a class="self-link" href="#change-2016-axis-error"></a> Fixed error in <a href="#axis-mapping">axis mapping table</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/205">Issue 205</a>) <li id="change-2016-reword-min-auto-fix"><a class="self-link" href="#change-2016-reword-min-auto-fix"></a> Restored definition of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size⑤">automatic minimum size</a> of boxes with neither <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> nor aspect ratio, which was lost in earlier <a href="#change-2016-reword-min-auto">rewrite</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/671">Issue 671</a>) </ul> <h4 class="heading settled" id="change-201605-clarify"> Clarifications<a class="self-link" href="#change-201605-clarify"></a></h4> <ul> <li id="change-2016-main-cross-def"><a class="self-link" href="#change-2016-main-cross-def"></a> Made sure that <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⑤">main size</a> and <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size③⑨">cross size</a> are defined for <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⑤">flex containers</a> as well as for <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤⓪">flex items</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/981">Issue 981</a>) <li id="change-2016-broken-spatial-note"> <a class="self-link" href="#change-2016-broken-spatial-note"></a> Tweaked final clarifying sentence of note about spatial navigation. (<a href="https://github.com/w3c/csswg-drafts/issues/1677">Issue 1677</a>) <blockquote> User agents, including browsers, accessible technology, and extensions, may offer spatial navigation features. This section does not preclude respecting the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⑥">order</a> property when determining element ordering in such spatial navigation modes; indeed it would need to be considered for such a feature to work. <del>However a UA that uses <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⑦">order</a> in determining sequential navigation, but does not otherwise account for spatial relationships among elements (as expressed by the various layout features of CSS including and not limited to flex layout), is non-conforming.</del> <ins>But <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⑧">order</a> is not the only (or even the primary) CSS property that would need to be considered for such a spatial navigation feature. A well-implemented spatial navigation feature would need to consider all the layout features of CSS that modify spatial relationships.</ins> </blockquote> <li>Miscellaneous trivial editorial improvements. </ul> <h3 class="heading settled" id="changes-20160301"> Changes since the 1 March 2016 CR<a class="self-link" href="#changes-20160301"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301">Disposition of Comments</a> is also available. <h4 class="heading settled" id="change-201603-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#change-201603-substantive"></a></h4> <ul> <li id="change-2016-intrinsic-percentage"> <a class="self-link" href="#change-2016-intrinsic-percentage"></a> Define how percentages are handled when calculating intrinsic <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size⑥">automatic minimum sizes</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-3">Issue 3</a>) <blockquote> <ins> For the purpose of calculating an intrinsic size of the element (e.g. the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①③">min-content size</a>), this value causes the element’s size in that axis to become indefinite (even if e.g. its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②①">width</a> property specifies a <a data-link-type="dfn" href="#definite" id="ref-for-definite③⑦">definite</a> size). Note this means that percentages calculated against this size will be treated as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⑤">auto</a>. </ins> <ins>Nonetheless,</ins> although this may require an additional layout pass to re-resolve percentages in some cases, this value (like the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content①">min-content</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content①">max-content</a>, and fit-content values defined in <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>) does not prevent the resolution of percentage sizes within the item. </blockquote> <li id="change-2016-definite-indefinite"><a class="self-link" href="#change-2016-definite-indefinite"></a> Switched <a data-link-type="dfn" href="#definite" id="ref-for-definite③⑧">definite</a> and indefinite to refer to the (more correct) definitions in <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a> instead of defining them inline in this module. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-10">Issue 10</a>) <li id="change-2016-abspos-no-order"><a class="self-link" href="#change-2016-abspos-no-order"></a> Abspos children of a flexbox no longer respond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order①⑨">order</a> property. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-12">Issue 12</a>) <li id="change-2016-baseline-sets"><a class="self-link" href="#change-2016-baseline-sets"></a> Updated <a href="#flex-baselines">§ 8.5 Flex Container Baselines</a> to account for <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-set" id="ref-for-baseline-set③">baseline sets</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#last-baseline-alignment" id="ref-for-last-baseline-alignment">last-baseline alignment</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-13">Issue 13</a>)) </ul> <h4 class="heading settled" id="change-201603-clarify"> Clarifications<a class="self-link" href="#change-201603-clarify"></a></h4> <ul> <li id="change-2016-spatial-nav"> <a class="self-link" href="#change-2016-spatial-nav"></a> Clarify that spatial navigation modes are allowed to handle <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②⓪">order</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-1">Issue 1</a>) <blockquote> <ins> User agents, including browsers, accessible technology, and extensions, may offer spatial navigation features. This section does not preclude respecting the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②①">order</a> property when determining element ordering in such spatial navigation modes; indeed it would need to be considered for such a feature to work. However a UA that uses order in determining sequential navigation, but does not otherwise account for spatial relationships among elements (as expressed by the various layout features of CSS including and not limited to flex layout), is non-conforming. </ins> </blockquote> <li id="change-2016-definite-3"> <a class="self-link" href="#change-2016-definite-3"></a> Cross-reference an additional case of definiteness in <a href="#definite-sizes">§ 9.8 Definite and Indefinite Sizes</a> (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-2">Issue 2</a>) <blockquote> <ins> Once the cross size of a flex line has been determined, items in auto-sized flex containers are also considered definite for the purpose of layout; see <a href="#algo-stretch">step 11</a>. </ins> </blockquote> <li id="change-2016-auto-content-wording"> <a class="self-link" href="#change-2016-auto-content-wording"></a> Improve wording for how unresolveable percentage <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①③">flex basis</a> values transmute to <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①⓪">content</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-6">Issue 6</a>) <blockquote> For all values other than <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto③">auto</a> and <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①①">content</a> (defined above), <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①⑦">flex-basis</a> is resolved the same way as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②②">width</a> in horizontal writing modes <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, <ins>except that if a value would resolve to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⑥">auto</a> for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②③">width</a>, it instead resolves to <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①②">content</a> for <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis①⑧">flex-basis</a></ins> . For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⑥">flex container</a>); and if that containing block’s size is <a data-link-type="dfn" href="#definite" id="ref-for-definite④⓪">indefinite</a>, <del>the result is the same as a <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⑥">main size</a> of <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⑦">auto</a> (which in this case is treated as <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①③">content</a>)</del> <ins>the used value for <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②⓪">flex-basis</a> is <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①④">content</a></ins> . </blockquote> <li id="change-2016-inflexible-definite"> <a class="self-link" href="#change-2016-inflexible-definite"></a> Clarify that inflexible items with a <a data-link-type="dfn" href="#definite" id="ref-for-definite④①">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①④">flex basis</a> have a definite size. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-8">Issue 8</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-11">Issue 11</a>) <blockquote> <ins> A <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤①">flex item</a> is <a data-link-type="dfn" href="#fully-inflexible" id="ref-for-fully-inflexible②">fully inflexible</a> if both its <a class="property css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow②⓪">flex-grow</a> and <a class="property css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink⑦">flex-shrink</a> values are zero, and <a data-link-type="dfn" href="#flexible" id="ref-for-flexible">flexible</a> otherwise. </ins> </blockquote> <blockquote> <ins> The main size of a <a data-link-type="dfn" href="#fully-inflexible" id="ref-for-fully-inflexible③">fully inflexible</a> item with a <a data-link-type="dfn" href="#definite" id="ref-for-definite④③">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⑤">flex basis</a> is, by definition, definite. </ins> </blockquote> <li id="change-2016-reword-min-auto"> <a class="self-link" href="#change-2016-reword-min-auto"></a> Reworded definition of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⑧">auto</a> value to be easier to understand. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-20160301#issue-9">Issue 9</a>) <blockquote> On a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤②">flex item</a> whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow③">overflow</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a> in the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis①⑨">main axis</a>, when specified on the flex item’s main-axis min-size property, <del>the following table gives the minimum size …</del> <ins>specifies an <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size⑦">automatic minimum size</a>.</ins> <ins> In general, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size" id="ref-for-automatic-minimum-size⑧">automatic minimum size</a> … defined below: </ins> </blockquote> <li id="change-2016-clarify-staticpos"><a class="self-link" href="#change-2016-clarify-staticpos"></a> Slightly reworded the section on determining the static position of absolutely-positioned children to be clearer. <li id="change-2016-animation-type"><a class="self-link" href="#change-2016-animation-type"></a> Adjusted format of Animatable lines to be clearer about animating keywords. <li>Miscellaneous trivial editorial improvements. </ul> <h3 class="heading settled" id="changes-201505"> Changes since the 14 May 2015 LCWD<a class="self-link" href="#changes-201505"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514">Disposition of Comments</a> is also available. <h4 class="heading settled" id="change-201505-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#change-201505-substantive"></a></h4> <ul> <li id="change-2015-flex-basis-zero"> <a class="self-link" href="#change-2015-flex-basis-zero"></a> Revert <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③②">flex</a> shorthand <a href="#change-2012-flex-basis-zero">change</a> of omitted <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②①">flex-basis</a> back to 0, since that was a hacky way of solving an intrinsic size problem, and isn’t needed (and gives bad results) given a correct implementation of <a href="#intrinsic-sizes">§ 9.9 Intrinsic Sizes</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-13">Issue 13</a>) <blockquote> When omitted from the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③③">flex</a> shorthand, its specified value is 0<del>%</del>. </blockquote> <blockquote> <dl> <dt><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex③④">flex: <positive-number></a> <dd> Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex③⑤">flex: <positive-number> 1 0<del>%</del></a>. </dl> </blockquote> <li id="change-2015-anonymous-fixup"> <a class="self-link" href="#change-2015-anonymous-fixup"></a> Changed <a href="#flex-item" id="ref-for-flex-item②⓪⑤">flex item determination</a> to operate on each element directly, and not on its anonymous wrapper box, if any. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-6">Issue 6</a>) <blockquote> <ul> <li> <del><a class="property css" data-link-type="property">float</a> and clear have no effect on a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤④">flex item</a>,</del> <ins><a class="property css" data-link-type="property">float</a> and clear do not create floating or clearance of <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤⑤">flex item</a>,</ins> and do not take it out-of-flow. <del>However, the <a class="property css" data-link-type="property">float</a> property can still affect box generation by influencing the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①⑥">display</a> property’s computed value.</del> </ul> </blockquote> <blockquote> <del> Some values of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①⑦">display</a> trigger the creation of anonymous boxes around the original box. It’s the outermost box—the direct child of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⑦">flex container</a> box—that becomes a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤⑥">flex item</a>. For example, given two contiguous child elements with display: table-cell, the <a href="https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">anonymous table wrapper box generated around them</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> becomes the flex item. In the case of flex items with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①⑨">display: table</a>, the table wrapper box becomes the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑤⑧">flex item</a>, and the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②③">order</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑦">align-self</a> properties apply to it. The contents of any caption boxes contribute to the calculation of the table wrapper box’s min-content and max-content sizes. However, like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②④">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①⑤">height</a>, the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③⑥">flex</a> longhands apply to the table box as follows: the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area, and the table box were the flex item. </del> <ins> Note: Some values of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②⓪">display</a> normally trigger the creation of anonymous boxes around the original box. If such a box is a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥①">flex item</a>, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table. </ins> </blockquote> <li id="change-2015-min-auto-intrinsic-percentages"> <a class="self-link" href="#change-2015-min-auto-intrinsic-percentages"></a> Defined that any size adjustment imposed by a box’s min-width: auto is consulted when percentage-sizing any of its contents. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-3">Issue 3</a>) <blockquote> <del>In order to prevent cycling sizing, the <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto④">auto</a> value of <a class="property css" data-link-type="property">min-height</a> and max-height does not factor into the percentage size resolution of the box’s contents. For example, a percentage-height block whose flex item parent has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①⑥">height: 120em; min-height: auto</a> will size itself against height: 120em regardless of the impact that min-height might have on the used size of the flex item.</del> <ins>Although this may require an additional layout pass to re-resolve percentages in some cases, the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①⑨">auto</a> value of <a class="property css" data-link-type="property">min-width</a> and min-height (like the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content②">min-content</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content②">max-content</a>, and fit-content values defined in <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>) does not prevent the resolution of percentage sizes within the item.</ins> </blockquote> <li id="change-2015-intrinsic-items"> <a class="self-link" href="#change-2015-intrinsic-items"></a> Correct intrinsic sizing rules to handle inflexible items. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-1">Issue 1</a>) <blockquote> The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution⑤">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①⓪">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥④">flex item</a> is its outer <del><a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size⑥">hypothetical main size</a> when sized under a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint②">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint③">max-content constraint</a> (respectively)</del> <ins>The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution⑥">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①①">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥⑤">flex item</a> is its outer <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①④">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⑤">max-content size</a>, clamped by its <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③④">flex base size</a> as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its <a data-link-type="dfn" href="#min-main-size-property" id="ref-for-min-main-size-property④">min</a>/<a data-link-type="dfn" href="#max-main-size-property" id="ref-for-max-main-size-property④">max main size properties</a></ins> . </blockquote> <li id="change-2015-intrinsic-main-container"> <a class="self-link" href="#change-2015-intrinsic-main-container"></a> Correct errors in <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⑧">flex container</a> main-axis intrinsic sizing. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-1">Issue 1</a>) <blockquote> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⑥">max-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⑦">main size</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑧⑨">flex container</a> is the smallest size the flex container can take while maintaining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①②">max-content contributions</a> of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥⑥">flex items</a>: <ol> <li> For each <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥⑦">flex item</a>, subtract its <ins>outer</ins> <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③⑤">flex base size</a> from its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①③">max-content contribution</a> size <del>, then divide by its <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor①②">flex grow factor</a>, floored at 1, or by its <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor⑤">scaled flex shrink factor</a> (if the result was negative, flooring the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor⑦">flex shrink factor</a> at 1 if necessary)</del> . <ins>If that result is not zero, divide it by (if the result was positive) its <a data-link-type="dfn" href="#flex-flex-grow-factor" id="ref-for-flex-flex-grow-factor①③">flex grow factor</a> floored at 1, or (if the result was negative) by its <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor⑥">scaled flex shrink factor</a>, having floored the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor⑧">flex shrink factor</a> at 1.</ins> This is the item’s <var>max-content flex fraction</var>. </ol> </blockquote> <li id="change-2015-intrinsic-cross-container"> <a class="self-link" href="#change-2015-intrinsic-cross-container"></a> Correct errors in <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨①">flex container</a> cross-axis intrinsic sizing, and specify commonly-implemented min-content sizing heuristic for multi-line column flex containers. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-12">Issue 12</a>) <blockquote> <del> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⑤">min-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④⓪">cross size</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⑦">max-content</a> cross size of a flex container are the cross size of the flex container after performing layout into the given available <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②⓪">main-axis</a> space and infinite available <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②②">cross-axis</a> space. </del> <ins> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⑥">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⑧">max-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④③">cross size</a> of a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⑤">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨②">flex container</a> is the largest <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution⑦">min-content contribution</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①④">max-content contribution</a> (respectively) of its <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥⑧">flex items</a>. For a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⑧">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨③">flex container</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⑦">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①⑨">max-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④④">cross size</a> is the sum of the flex line cross sizes resulting from sizing the flex container under a <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②③">cross-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint③">min-content constraint</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint④">max-content constraint</a> (respectively). However, if the flex container is <a class="css" data-link-type="propdesc" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow⑨">flex-flow: column wrap;</a>, then it’s sized by first finding the largest <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution⑧">min-content</a>/max-content <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#cross-size" id="ref-for-cross-size④⑤">cross-size</a> contribution among the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑥⑨">flex items</a> (respectively), then using that size as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑤">available space</a> in the cross axis for each of the flex items during layout. This heuristic for column wrap <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨⑤">flex containers</a> gives a reasonable approximation of the size that the flex container should be, with each flex item ending up as min(<var>item’s own max-content</var>, <var>maximum min-content among all items</var>), and each <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①③">flex line</a> no larger than its largest <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦①">flex item</a>. It’s not a perfect fit in some cases, but doing it completely correct is insanely expensive, and this works reasonably well. </ins> </blockquote> <li id="change-2015-a11y-tools"> <a class="self-link" href="#change-2015-a11y-tools"></a> Add explicit conformance criteria on authoring tools to keep presentation and DOM order in sync unless author explicitly indicates a desire to make them out-of-sync. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-8">Issue 8</a>) <blockquote> <ins> In order to preserve the author’s intended ordering in all presentation modes, authoring tools—including WYSIWYG editors as well as Web-based authoring aids—must reorder the underlying document source and not use <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②④">order</a> to perform reordering unless the author has explicitly indicated that the underlying document order (which determines speech and navigation order) should be out-of-sync with the visual order. <div class="example" id="example-a11y-tools"> <a class="self-link" href="#example-a11y-tools"></a> For example, a tool might offer both drag-and-drop reordering of flex items as well as handling of media queries for alternate layouts per screen size range. Since most of the time, reordering should affect all screen ranges as well as navigation and speech order, the tool would perform drag-and-drop reordering at the DOM layer. In some cases, however, the author may want different visual orderings per screen size. The tool could offer this functionality by using <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②⑤">order</a> together with media queries, but also tie the smallest screen size’s ordering to the underlying DOM order (since this is most likely to be a logical linear presentation order) while using order to determine the visual presentation order in other size ranges. This tool would be conformant, whereas a tool that only ever used <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②⑦">order</a> to handle drag-and-drop reordering (however convenient it might be to implement it that way) would be non-conformant. </div> </ins> </blockquote> <li id="change-2015-align-self-auto"> <a class="self-link" href="#change-2015-align-self-auto"></a> Defined that an <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑧">align-self</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self</a> value of <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto⑥">auto</a> computes to itself on absolutely-positioned elements, for consistency with future extensions of these properties in <a data-link-type="biblio" href="#biblio-css-align-3" title="CSS Box Alignment Module Level 3">[CSS-ALIGN-3]</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-5">Issue 5</a>) <blockquote> <ins>On absolutely positioned elements, a value of <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto⑦">auto</a> computes to itself. On all other elements, a</ins> <del>A</del> value of <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto⑧">auto</a> for <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑨">align-self</a> computes to the value of <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑨">align-items</a> on the element’s parent, or <a class="css" data-link-type="maybe" href="#valdef-align-items-stretch" id="ref-for-valdef-align-items-stretch②">stretch</a> if the element has no parent. </blockquote> <li id="change-2015-percentage-margins"> <a class="self-link" href="#change-2015-percentage-margins"></a> Revert change to make percentage margins and padding relative to their own axes; instead allow both behaviors. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-11">Issue 11</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-16">Issue 16</a>) <blockquote> <del> Percentage margins and paddings on <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦②">flex items</a> are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block. </del> <ins> Percentage margins and paddings on <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦③">flex items</a> can be resolved against either: <ul> <li>their own axis (left/right percentages resolve against width, top/bottom resolve against height), or, <li>the inline axis (left/right/top/bottom percentages all resolve against width) </ul> A user agent must choose one of these two behaviors. Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that. Authors should avoid using percentages in paddings or margins on <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦④">flex items</a> entirely, as they will get different behavior in different browsers. </ins> </blockquote> <li id="change-2015-min-max-constraint"> <a class="self-link" href="#change-2015-min-max-constraint"></a> Handle min/max constraints in sizing flex items. <blockquote> <ul> <li> Determine the available main and cross space for the flex items. For each dimension, if that dimension of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨⑦">flex container</a>’s content box is a <a data-link-type="dfn" href="#definite" id="ref-for-definite④⑤">definite size</a>, use that; <ins>if that dimension of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container⑨⑧">flex container</a> is being sized under a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint④">min</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint⑤">max-content constraint</a>, the available space in that dimension is that constraint;</ins> otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. </ul> </blockquote> <li id="changes-2015-first-fragment"> <a class="self-link" href="#changes-2015-first-fragment"></a> Correct negation in flex container fragmentation rule: previous definition implied <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-break-inside" id="ref-for-propdef-break-inside">break-inside: avoid</a> behavior in all cases. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20150514#issue-5">Issue 5</a>) <blockquote> <ul> <li> If the first fragment of the flex container is not at the top of the page, and <del>some</del> <ins>none</ins> of its flex items <del>don’t</del> fit in the remaining space on the page, the entire fragment is moved to the next page. </ul> </blockquote> </ul> <h4 class="heading settled" id="change-201505-clarify"> Clarifications<a class="self-link" href="#change-201505-clarify"></a></h4> <ul> <li>Miscellaneous minor editorial improvements and fixes to errors in examples. </ul> <h3 class="heading settled" id="changes-201409"> Changes since the 25 September 2014 LCWD<a class="self-link" href="#changes-201409"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925">Disposition of Comments</a> is also available. <h4 class="heading settled" id="change-201409-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#change-201409-substantive"></a></h4> <ul> <li id="change-201409-content"><a class="self-link" href="#change-201409-content"></a> Reverted <a class="css" data-link-type="propdesc" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②②">flex-basis: auto</a> to its original meaning. Added flex-basis: content keyword to explicitly specify automatic content-based sizing. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-10">10</a>) <li id="change-201409-align-content-wrapping"> <a class="self-link" href="#change-201409-align-content-wrapping"></a> Made applicability of <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①②">align-content</a> depend on wrappability rather than number of resulting flex lines. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-4">4</a>) <blockquote> <del>When a flex container has multiple lines,</del> <ins>In a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container①⑨">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⓪">flex container</a> (even one with only a single line),</ins> the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④⑥">cross size</a> of each line is the minimum size necessary [...] <del>When a flex container (even a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②⓪">multi-line</a> one) has only one line,</del> <ins>In a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⑥">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪①">flex container</a>,</ins> the cross size of the line is the cross size of the flex container, and <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①③">align-content</a> has no effect. </blockquote> <blockquote> Note, this property has no effect <del>when the flex container has only a single line.</del> <ins>on a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⑦">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪②">flex container</a>.</ins> </blockquote> <blockquote> Only <del>flex containers with multiple lines</del> <ins><a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②①">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪③">flex containers</a></ins> ever have free space in the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②⑤">cross-axis</a> for lines to be aligned in, because in a <del>flex container with a single line</del> <ins><a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⑧">single-line</a> flex container</ins> the sole line automatically stretches to fill the space. </blockquote> <blockquote> If the flex container <del>has only one <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①④">flex line</a> (even if it’s a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②②">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪④">flex container</a>)</del> <ins>is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container①⑨">single-line</a></ins> and has a <a data-link-type="dfn" href="#definite" id="ref-for-definite④⑥">definite</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size④⑨">cross size</a>, the cross size of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①⑤">flex line</a> is the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⑤">flex container</a>’s inner cross size. </blockquote> <blockquote> If the flex container <del>has only one flex line (even if it’s a multi-line flex container),</del> <ins>is <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container②⓪">single-line</a>,</ins> then clamp the line’s cross-size to be within the container’s computed min and max cross-size properties. </blockquote> <li id="change-201409-algo-breaks"> <a class="self-link" href="#change-201409-algo-breaks"></a> Removed text that asserted forced breaking behavior, replaced with reference to fragmentation section. This resolves a conflict in the spec. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-18">18</a>) <blockquote> collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size, <ins>(</ins> or until a forced break is encountered <ins>, see <a href="#pagination">§ 10 Fragmenting Flex Layout</a>)</ins> . [...] <del>A break is forced wherever the CSS2.1 <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> or the CSS3 <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before⑥">break-before</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-after" id="ref-for-propdef-break-after⑤">break-after</a> <a data-link-type="biblio" href="#biblio-css3-break" title="CSS Fragmentation Module Level 3">[CSS3-BREAK]</a> properties specify a fragmentation break.</del> </blockquote> <li id="change-201409-inner-base-size"> <a class="self-link" href="#change-201409-inner-base-size"></a> Change the <a data-link-type="dfn" href="#flex-flex-shrink-factor" id="ref-for-flex-flex-shrink-factor⑨">flex shrink factor</a> to multiply by the inner (not outer) <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③⑥">flex base size</a>. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-9">9</a>) <blockquote> For every unfrozen item on the line, multiply its flex shrink factor by its <del>outer</del> <ins>inner</ins> flex base size, and note this as its <a data-link-type="dfn" href="#scaled-flex-shrink-factor" id="ref-for-scaled-flex-shrink-factor⑦">scaled flex shrink factor</a>. </blockquote> <li id="change-201409-neither"> <a class="self-link" href="#change-201409-neither"></a> Add back in missing “n” in “neither”... (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-6">6</a>) <blockquote> If the <a data-link-type="dfn" href="#cross-size-property" id="ref-for-cross-size-property①">cross size property</a> of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦⑤">flex item</a> computes to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②⓪">auto</a>, and <ins>n</ins> either of the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②⑥">cross-axis</a> margins are auto, the flex item is <a data-link-type="dfn" href="#stretched" id="ref-for-stretched①">stretched</a>. </blockquote> <li id="change-201409-flexed-definite-container"> <a class="self-link" href="#change-201409-flexed-definite-container"></a> Specify that the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⑥">flex container</a>’s <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⑧">main size</a> must also be <a data-link-type="dfn" href="#definite" id="ref-for-definite④⑦">definite</a> for a flex item’s flexed main size to be definite. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-20">20</a>) <blockquote> [If] ... the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦⑦">flex item</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite④⑨">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⑥">flex basis</a>, <ins>and the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⑦">flex container</a> has a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤⓪">definite</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size④⑨">main size</a>,</ins> the flex item’s <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤⓪">main size</a> must be treated as definite ... </blockquote> <li id="change-201409-min-auto-specified-size"> <a class="self-link" href="#change-201409-min-auto-specified-size"></a> Remove the requirement that the <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⑦">flex basis</a> be <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①⑤">content</a> for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size①">specified size</a> to be defined. The specified size should always win if it is smaller than the intrinsic size. This is particularly important to maintain author expectations for, e.g. <code><img src="…" width=40 height=40 title="100x100 image"></code>. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-25">25</a>) <blockquote> If the item’s <del>computed <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②④">flex-basis</a> is <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①⑥">content</a> and its</del> computed <a data-link-type="dfn" href="#main-size-property" id="ref-for-main-size-property④">main size property</a> is <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤②">definite</a>, then the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size②">specified size</a> is that size </blockquote> <li id="change-2014-blockify"><a class="self-link" href="#change-2014-blockify"></a> Remove the requirement that anonymous block creation (for things like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②③">display: table-cell</a>) occur before <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑦⑨">flex item</a> blockification. (Instead, all children now blockify immediately, consistent with abspos/float behavior.) </ul> <h4 class="heading settled" id="change-201409-clarify"> Clarifications<a class="self-link" href="#change-201409-clarify"></a></h4> <ul> <li id="change-201409-unclamped-size"> <a class="self-link" href="#change-201409-unclamped-size"></a> Clarify that <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③⑦">flex base size</a> is unclamped. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-21">21</a>) <blockquote> <ins>When determining the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③⑧">flex base size</a>, the item’s min and max main size properties are ignored (no clamping occurs).</ins> The <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size⑦">hypothetical main size</a> is the item’s <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size③⑨">flex base size</a> clamped according to its min and max main size properties. </blockquote> <li id="change-201409-table-wrappers"><a class="self-link" href="#change-201409-table-wrappers"></a> Restored normative status of note about table wrapper boxes normative; it had been accidentally changed in the previous draft. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-2">2</a>) <li id="change-201409-display-longhands"><a class="self-link" href="#change-201409-display-longhands"></a> Removed references to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②④">display</a> property longhands, since they will be removed from CSS Display Level 3. <li id="change-201409-layout-vs-size"> <a class="self-link" href="#change-201409-layout-vs-size"></a> Change wording to not imply an unnecessary layout pass. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140925#issue-22">22</a>) <blockquote> Otherwise, <del>lay out</del> <ins>size</ins> the item into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑥">available space</a> using its used <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⑧">flex basis</a> in place of its <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤①">main size</a>, treating a value of <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①⑦">content</a> as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content③">max-content</a>. </blockquote> <li id="change-201409-clamped-specified"><a class="self-link" href="#change-201409-clamped-specified"></a> Renamed “clamped size” to “specified size” in the definition of height: auto. <li> Various trivial fixes. </ul> <h3 class="heading settled" id="changes-201403"> Changes since the 25 March 2014 LCWD<a class="self-link" href="#changes-201403"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325">Disposition of Comments</a> is also available. <h4 class="heading settled" id="change-201403-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#change-201403-substantive"></a></h4> The following significant changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">25 March 2014 Last Call Working Draft</a> <ul> <li id="change-201403-min-auto-not"> <a class="self-link" href="#change-201403-min-auto-not"></a> Fixed errors (missing negation, unspecified axis) in definition of min-width: auto. (Issues <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-11">11</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-18">18</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-30">30</a>) <blockquote> On a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧⓪">flex item</a> whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow④">overflow</a> is <del>not</del> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible①">visible</a> <ins>in the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②①">main axis</a></ins> , </blockquote> <li id="change-201403-min-auto-ratio"> <a class="self-link" href="#change-201403-min-auto-ratio"></a> Expanded and rewrote definition of min-width: auto to add special handling of items with intrinsic ratios. (Issues <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-16">16</a> and <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-28">28</a>) <blockquote> On a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧①">flex item</a> whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑤">overflow</a> is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible②">visible</a>, <ins>the following table gives the minimum size: <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②①">[see table]</a></ins> <del>this keyword specifies as the minimum size the smaller of:</del> <del> <ul> <li>the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⑧">min-content size</a>, or <li>the computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②⑤">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①⑧">height</a>, if that value is <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤③">definite</a>. </ul> </del> </blockquote> <li id="change-201403-min-auto-main-size-basis"> <a class="self-link" href="#change-201403-min-auto-main-size-basis"></a> Adjusted min-width: auto to only apply the computed main size as a minimum in cases where the flex basis was retrieved from the main size property. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-19">19</a>) <blockquote> … is defined if <ins>the item’s computed flex-basis is <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto⑨">auto</a> and</ins> its computed main size property is definite … </blockquote> <li id="change-201403-min-auto-intrinsic-percentages"> <a class="self-link" href="#change-201403-min-auto-intrinsic-percentages"></a> Defined that any size adjustment imposed by a box’s min-width: auto is not consulted when percentage-sizing any of its contents. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-27">27</a>) This change was later reverted with an <a href="#change-2015-min-auto-intrinsic-percentages">opposite definition</a>. <blockquote> In order to prevent cycling sizing, the <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto①⓪">auto</a> value of <a class="property css" data-link-type="property">min-height</a> and max-height does not factor into the percentage size resolution of the box’s contents. For example, a percentage-height block whose flex item parent has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①⑨">height: 120em; min-height: auto</a> will size itself against height: 120em regardless of the impact that min-height might have on the used size of the flex item. </blockquote> <li id="change-201403-flex-basis-auto"><a class="self-link" href="#change-201403-flex-basis-auto"></a> Introduced extra main-size keyword to <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②⑤">flex-basis</a> so that “lookup from main-size property” and “automatic sizing” behaviors could each be explicitly specified. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-20">20</a>) This change was later reverted with an alternative proposal solving the same problem by instead introducing the <a class="css" data-link-type="maybe" href="#valdef-flex-basis-content" id="ref-for-valdef-flex-basis-content①⑧">content</a> keyword. <li id="change-201403-definite-flexing"> <a class="self-link" href="#change-201403-definite-flexing"></a> Defined <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧②">flex items</a> with a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤④">definite</a> <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis①⑨">flex basis</a> to also be definite in the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②②">main axis</a>, allowing resolution of percentage-sized children even when the item itself is flexible. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-26">26</a>) <blockquote> <ins> If a percentage is going to be resolved against a flex item’s main size, and the flex item has a definite flex basis, the main size must be treated as definite for the purpose of resolving the percentage, and the percentage must resolve against the flexed main size of the flex item (that is, after the layout algorithm below has been completed for the flex item’s flex container, and the flex item has acquired its final size). </ins> </blockquote> <li id="change-201403-clamp-single-line"> <a class="self-link" href="#change-201403-clamp-single-line"></a> Clamp a single line flexbox’s line <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤②">cross size</a> to the container’s own min/max, even when the container’s size is indefinite. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-9">9</a>) <blockquote> <ul> <li> The used cross-size of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①⑥">flex line</a> is the largest of the numbers found in the previous two steps and zero. <ins>If the flex container has only one flex line (even if it’s a multi-line flex container), then clamp the line’s cross-size to be within the container’s computed min and max cross-size properties. Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.</ins> </ul> </blockquote> <li id="change-201403-resolve-flex"><a class="self-link" href="#change-201403-resolve-flex"></a> Fixed various errors in the new <a href="#resolve-flexible-lengths">Resolving Flexible Lengths</a> section (see <a href="#change-2012-flex-continuity">March 2014 rewrite to create continuity between flex: 0 and flex: 1</a>) and reverted the editorial structure to match the old Candidate Recommendation. (Issues <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-3">3</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-4">4</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-8">8</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-10">10</a>, <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-15">15</a>) <li id="change-201403-max-intrinsic"><a class="self-link" href="#change-201403-max-intrinsic"></a> Fixed <a href="#intrinsic-sizes">max-content sizing of flex containers</a> to account for flexing behavior by normalizing per flex fraction rather than merely summing the max-content sizes of the flex items. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-39">39</a>) <li id="change-201403-flex-animation"><a class="self-link" href="#change-201403-flex-animation"></a> Updated <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③⑦">flex</a> property to accept animations always, now that the discontinuity between 0 and non-0 values has been <a href="#change-2012-flex-continuity">fixed</a>. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-5">5</a>) </ul> <h4 class="heading settled" id="change-201403-clarify"> Clarifications<a class="self-link" href="#change-201403-clarify"></a></h4> The following significant changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">25 March 2014 Last Call Working Draft</a> <ul> <li id="change-201403-css21-staticpos"> <a class="self-link" href="#change-201403-css21-staticpos"></a> Clarified how the static position of an absolutely-positioned child of a flex container is calculated by introducing an explanation of the effect more closely tied with CSS2.1 concepts and terminology. (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-12">12</a>) <blockquote> <del>Its</del> <ins>The</ins> static position <ins>of an absolutely-positioned child of a flex container</ins> is <del>calculated by first doing full flex layout without the absolutely-positioned children, then positioning each absolutely-positioned child</del> <ins>determined such that the child is positioned</ins> as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. <ins>In other words, the static position of an absolutely positioned child of a flex container is determined after flex layout by setting the child’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-rectangle" id="ref-for-static-position-rectangle③">static-position rectangle</a> to the flex container’s content box, then aligning the absolutely positioned child within this rectangle according to the <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⓪">justify-content</a> value of the flex container and the <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self③⓪">align-self</a> value of the child itself.</ins> </blockquote> <li id="change-201403-abspos-ordering"> <a class="self-link" href="#change-201403-abspos-ordering"></a> Clarified application of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②⑧">order</a> to absolutely-positioned children of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⑧">flex container</a>. (Note, this behavior was later <a href="#change-2016-abspos-no-order">rescinded</a>.) <blockquote> An absolutely-positioned child of a flex container does not participate in flex layout <del>beyond the reordering step</del> . <ins>However, it does participate in the reordering step (see <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order②⑨">order</a>), which has an effect in their painting order.</ins> </blockquote> <blockquote> The order property controls the order in which <del>flex items</del> <ins>children of a flex container</ins> appear within their flex container… Unless otherwise specified by a future specification, this property has no effect on boxes that are not <del>flex items</del> <ins>children of a flex container</ins> . </blockquote> <blockquote> <ins> Note: Absolutely-positioned children of a flex container do not participate in flex layout, but are reordered together with any flex item children. </ins> </blockquote> <li id="change-201403-clarify-stretched"> <a class="self-link" href="#change-201403-clarify-stretched"></a> Clarified what a <a data-link-type="dfn" href="#stretched" id="ref-for-stretched②">stretched</a> flex item is for the purposes of special behavior (like definiteness). (Issue <a href="https://drafts.csswg.org/css-flexbox-1/issues-lc-20140325#issue-25">25</a>) <blockquote> If the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤③">cross size</a> property of the flex item computes to auto, <ins>and either of the cross-axis margins are auto, the flex item is stretched. Its</ins> <del>its</del> used value … </blockquote> </ul> <h3 class="heading settled" id="changes-2012"> Changes since the 18 September 2012 Candidate Recommendation<a class="self-link" href="#changes-2012"></a></h3> A <a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012">Disposition of Comments</a> is also available. <h4 class="heading settled" id="changes-2014-substantive"> Substantive Changes and Bugfixes<a class="self-link" href="#changes-2014-substantive"></a></h4> The following significant changes were made since the <a href="https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">18 September 2012 Candidate Recommendation</a>: <ul> <li id="change-2012-min-width"> <a class="self-link" href="#change-2012-min-width"></a> Changed the behavior of the new <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②②">auto</a> initial value of <a class="property css" data-link-type="property">min-width</a>/min-height to <ul> <li>Take into account whether <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑥">overflow</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible③">visible</a>, since when overflow is explicitly handled, it is confusing (and unnecessary) to force enough size to show all the content. <li>Take into account the specified <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②⑥">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height②①">height</a>, so that the implied minimum is never greater than the specified size. <li>Compute to itself (not to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content③">min-content</a>) on flex items, since they are no longer equivalent (due to above changes). </ul> (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-19">Issue 19</a>) <blockquote> <dl> <dt>auto <dd> <del> When used as the value of a flex item’s min main size property, this keyword indicates a minimum of the min-content size, to help ensure that the item is large enough to fit its contents. It is intended that this will compute to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content④">min-content</a> keyword when the specification defining it (<a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>) is sufficiently mature. </del> <ins> On a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧③">flex item</a> whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑧">overflow</a> is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible④">visible</a>, this keyword specifies as the minimum size the smaller of: <ul> <li>the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①⑨">min-content size</a>, or <li>the computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②⑦">width</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height②②">height</a>, if that value is <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤⑥">definite</a>. </ul> </ins> </dl> </blockquote> <li id="change-2012-percent-margins"> <a class="self-link" href="#change-2012-percent-margins"></a> Specified that percentage margins/paddings on flex items are resolved against their respective dimensions, not the inline dimension of the containing block like blocks do. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-16">Issue 16</a>) <blockquote> <ins> Percentage margins and paddings on <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧④">flex items</a> are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block. </ins> </blockquote> <li id="change-2012-stretch-definite"> <a class="self-link" href="#change-2012-stretch-definite"></a> Pass definiteness of a single-line flex container’s size through to any stretched items. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-3">Issue 3</a>) <blockquote> <ins> As a special case for handling stretched <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧⑤">flex items</a>, if a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container②①">single-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①⓪⑨">flex container</a> has a definite <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤④">cross size</a>, the outer cross size of any flex items with <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self③①">align-self: stretch</a> is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤⑦">definite</a>. </ins> </blockquote> <li id="change-2012-stretch-auto"> <a class="self-link" href="#change-2012-stretch-auto"></a> Allow percentages inside a stretched auto-height flex item to resolve by requiring a relayout pass. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-3">Issue 3</a>) <blockquote> <ins> If the flex item has <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self③②">align-self: stretch</a>, redo layout for its contents, treating this used size as its definite <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤⑧">cross size</a> so that percentage-sized children can be resolved. Note that this step does not affect the main size of the flex item, even if it has an intrinsic aspect ratio. </ins> </blockquote> <li id="change-2012-intrinsic-ratio"> <a class="self-link" href="#change-2012-intrinsic-ratio"></a> Allow intrinsic aspect ratios to inform the <a href="#algo-main-item">main-size calculation.</a> (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-8">Issue 8</a>) <blockquote> <ins> If the flex item has ... <ul> <li>an intrinsic aspect ratio, <li>a <a data-link-type="dfn" href="#flex-flex-basis" id="ref-for-flex-flex-basis②⓪">flex basis</a> of <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②③">auto</a>, and <li>a definite <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑤⑨">cross size</a> </ul> then the <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size④⓪">flex base size</a> is calculated from its inner <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥⓪">cross size</a> and the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧⑧">flex item</a>’s intrinsic aspect ratio. </ins> </blockquote> <li id="change-2012-main-depend-cross"> <a class="self-link" href="#change-2012-main-depend-cross"></a> Define <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size⑧">hypothetical main size</a> when the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤②">main size</a> depends on the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥①">cross size</a>. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-23">Issue 23</a>) <blockquote> <ins>If a <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥②">cross size</a> is needed to determine the <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤③">main size</a> (e.g. when the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑧⑨">flex item</a>’s main size is in its block axis) and the flex item’s cross size is <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto①①">auto</a> and not <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤⑧">definite</a>, in this calculation use <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content" id="ref-for-valdef-width-fit-content">fit-content</a> as the flex item’s cross size.</ins> </blockquote> <li id="change-2012-intrinsic-sizes"> <a class="self-link" href="#change-2012-intrinsic-sizes"></a> Defined the <a href="#intrinsic-sizes">intrinsic sizes of flex containers.</a> <blockquote> Determine the main size of the flex container using its main size property. <del>In this calculation, the min content main size of the flex container is the maximum of the flex container’s items' min-content size contributions, and the max content main size of the flex container is the sum of the flex container’s items' max-content size contributions. The min-content/max-content main size contribution of an item is its outer hypothetical main size when sized under a min-content/max-content constraint (respectively).</del> For this computation, ‘auto’ margins on flex items are treated as ‘0’. </blockquote> <blockquote> <ins> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content②⓪">max-content</a> <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤⑤">main size</a> of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①⓪">flex container</a> is the sum of the flex container’s items' <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①⑤">max-content contributions</a> in the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②③">main axis</a>. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content②⓪">min-content</a> main size of a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container②②">single-line</a> flex container is the sum of the flex container’s items' <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution①⓪">min-content contributions</a> in the main axis; for a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②③">multi-line</a> container, it is the largest of those contributions. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content②①">min-content</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥⑤">cross size</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content②①">max-content</a> cross size of a flex container are the cross size of the flex container after performing layout into the given available <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②⑤">main-axis</a> space and infinite available <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②⑦">cross-axis</a> space. The main-size <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution①①">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution①⑥">max-content contribution</a> of a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨②">flex item</a> is its outer <a data-link-type="dfn" href="#hypothetical-main-size" id="ref-for-hypothetical-main-size⑨">hypothetical main size</a> when sized under a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint⑤">min-content</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint⑥">max-content constraint</a> (respectively). See <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a> for a definition of the terms in this section. </ins> </blockquote> <li id="change-2012-flex-line-bug"> <a class="self-link" href="#change-2012-flex-line-bug"></a> Correct an omission in the flex-line size determination, so a <a data-link-type="dfn" href="#single-line-flex-container" id="ref-for-single-line-flex-container②③">single-line</a> flexbox will size to its contents if it doesn’t have a definite size. <blockquote> If the flex container has only one <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①⑦">flex line</a> (even if it’s a <a data-link-type="dfn" href="#multi-line-flex-container" id="ref-for-multi-line-flex-container②④">multi-line</a> <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①①">flex container</a>) <ins>and has a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑤⑨">definite</a> <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥⑧">cross size</a></ins> , the <a data-link-type="dfn" href="#cross-size" id="ref-for-cross-size⑥⑨">cross size</a> of the flex line is the flex container’s inner cross size. </blockquote> <li id="change-2012-flex-line-floor"> <a class="self-link" href="#change-2012-flex-line-floor"></a> Flex lines have their size floored at 0. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-2">Issue 2</a>) <blockquote> The used cross-size of the flex line is the <del>larger</del> <ins>largest</ins> of the numbers found in the previous two steps <ins> and zero</ins> . </blockquote> <li id="change-2012-atomic-painting"> <a class="self-link" href="#change-2012-atomic-painting"></a> Flex items paint like inline blocks rather than blocks. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-18">Issue 18</a>) <blockquote> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨③">Flex items</a> paint exactly the same as <del>block-level elements in the normal flow</del> <ins>inline blocks <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a></ins> . </blockquote> <li id="change-2012-flex-basis-zero"> <a class="self-link" href="#change-2012-flex-basis-zero"></a> An omitted <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②⑥">flex-basis</a> component of the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③⑧">flex</a> shorthand now resolves to 0% instead of 0px. Because percentages resolved against indefinite sizes behave as <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto⑤">auto</a>, this gives better behavior in shrink-wrapped flex containers. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-20">Issue 20</a>) <blockquote> When omitted from the <a class="property css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex③⑨">flex</a> shorthand, its specified value is <ins>0%</ins> <del>the length zero</del> . </blockquote> <blockquote> <dl> <dt><a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex④⓪">flex: <positive-number></a> <dd>Equivalent to <a class="css" data-link-type="propdesc" href="#propdef-flex" id="ref-for-propdef-flex④①">flex: <positive-number> 1 <del>0px</del><ins>0%</ins></a>. </dl> </blockquote> Note: This change was <a href="#change-2015-flex-basis-zero">reverted</a>. <li id="change-2012-unresolvable-basis"> <a class="self-link" href="#change-2012-unresolvable-basis"></a> Defined that an unresolvable percentage <a data-link-type="dfn" href="#flex-base-size" id="ref-for-flex-base-size④①">flex base size</a> is treated as <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②④">auto</a>. <blockquote> percentage values of <a class="property css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②⑦">flex-basis</a> are resolved against the flex item’s containing block, i.e. its flex container, and if that containing block’s size is <a data-link-type="dfn" href="#definite" id="ref-for-definite⑥⓪">indefinite</a>, the result is <del>undefined</del> <ins>the same as a <a data-link-type="dfn" href="#main-size" id="ref-for-main-size⑤⑦">main size</a> of <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②⑤">auto</a></ins> . </blockquote> <li id="change-2012-static-pos"> <a class="self-link" href="#change-2012-static-pos"></a> Simplified the static position of abspos children of <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①③">flex containers</a> to be consistent with Grid Layout. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-6">Issue 6</a>) <blockquote> An absolutely-positioned child of a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①④">flex container</a> does not participate in flex layout beyond the reordering step. <del> However, if both <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> or both <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> are <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto①②">auto</a>, then the used value of those properties are computed from its static position, as follows: If both <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left①">left</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right①">right</a> are <a class="css" data-link-type="maybe" href="#valdef-align-items-auto" id="ref-for-valdef-align-items-auto①③">auto</a>, the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨④">flex item</a> must be positioned so that its <a data-link-type="dfn" href="#main-start" id="ref-for-main-start①①">main-start</a> or <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①⑥">cross-start</a> edge (whichever is in the horizontal axis) is aligned with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position">static position</a>. If both <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top①">top</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom①">bottom</a> are <a class="css" data-link-type="maybe" href="#valdef-flex-basis-auto" id="ref-for-valdef-flex-basis-auto⑥">auto</a>, the flex item must be positioned so that its main-start or cross-start edge (whichever is in the vertical axis) is aligned with the static position. In the <a data-link-type="dfn" href="#main-axis" id="ref-for-main-axis②⑥">main axis</a>, <ol> <li> If there is a subsequent in-flow <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨⑥">flex item</a> on the same <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line①⑨">flex line</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position②">static position</a> is the outer <a data-link-type="dfn" href="#main-start" id="ref-for-main-start①③">main-start</a> edge of that flex item. <li> Otherwise, if there is a preceding in-flow <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item①⑨⑧">flex item</a> on the same <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line②⓪">flex line</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position③">static position</a> is the outer <a data-link-type="dfn" href="#main-end" id="ref-for-main-end①①">main-end</a> edge of that flex item. <li> Otherwise, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position④">static position</a> is determined by the value of <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①①">justify-content</a> on the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①⑤">flex container</a> as if the static position were represented by a zero-sized flex item. </ol> In the <a data-link-type="dfn" href="#cross-axis" id="ref-for-cross-axis②⑧">cross axis</a>, <ol> <li> If there is a preceding in-flow <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⓪⓪">flex item</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑥">static position</a> is the <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①⑧">cross-start</a> edge of the <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line②①">flex line</a> that item is in. <li> Otherwise, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑦">static position</a> is the <a data-link-type="dfn" href="#cross-start" id="ref-for-cross-start①⑨">cross-start</a> edge of the first <a data-link-type="dfn" href="#flex-line" id="ref-for-flex-line②②">flex line</a>. </ol> The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow <a class="css" data-link-type="maybe" href="#valdef-align-items-flex-start" id="ref-for-valdef-align-items-flex-start③">flex-start</a>-aligned flex item that participates in flex layout, the primary difference being that any packing spaces due to <a class="css" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①②">justify-content: space-around</a> or justify-content: space-between are suppressed around the hypothetical item: between it and the next item if there is a real item after it, else between it and the previous item (if any) if there isn’t. </del> <ins> Its static position is calculated by first doing full flex layout without the absolutely-positioned children, then positioning each absolutely-positioned child as if it were the sole <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⓪①">flex item</a> in the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①⑥">flex container</a>, assuming both the child and the flex container were fixed size boxes of their used size. <div class="example" id="example-0e6abe14"><a class="self-link" href="#example-0e6abe14"></a> For example, by default, the static position of an absolutely positioned child aligns it to the main-start/cross-start corner, corresponding to the default values of <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①④">justify-content</a> and <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①④">align-content</a> on the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①①⑧">flex container</a>. Setting justify-content:center on the flex container, however, would center it in the main axis. </div> </ins> </blockquote> <li id="change-2012-flex-continuity"><a class="self-link" href="#change-2012-flex-continuity"></a> Changed algorithm for <a href="#resolve-flexible-lengths">resolving flexible lengths</a> to make behavior continuous as the sum of the flex factors approaches zero. (No change for a sum ≥ 1.) (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-30">Issue 30</a>) Replaces <a href="https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#resolve-flexible-lengths">this section</a> with <a href="#resolve-flexible-lengths">this one</a>. </ul> <h4 class="heading settled" id="changes-2014-clarify"> Clarifications<a class="self-link" href="#changes-2014-clarify"></a></h4> The following significant clarifications were also made: <ul> <li id="clarify-2012-abspos-items"> <a class="self-link" href="#clarify-2012-abspos-items"></a> Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion). (??) <blockquote> <table class="definition"> <tbody> <tr> <th>Name: <td>order <tr> <th>Applies to: <td> <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⓪②">flex items</a> <ins>and absolutely-positioned children of <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①②⓪">flex containers</a></ins> </table> </blockquote> <blockquote> Re-order the flex items <ins>and absolutely positioned flex container children</ins> according to their <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order③⓪">order</a>. </blockquote> <li id="clarify-2012-float-display"> <a class="self-link" href="#clarify-2012-float-display"></a> Clarified that <a class="property css" data-link-type="property">float</a> still affects the computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②⑤">display</a> (which may affect box-fixup rules that run prior to flex item determination). (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-7">Issue 7</a>) <blockquote> <a class="property css" data-link-type="property">float</a> and clear have no effect on a <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⓪③">flex item</a> <ins>, and do not take it out-of-flow. However, the <a class="property css" data-link-type="property">float</a> property can still affect box generation by influencing the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②⑥">display</a> property’s computed value.</ins> </blockquote> <li id="clarify-2012-white-space"> <a class="self-link" href="#clarify-2012-white-space"></a> Clarify what is meant by “white space”. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-26">Issue 26</a>) <blockquote> However, an anonymous flex item that contains only <a href="https://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a> <ins>(i.e. characters that can be affected by the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-white-space" id="ref-for-propdef-white-space①">white-space</a> property)</ins> is not rendered, as if it were display:none. </blockquote> <li id="clarify-2012-table-anon-boxes"><a class="self-link" href="#clarify-2012-table-anon-boxes"></a> Clarified that table anonymous box generation occurs in place of computed value conversion for internal table elements. <li id="clarify-2012-display-blockification"> <a class="self-link" href="#clarify-2012-display-blockification"></a> Clarified interaction of flex item determination with display-inside / display-outside (the new longhands of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②⑦">display</a> defined in the <a href="https://www.w3.org/TR/css-display/">CSS Display Module Level 3</a>). <blockquote> <ins> If the specified display-outside of an in-flow child of an element that generates a <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①②①">flex container</a> is inline-level, it computes to block-level. (This effectively converts any inline <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②⑧">display</a> values to their block equivalents.) </ins> </blockquote> Note: This change was <a href="#change-201409-display-longhands">reverted</a>. <li id="clarify-2012-overflow-flex-containers"><a class="self-link" href="#clarify-2012-overflow-flex-containers"></a> Clarified that <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑨">overflow</a> applies to flex containers. <li id="clarify-2012-first-line-letter"><a class="self-link" href="#clarify-2012-first-line-letter"></a> Clarified that <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line②">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter②">::first-letter</a> pseudo-elements do not apply to flex containers (because they are not block containers). <li id="clarify-2012-stretch-computed-auto"> <a class="self-link" href="#clarify-2012-stretch-computed-auto"></a> Clarify that <a class="css" data-link-type="value" href="#valdef-align-items-stretch" id="ref-for-valdef-align-items-stretch③">stretch</a> checks for the computed value of the cross-size property being <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②⑥">auto</a>, which means that percentage cross-sizes that behave as auto (because they don’t resolve against definite sizes) aren’t stretched. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-5">Issue 5</a>) <blockquote> <dl> <dt>stretch <dd> If the <a data-link-type="dfn" href="#cross-size-property" id="ref-for-cross-size-property②">cross size property</a> of the <a data-link-type="dfn" href="#flex-item" id="ref-for-flex-item②⓪④">flex item</a> <del>is</del> <ins>computes to</ins> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②⑧">auto</a>, its used value is … </dl> </blockquote> <blockquote> Determine the used cross size of each flex item. If a flex item has <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self③③">align-self: stretch</a>, its <ins>computed</ins> cross size property is <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②⑨">auto</a>, and … </blockquote> <li id="clarify-2012-flex-container-sizing"> <a class="self-link" href="#clarify-2012-flex-container-sizing"></a> Clarify that the rules of the formatting context are used for determining the flex container’s main size. <blockquote> Determine the main size of the flex container using <ins>the rules of the formatting context in which it participates</ins> <del>its main size property</del> . </blockquote> <li id="clarify-2012-painting-order"><a class="self-link" href="#clarify-2012-painting-order"></a> Clarified that <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-order" id="ref-for-propdef-order③①">order</a>-modified document order is used instead of raw document order when painting. (This was already stated in the order section, but not in the section explicitly about painting order.) <li id="clarify-2012-line-breaking"> <a class="self-link" href="#clarify-2012-line-breaking"></a> Clarified line-breaking to precisely handle negatively-sized flex items and zero-size items at the end of a line. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-1">Issue 1</a>) <blockquote> Otherwise, starting from the first uncollected item, collect <ins>consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size, or until a forced break is encountered. If the very first uncollected item wouldn’t fit, collect just it into the line</ins> <del>as many consecutive flex items as will fit or until a forced break is encountered (but collect at least one) into the flex container’s inner main size into a flex line</del> . </blockquote> <blockquote> Note that <del>items with zero main size will never start a line unless they’re the very first items in the flex container, or they’re preceded by a forced break.</del> The "collect as many" line will collect <del>them</del> <ins>zero-sized flex items</ins> onto the end of the previous line even if the last non-zero item exactly "filled up" the line. </blockquote> <li id="clarify-2012-clamping"> <a class="self-link" href="#clarify-2012-clamping"></a> Clarified that flex container cross sizes are still clamped by the flex container’s min/max properties. (<a href="https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-24">Issue 24</a>) <blockquote> <ul> <li> If the cross size property is a <a data-link-type="dfn" href="#definite" id="ref-for-definite⑥①">definite</a> size, use that, <ins>clamped by the min and max cross size properties of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①②②">flex container</a></ins> . <li> Otherwise, use the sum of the flex lines' cross sizes, <ins>clamped by the min and max cross size properties of the <a data-link-type="dfn" href="#flex-container" id="ref-for-flex-container①②③">flex container</a></ins> . </ul> </blockquote> </ul> <h2 class="heading settled" data-level="11" id="priv-sec">11. Privacy and Security Considerations<a class="self-link" href="#priv-sec"></a></h2> Flexbox introduces no new privacy leaks, or security considerations beyond "implement it correctly". <details class="wpt-tests-block" data-var-ignore dir="ltr" lang="en"> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/abspos-descendent-001.html" title="css/css-flexbox/abspos/abspos-descendent-001.html">abspos-descendent-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/abspos-descendent-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/abspos-descendent-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html">flex-abspos-staticpos-align-content-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html">flex-abspos-staticpos-align-self-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html">flex-abspos-staticpos-align-self-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html">flex-abspos-staticpos-align-self-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html">flex-abspos-staticpos-align-self-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html">flex-abspos-staticpos-align-self-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html">flex-abspos-staticpos-align-self-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html">flex-abspos-staticpos-align-self-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html">flex-abspos-staticpos-align-self-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html">flex-abspos-staticpos-align-self-rtl-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html">flex-abspos-staticpos-align-self-rtl-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html">flex-abspos-staticpos-align-self-rtl-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html">flex-abspos-staticpos-align-self-rtl-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html">flex-abspos-staticpos-align-self-safe-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html">flex-abspos-staticpos-align-self-vertWM-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html">flex-abspos-staticpos-align-self-vertWM-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html">flex-abspos-staticpos-align-self-vertWM-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html">flex-abspos-staticpos-align-self-vertWM-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html">flex-abspos-staticpos-fallback-justify-content-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html">flex-abspos-staticpos-justify-content-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html">flex-abspos-staticpos-justify-content-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html">flex-abspos-staticpos-justify-content-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html">flex-abspos-staticpos-justify-content-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html">flex-abspos-staticpos-justify-content-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html">flex-abspos-staticpos-justify-content-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html">flex-abspos-staticpos-justify-content-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html">flex-abspos-staticpos-justify-content-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html">flex-abspos-staticpos-justify-content-rtl-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html">flex-abspos-staticpos-justify-content-rtl-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html">flex-abspos-staticpos-justify-content-vertWM-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html">flex-abspos-staticpos-justify-content-vertWM-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html">flex-abspos-staticpos-justify-self-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html">flex-abspos-staticpos-margin-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html">flex-abspos-staticpos-margin-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html" title="css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html">flex-abspos-staticpos-margin-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flexbox-abspos-child-001a.html" title="css/css-flexbox/abspos/flexbox-abspos-child-001a.html">flexbox-abspos-child-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flexbox-abspos-child-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flexbox-abspos-child-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flexbox-abspos-child-001b.html" title="css/css-flexbox/abspos/flexbox-abspos-child-001b.html">flexbox-abspos-child-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flexbox-abspos-child-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flexbox-abspos-child-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flexbox-abspos-child-002.html" title="css/css-flexbox/abspos/flexbox-abspos-child-002.html">flexbox-abspos-child-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flexbox-abspos-child-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flexbox-abspos-child-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flexbox_absolute-atomic.html" title="css/css-flexbox/abspos/flexbox_absolute-atomic.html">flexbox_absolute-atomic.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flexbox_absolute-atomic.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flexbox_absolute-atomic.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/flexbox_inline-abspos.html" title="css/css-flexbox/abspos/flexbox_inline-abspos.html">flexbox_inline-abspos.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/flexbox_inline-abspos.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/flexbox_inline-abspos.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-001.html" title="css/css-flexbox/abspos/position-absolute-001.html">position-absolute-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-002.html" title="css/css-flexbox/abspos/position-absolute-002.html">position-absolute-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-003.html" title="css/css-flexbox/abspos/position-absolute-003.html">position-absolute-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-004.html" title="css/css-flexbox/abspos/position-absolute-004.html">position-absolute-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-005.html" title="css/css-flexbox/abspos/position-absolute-005.html">position-absolute-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-006.html" title="css/css-flexbox/abspos/position-absolute-006.html">position-absolute-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-007.html" title="css/css-flexbox/abspos/position-absolute-007.html">position-absolute-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-008.html" title="css/css-flexbox/abspos/position-absolute-008.html">position-absolute-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-009.html" title="css/css-flexbox/abspos/position-absolute-009.html">position-absolute-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-010.html" title="css/css-flexbox/abspos/position-absolute-010.html">position-absolute-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-011.html" title="css/css-flexbox/abspos/position-absolute-011.html">position-absolute-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-012.html" title="css/css-flexbox/abspos/position-absolute-012.html">position-absolute-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-013.html" title="css/css-flexbox/abspos/position-absolute-013.html">position-absolute-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-014.html" title="css/css-flexbox/abspos/position-absolute-014.html">position-absolute-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-015.html" title="css/css-flexbox/abspos/position-absolute-015.html">position-absolute-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-containing-block-001.html" title="css/css-flexbox/abspos/position-absolute-containing-block-001.html">position-absolute-containing-block-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-containing-block-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-containing-block-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/abspos/position-absolute-containing-block-002.html" title="css/css-flexbox/abspos/position-absolute-containing-block-002.html">position-absolute-containing-block-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/abspos/position-absolute-containing-block-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/abspos/position-absolute-containing-block-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-baseline.html" title="css/css-flexbox/align-baseline.html">align-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-horiz-001a.html" title="css/css-flexbox/align-content-horiz-001a.html">align-content-horiz-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-horiz-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-horiz-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-horiz-001b.html" title="css/css-flexbox/align-content-horiz-001b.html">align-content-horiz-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-horiz-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-horiz-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-horiz-002.html" title="css/css-flexbox/align-content-horiz-002.html">align-content-horiz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-horiz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-horiz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-vert-001a.html" title="css/css-flexbox/align-content-vert-001a.html">align-content-vert-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-vert-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-vert-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-vert-001b.html" title="css/css-flexbox/align-content-vert-001b.html">align-content-vert-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-vert-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-vert-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-vert-002.html" title="css/css-flexbox/align-content-vert-002.html">align-content-vert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-vert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-vert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wmvert-001.html" title="css/css-flexbox/align-content-wmvert-001.html">align-content-wmvert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wmvert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wmvert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wrap-001.html" title="css/css-flexbox/align-content-wrap-001.html">align-content-wrap-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wrap-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wrap-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wrap-002.html" title="css/css-flexbox/align-content-wrap-002.html">align-content-wrap-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wrap-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wrap-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wrap-003.html" title="css/css-flexbox/align-content-wrap-003.html">align-content-wrap-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wrap-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wrap-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wrap-004.html" title="css/css-flexbox/align-content-wrap-004.html">align-content-wrap-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wrap-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wrap-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content-wrap-005.html" title="css/css-flexbox/align-content-wrap-005.html">align-content-wrap-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content-wrap-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content-wrap-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_center.html" title="css/css-flexbox/align-content_center.html">align-content_center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_flex-end.html" title="css/css-flexbox/align-content_flex-end.html">align-content_flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_flex-start.html" title="css/css-flexbox/align-content_flex-start.html">align-content_flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_space-around.html" title="css/css-flexbox/align-content_space-around.html">align-content_space-around.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_space-around.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_space-around.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_space-between.html" title="css/css-flexbox/align-content_space-between.html">align-content_space-between.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_space-between.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_space-between.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-content_stretch.html" title="css/css-flexbox/align-content_stretch.html">align-content_stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-content_stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-content_stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-007.html" title="css/css-flexbox/align-items-007.html">align-items-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-008.html" title="css/css-flexbox/align-items-008.html">align-items-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-009.html" title="css/css-flexbox/align-items-009.html">align-items-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-baseline-column-horz.html" title="css/css-flexbox/align-items-baseline-column-horz.html">align-items-baseline-column-horz.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-baseline-column-horz.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-baseline-column-horz.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-baseline-column-vert.html" title="css/css-flexbox/align-items-baseline-column-vert.html">align-items-baseline-column-vert.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-baseline-column-vert.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-baseline-column-vert.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-baseline-overflow-non-visible.html" title="css/css-flexbox/align-items-baseline-overflow-non-visible.html">align-items-baseline-overflow-non-visible.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-baseline-overflow-non-visible.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-baseline-overflow-non-visible.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-baseline-row-horz.html" title="css/css-flexbox/align-items-baseline-row-horz.html">align-items-baseline-row-horz.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-baseline-row-horz.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-baseline-row-horz.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-items-baseline-row-vert.html" title="css/css-flexbox/align-items-baseline-row-vert.html">align-items-baseline-row-vert.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-items-baseline-row-vert.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-items-baseline-row-vert.html">(source)</a> <li class="wpt-test">align-self-006.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-006.html">(source)</a> <li class="wpt-test">align-self-010.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-014.html" title="css/css-flexbox/align-self-014.html">align-self-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/align-self-015.html" title="css/css-flexbox/align-self-015.html">align-self-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/align-self-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/align-self-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-001.html" title="css/css-flexbox/alignment/flex-align-baseline-001.html">flex-align-baseline-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-002.html" title="css/css-flexbox/alignment/flex-align-baseline-002.html">flex-align-baseline-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-003.html" title="css/css-flexbox/alignment/flex-align-baseline-003.html">flex-align-baseline-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-004.html" title="css/css-flexbox/alignment/flex-align-baseline-004.html">flex-align-baseline-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-005.html" title="css/css-flexbox/alignment/flex-align-baseline-005.html">flex-align-baseline-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-006.html" title="css/css-flexbox/alignment/flex-align-baseline-006.html">flex-align-baseline-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-007.html" title="css/css-flexbox/alignment/flex-align-baseline-007.html">flex-align-baseline-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html" title="css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html">flex-align-baseline-fieldset-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html" title="css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html">flex-align-baseline-fieldset-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html" title="css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html">flex-align-baseline-fieldset-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-flex-001.html" title="css/css-flexbox/alignment/flex-align-baseline-flex-001.html">flex-align-baseline-flex-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-flex-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-flex-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-flex-002.html" title="css/css-flexbox/alignment/flex-align-baseline-flex-002.html">flex-align-baseline-flex-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-flex-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-flex-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-flex-003.html" title="css/css-flexbox/alignment/flex-align-baseline-flex-003.html">flex-align-baseline-flex-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-flex-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-flex-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-flex-004.html" title="css/css-flexbox/alignment/flex-align-baseline-flex-004.html">flex-align-baseline-flex-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-flex-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-flex-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-001.html" title="css/css-flexbox/alignment/flex-align-baseline-grid-001.html">flex-align-baseline-grid-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-grid-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-grid-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-002.html" title="css/css-flexbox/alignment/flex-align-baseline-grid-002.html">flex-align-baseline-grid-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-grid-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-grid-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-003.html" title="css/css-flexbox/alignment/flex-align-baseline-grid-003.html">flex-align-baseline-grid-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-grid-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-grid-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html" title="css/css-flexbox/alignment/flex-align-baseline-multicol-001.html">flex-align-baseline-multicol-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html" title="css/css-flexbox/alignment/flex-align-baseline-multicol-002.html">flex-align-baseline-multicol-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html" title="css/css-flexbox/alignment/flex-align-baseline-multicol-003.html">flex-align-baseline-multicol-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html" title="css/css-flexbox/alignment/flex-align-baseline-overflow-001.html">flex-align-baseline-overflow-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html" title="css/css-flexbox/alignment/flex-align-baseline-overflow-002.html">flex-align-baseline-overflow-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html" title="css/css-flexbox/alignment/flex-align-baseline-overflow-003.html">flex-align-baseline-overflow-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-table-001.html" title="css/css-flexbox/alignment/flex-align-baseline-table-001.html">flex-align-baseline-table-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-table-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-table-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-table-002.html" title="css/css-flexbox/alignment/flex-align-baseline-table-002.html">flex-align-baseline-table-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-table-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-table-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-table-003.html" title="css/css-flexbox/alignment/flex-align-baseline-table-003.html">flex-align-baseline-table-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-table-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/alignment/flex-align-baseline-table-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-composition.html" title="css/css-flexbox/animation/flex-basis-composition.html">flex-basis-composition.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/animation/flex-basis-composition.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/animation/flex-basis-composition.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-interpolation.html" title="css/css-flexbox/animation/flex-basis-interpolation.html">flex-basis-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/animation/flex-basis-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/animation/flex-basis-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/animation/flex-grow-interpolation.html" title="css/css-flexbox/animation/flex-grow-interpolation.html">flex-grow-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/animation/flex-grow-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/animation/flex-grow-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/animation/flex-shrink-interpolation.html" title="css/css-flexbox/animation/flex-shrink-interpolation.html">flex-shrink-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/animation/flex-shrink-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/animation/flex-shrink-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/animation/order-interpolation.html" title="css/css-flexbox/animation/order-interpolation.html">order-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/animation/order-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/animation/order-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/anonymous-block.html" title="css/css-flexbox/anonymous-block.html">anonymous-block.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/anonymous-block.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/anonymous-block.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-001.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-001.html">aspect-ratio-intrinsic-size-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-002.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-002.html">aspect-ratio-intrinsic-size-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-003.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-003.html">aspect-ratio-intrinsic-size-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-004.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-004.html">aspect-ratio-intrinsic-size-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-005.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-005.html">aspect-ratio-intrinsic-size-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-006.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-006.html">aspect-ratio-intrinsic-size-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/aspect-ratio-intrinsic-size-007.html" title="css/css-flexbox/aspect-ratio-intrinsic-size-007.html">aspect-ratio-intrinsic-size-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/aspect-ratio-intrinsic-size-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/aspect-ratio-intrinsic-size-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/auto-height-column-with-border-and-padding.html" title="css/css-flexbox/auto-height-column-with-border-and-padding.html">auto-height-column-with-border-and-padding.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/auto-height-column-with-border-and-padding.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/auto-height-column-with-border-and-padding.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/auto-height-with-flex.html" title="css/css-flexbox/auto-height-with-flex.html">auto-height-with-flex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/auto-height-with-flex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/auto-height-with-flex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/auto-margins-002.html" title="css/css-flexbox/auto-margins-002.html">auto-margins-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/auto-margins-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/auto-margins-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/auto-margins-003.html" title="css/css-flexbox/auto-margins-003.html">auto-margins-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/auto-margins-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/auto-margins-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/baseline-synthesis-001.html" title="css/css-flexbox/baseline-synthesis-001.html">baseline-synthesis-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/baseline-synthesis-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/baseline-synthesis-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/baseline-synthesis-002.html" title="css/css-flexbox/baseline-synthesis-002.html">baseline-synthesis-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/baseline-synthesis-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/baseline-synthesis-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/baseline-synthesis-003.html" title="css/css-flexbox/baseline-synthesis-003.html">baseline-synthesis-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/baseline-synthesis-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/baseline-synthesis-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/baseline-synthesis-004.html" title="css/css-flexbox/baseline-synthesis-004.html">baseline-synthesis-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/baseline-synthesis-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/baseline-synthesis-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/box-sizing-001.html" title="css/css-flexbox/box-sizing-001.html">box-sizing-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/box-sizing-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/box-sizing-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/box-sizing-min-max-sizes-001.html" title="css/css-flexbox/box-sizing-min-max-sizes-001.html">box-sizing-min-max-sizes-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/box-sizing-min-max-sizes-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/box-sizing-min-max-sizes-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/break-nested-float-in-flex-item-001-print.html" title="css/css-flexbox/break-nested-float-in-flex-item-001-print.html">break-nested-float-in-flex-item-001-print.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/break-nested-float-in-flex-item-001-print.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/break-nested-float-in-flex-item-001-print.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/break-nested-float-in-flex-item-002-print.html" title="css/css-flexbox/break-nested-float-in-flex-item-002-print.html">break-nested-float-in-flex-item-002-print.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/break-nested-float-in-flex-item-002-print.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/break-nested-float-in-flex-item-002-print.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/canvas-contain-size.html" title="css/css-flexbox/canvas-contain-size.html">canvas-contain-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/canvas-contain-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/canvas-contain-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/canvas-dynamic-change-001.html" title="css/css-flexbox/canvas-dynamic-change-001.html">canvas-dynamic-change-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/canvas-dynamic-change-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/canvas-dynamic-change-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/change-column-flex-width.html" title="css/css-flexbox/change-column-flex-width.html">change-column-flex-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/change-column-flex-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/change-column-flex-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/column-flex-child-with-overflow-scroll.html" title="css/css-flexbox/column-flex-child-with-overflow-scroll.html">column-flex-child-with-overflow-scroll.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/column-flex-child-with-overflow-scroll.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/column-flex-child-with-overflow-scroll.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html" title="css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html">column-intrinsic-size-aspect-ratio-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/column-reverse-gap.html" title="css/css-flexbox/column-reverse-gap.html">column-reverse-gap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/column-reverse-gap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/column-reverse-gap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/columns-height-set-via-top-bottom.html" title="css/css-flexbox/columns-height-set-via-top-bottom.html">columns-height-set-via-top-bottom.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/columns-height-set-via-top-bottom.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/columns-height-set-via-top-bottom.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html" title="css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html">contain-size-layout-abspos-flex-container-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/content-height-with-scrollbars.html" title="css/css-flexbox/content-height-with-scrollbars.html">content-height-with-scrollbars.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/content-height-with-scrollbars.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/content-height-with-scrollbars.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/cross-axis-scrollbar.html" title="css/css-flexbox/cross-axis-scrollbar.html">cross-axis-scrollbar.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/cross-axis-scrollbar.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/cross-axis-scrollbar.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html" title="css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html">css-flexbox-row-reverse-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row-reverse-wrap.html" title="css/css-flexbox/css-flexbox-row-reverse-wrap.html">css-flexbox-row-reverse-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row-reverse-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row-reverse-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row-reverse.html" title="css/css-flexbox/css-flexbox-row-reverse.html">css-flexbox-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row-wrap-reverse.html" title="css/css-flexbox/css-flexbox-row-wrap-reverse.html">css-flexbox-row-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row-wrap.html" title="css/css-flexbox/css-flexbox-row-wrap.html">css-flexbox-row-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-row.html" title="css/css-flexbox/css-flexbox-row.html">css-flexbox-row.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-row.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-row.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/css-flexbox-test1.html" title="css/css-flexbox/css-flexbox-test1.html">css-flexbox-test1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/css-flexbox-test1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/css-flexbox-test1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-baseline-change-nested.html" title="css/css-flexbox/dynamic-baseline-change-nested.html">dynamic-baseline-change-nested.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-baseline-change-nested.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-baseline-change-nested.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-baseline-change.html" title="css/css-flexbox/dynamic-baseline-change.html">dynamic-baseline-change.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-baseline-change.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-baseline-change.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-bsize-change.html" title="css/css-flexbox/dynamic-bsize-change.html">dynamic-bsize-change.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-bsize-change.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-bsize-change.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-change-simplified-layout-002.html" title="css/css-flexbox/dynamic-change-simplified-layout-002.html">dynamic-change-simplified-layout-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-change-simplified-layout-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-change-simplified-layout-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-change-simplified-layout.html" title="css/css-flexbox/dynamic-change-simplified-layout.html">dynamic-change-simplified-layout.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-change-simplified-layout.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-change-simplified-layout.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-grid-flex-abspos.html" title="css/css-flexbox/dynamic-grid-flex-abspos.html">dynamic-grid-flex-abspos.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-grid-flex-abspos.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-grid-flex-abspos.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-isize-change-001.html" title="css/css-flexbox/dynamic-isize-change-001.html">dynamic-isize-change-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-isize-change-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-isize-change-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-isize-change-002.html" title="css/css-flexbox/dynamic-isize-change-002.html">dynamic-isize-change-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-isize-change-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-isize-change-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-isize-change-003.html" title="css/css-flexbox/dynamic-isize-change-003.html">dynamic-isize-change-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-isize-change-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-isize-change-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-isize-change-004.html" title="css/css-flexbox/dynamic-isize-change-004.html">dynamic-isize-change-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-isize-change-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-isize-change-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/dynamic-stretch-change.html" title="css/css-flexbox/dynamic-stretch-change.html">dynamic-stretch-change.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/dynamic-stretch-change.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/dynamic-stretch-change.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fieldset-as-item-dynamic.html" title="css/css-flexbox/fieldset-as-item-dynamic.html">fieldset-as-item-dynamic.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fieldset-as-item-dynamic.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fieldset-as-item-dynamic.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fieldset-as-item-overflow.html" title="css/css-flexbox/fieldset-as-item-overflow.html">fieldset-as-item-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fieldset-as-item-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fieldset-as-item-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fieldset-baseline-alignment.html" title="css/css-flexbox/fieldset-baseline-alignment.html">fieldset-baseline-alignment.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fieldset-baseline-alignment.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fieldset-baseline-alignment.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fit-content-item-001.html" title="css/css-flexbox/fit-content-item-001.html">fit-content-item-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fit-content-item-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fit-content-item-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fit-content-item-002.html" title="css/css-flexbox/fit-content-item-002.html">fit-content-item-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fit-content-item-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fit-content-item-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fit-content-item-003.html" title="css/css-flexbox/fit-content-item-003.html">fit-content-item-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fit-content-item-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fit-content-item-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fit-content-item-004.html" title="css/css-flexbox/fit-content-item-004.html">fit-content-item-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fit-content-item-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fit-content-item-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html" title="css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html">fixed-table-layout-with-percentage-width-in-flex-item.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html" title="css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html">fixedpos-video-in-abspos-quirk-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-align-content-center.html" title="css/css-flexbox/flex-align-content-center.html">flex-align-content-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-align-content-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-align-content-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-align-content-end.html" title="css/css-flexbox/flex-align-content-end.html">flex-align-content-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-align-content-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-align-content-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-align-content-space-around.html" title="css/css-flexbox/flex-align-content-space-around.html">flex-align-content-space-around.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-align-content-space-around.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-align-content-space-around.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-align-content-space-between.html" title="css/css-flexbox/flex-align-content-space-between.html">flex-align-content-space-between.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-align-content-space-between.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-align-content-space-between.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-align-content-start.html" title="css/css-flexbox/flex-align-content-start.html">flex-align-content-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-align-content-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-align-content-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-001.html" title="css/css-flexbox/flex-aspect-ratio-img-column-001.html">flex-aspect-ratio-img-column-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-002.html" title="css/css-flexbox/flex-aspect-ratio-img-column-002.html">flex-aspect-ratio-img-column-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-003.html" title="css/css-flexbox/flex-aspect-ratio-img-column-003.html">flex-aspect-ratio-img-column-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-004.html" title="css/css-flexbox/flex-aspect-ratio-img-column-004.html">flex-aspect-ratio-img-column-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-005.html" title="css/css-flexbox/flex-aspect-ratio-img-column-005.html">flex-aspect-ratio-img-column-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-006.html" title="css/css-flexbox/flex-aspect-ratio-img-column-006.html">flex-aspect-ratio-img-column-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-007.html" title="css/css-flexbox/flex-aspect-ratio-img-column-007.html">flex-aspect-ratio-img-column-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-008.html" title="css/css-flexbox/flex-aspect-ratio-img-column-008.html">flex-aspect-ratio-img-column-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-009.html" title="css/css-flexbox/flex-aspect-ratio-img-column-009.html">flex-aspect-ratio-img-column-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-010.html" title="css/css-flexbox/flex-aspect-ratio-img-column-010.html">flex-aspect-ratio-img-column-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-011.html" title="css/css-flexbox/flex-aspect-ratio-img-column-011.html">flex-aspect-ratio-img-column-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-012.html" title="css/css-flexbox/flex-aspect-ratio-img-column-012.html">flex-aspect-ratio-img-column-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-013.html" title="css/css-flexbox/flex-aspect-ratio-img-column-013.html">flex-aspect-ratio-img-column-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-014.html" title="css/css-flexbox/flex-aspect-ratio-img-column-014.html">flex-aspect-ratio-img-column-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-015.html" title="css/css-flexbox/flex-aspect-ratio-img-column-015.html">flex-aspect-ratio-img-column-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-016.html" title="css/css-flexbox/flex-aspect-ratio-img-column-016.html">flex-aspect-ratio-img-column-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-017.html" title="css/css-flexbox/flex-aspect-ratio-img-column-017.html">flex-aspect-ratio-img-column-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-column-018.html" title="css/css-flexbox/flex-aspect-ratio-img-column-018.html">flex-aspect-ratio-img-column-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-column-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-001.html" title="css/css-flexbox/flex-aspect-ratio-img-row-001.html">flex-aspect-ratio-img-row-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-002.html" title="css/css-flexbox/flex-aspect-ratio-img-row-002.html">flex-aspect-ratio-img-row-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-003.html" title="css/css-flexbox/flex-aspect-ratio-img-row-003.html">flex-aspect-ratio-img-row-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-004.html" title="css/css-flexbox/flex-aspect-ratio-img-row-004.html">flex-aspect-ratio-img-row-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-005.html" title="css/css-flexbox/flex-aspect-ratio-img-row-005.html">flex-aspect-ratio-img-row-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-006.html" title="css/css-flexbox/flex-aspect-ratio-img-row-006.html">flex-aspect-ratio-img-row-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-007.html" title="css/css-flexbox/flex-aspect-ratio-img-row-007.html">flex-aspect-ratio-img-row-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-008.html" title="css/css-flexbox/flex-aspect-ratio-img-row-008.html">flex-aspect-ratio-img-row-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-009.html" title="css/css-flexbox/flex-aspect-ratio-img-row-009.html">flex-aspect-ratio-img-row-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-010.html" title="css/css-flexbox/flex-aspect-ratio-img-row-010.html">flex-aspect-ratio-img-row-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-011.html" title="css/css-flexbox/flex-aspect-ratio-img-row-011.html">flex-aspect-ratio-img-row-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-012.html" title="css/css-flexbox/flex-aspect-ratio-img-row-012.html">flex-aspect-ratio-img-row-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-013.html" title="css/css-flexbox/flex-aspect-ratio-img-row-013.html">flex-aspect-ratio-img-row-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-014.html" title="css/css-flexbox/flex-aspect-ratio-img-row-014.html">flex-aspect-ratio-img-row-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-015.html" title="css/css-flexbox/flex-aspect-ratio-img-row-015.html">flex-aspect-ratio-img-row-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-aspect-ratio-img-row-016.html" title="css/css-flexbox/flex-aspect-ratio-img-row-016.html">flex-aspect-ratio-img-row-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-aspect-ratio-img-row-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-aspect-ratio-img-row-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-001.html" title="css/css-flexbox/flex-basis-001.html">flex-basis-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-002.html" title="css/css-flexbox/flex-basis-002.html">flex-basis-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-003.html" title="css/css-flexbox/flex-basis-003.html">flex-basis-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-004.html" title="css/css-flexbox/flex-basis-004.html">flex-basis-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-005.html" title="css/css-flexbox/flex-basis-005.html">flex-basis-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-006.html" title="css/css-flexbox/flex-basis-006.html">flex-basis-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-007.html" title="css/css-flexbox/flex-basis-007.html">flex-basis-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-008.html" title="css/css-flexbox/flex-basis-008.html">flex-basis-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-009.html" title="css/css-flexbox/flex-basis-009.html">flex-basis-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-010.html" title="css/css-flexbox/flex-basis-010.html">flex-basis-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-011.html" title="css/css-flexbox/flex-basis-011.html">flex-basis-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-012.html" title="css/css-flexbox/flex-basis-012.html">flex-basis-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-intrinsics-001.html" title="css/css-flexbox/flex-basis-intrinsics-001.html">flex-basis-intrinsics-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-intrinsics-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-intrinsics-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-basis-item-margins-001.html" title="css/css-flexbox/flex-basis-item-margins-001.html">flex-basis-item-margins-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-basis-item-margins-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-basis-item-margins-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-box-wrap.html" title="css/css-flexbox/flex-box-wrap.html">flex-box-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-box-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-box-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-child-percent-basis-resize-1.html" title="css/css-flexbox/flex-child-percent-basis-resize-1.html">flex-child-percent-basis-resize-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-child-percent-basis-resize-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-child-percent-basis-resize-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-column-relayout-assert.html" title="css/css-flexbox/flex-column-relayout-assert.html">flex-column-relayout-assert.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-column-relayout-assert.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-column-relayout-assert.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-container-margin.html" title="css/css-flexbox/flex-container-margin.html">flex-container-margin.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-container-margin.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-container-margin.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-container-max-content-001.html" title="css/css-flexbox/flex-container-max-content-001.html">flex-container-max-content-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-container-max-content-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-container-max-content-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-container-min-content-001.html" title="css/css-flexbox/flex-container-min-content-001.html">flex-container-min-content-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-container-min-content-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-container-min-content-001.html">(source)</a> <li class="wpt-test">flex-direction-column-001-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column-001-visual.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-column-overlap-001.html" title="css/css-flexbox/flex-direction-column-overlap-001.html">flex-direction-column-overlap-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-column-overlap-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column-overlap-001.html">(source)</a> <li class="wpt-test">flex-direction-column-reverse-001-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column-reverse-001-visual.html">(source)</a> <li class="wpt-test">flex-direction-column-reverse-002-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column-reverse-002-visual.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-column-reverse.html" title="css/css-flexbox/flex-direction-column-reverse.html">flex-direction-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-column.html" title="css/css-flexbox/flex-direction-column.html">flex-direction-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-modify.html" title="css/css-flexbox/flex-direction-modify.html">flex-direction-modify.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-modify.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-modify.html">(source)</a> <li class="wpt-test">flex-direction-row-001-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-001-visual.html">(source)</a> <li class="wpt-test">flex-direction-row-002-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-002-visual.html">(source)</a> <li class="wpt-test">flex-direction-row-reverse-001-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-reverse-001-visual.html">(source)</a> <li class="wpt-test">flex-direction-row-reverse-002-visual.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-reverse-002-visual.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-row-reverse.html" title="css/css-flexbox/flex-direction-row-reverse.html">flex-direction-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-row-vertical.html" title="css/css-flexbox/flex-direction-row-vertical.html">flex-direction-row-vertical.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-row-vertical.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-row-vertical.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction-with-element-insert.html" title="css/css-flexbox/flex-direction-with-element-insert.html">flex-direction-with-element-insert.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction-with-element-insert.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-with-element-insert.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-direction.html" title="css/css-flexbox/flex-direction.html">flex-direction.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-direction.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-factor-less-than-one.html" title="css/css-flexbox/flex-factor-less-than-one.html">flex-factor-less-than-one.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-factor-less-than-one.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-factor-less-than-one.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-001.html" title="css/css-flexbox/flex-flow-001.html">flex-flow-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-002.html" title="css/css-flexbox/flex-flow-002.html">flex-flow-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-003.html" title="css/css-flexbox/flex-flow-003.html">flex-flow-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-004.html" title="css/css-flexbox/flex-flow-004.html">flex-flow-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-005.html" title="css/css-flexbox/flex-flow-005.html">flex-flow-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-006.html" title="css/css-flexbox/flex-flow-006.html">flex-flow-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-007.html" title="css/css-flexbox/flex-flow-007.html">flex-flow-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-008.html" title="css/css-flexbox/flex-flow-008.html">flex-flow-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-009.html" title="css/css-flexbox/flex-flow-009.html">flex-flow-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-010.html" title="css/css-flexbox/flex-flow-010.html">flex-flow-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-011.html" title="css/css-flexbox/flex-flow-011.html">flex-flow-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-012.html" title="css/css-flexbox/flex-flow-012.html">flex-flow-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-flow-013.html" title="css/css-flexbox/flex-flow-013.html">flex-flow-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-flow-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-flow-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-001.xht" title="css/css-flexbox/flex-grow-001.xht">flex-grow-001.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-001.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-001.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-002.html" title="css/css-flexbox/flex-grow-002.html">flex-grow-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-003.html" title="css/css-flexbox/flex-grow-003.html">flex-grow-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-004.html" title="css/css-flexbox/flex-grow-004.html">flex-grow-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-005.html" title="css/css-flexbox/flex-grow-005.html">flex-grow-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-006.html" title="css/css-flexbox/flex-grow-006.html">flex-grow-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-007.html" title="css/css-flexbox/flex-grow-007.html">flex-grow-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-grow-008.html" title="css/css-flexbox/flex-grow-008.html">flex-grow-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-grow-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-grow-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-height-min-content.html" title="css/css-flexbox/flex-height-min-content.html">flex-height-min-content.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-height-min-content.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-height-min-content.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-inline.html" title="css/css-flexbox/flex-inline.html">flex-inline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-inline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-inline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-and-percentage-abspos.html" title="css/css-flexbox/flex-item-and-percentage-abspos.html">flex-item-and-percentage-abspos.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-and-percentage-abspos.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-and-percentage-abspos.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-compressible-001.html" title="css/css-flexbox/flex-item-compressible-001.html">flex-item-compressible-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-compressible-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-compressible-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-compressible-002.html" title="css/css-flexbox/flex-item-compressible-002.html">flex-item-compressible-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-compressible-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-compressible-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-contains-size-layout-001.html" title="css/css-flexbox/flex-item-contains-size-layout-001.html">flex-item-contains-size-layout-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-contains-size-layout-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-contains-size-layout-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-contains-strict.html" title="css/css-flexbox/flex-item-contains-strict.html">flex-item-contains-strict.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-contains-strict.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-contains-strict.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html" title="css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html">flex-item-transferred-sizes-padding-border-sizing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html" title="css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html">flex-item-transferred-sizes-padding-content-sizing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-vertical-align.html" title="css/css-flexbox/flex-item-vertical-align.html">flex-item-vertical-align.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-vertical-align.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-vertical-align.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-item-z-ordering-001.html" title="css/css-flexbox/flex-item-z-ordering-001.html">flex-item-z-ordering-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-item-z-ordering-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-item-z-ordering-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html" title="css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html">multi-line-wrap-reverse-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html" title="css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html">multi-line-wrap-reverse-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html" title="css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html">multi-line-wrap-with-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html" title="css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html">multi-line-wrap-with-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-margin-no-collapse.html" title="css/css-flexbox/flex-margin-no-collapse.html">flex-margin-no-collapse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-margin-no-collapse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-margin-no-collapse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-001.xht" title="css/css-flexbox/flex-minimum-height-flex-items-001.xht">flex-minimum-height-flex-items-001.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-001.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-001.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-002.xht" title="css/css-flexbox/flex-minimum-height-flex-items-002.xht">flex-minimum-height-flex-items-002.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-002.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-002.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-003.xht" title="css/css-flexbox/flex-minimum-height-flex-items-003.xht">flex-minimum-height-flex-items-003.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-003.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-003.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-004.xht" title="css/css-flexbox/flex-minimum-height-flex-items-004.xht">flex-minimum-height-flex-items-004.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-004.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-004.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-005.xht" title="css/css-flexbox/flex-minimum-height-flex-items-005.xht">flex-minimum-height-flex-items-005.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-005.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-005.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-006.xht" title="css/css-flexbox/flex-minimum-height-flex-items-006.xht">flex-minimum-height-flex-items-006.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-006.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-006.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-007.xht" title="css/css-flexbox/flex-minimum-height-flex-items-007.xht">flex-minimum-height-flex-items-007.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-007.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-007.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-008.xht" title="css/css-flexbox/flex-minimum-height-flex-items-008.xht">flex-minimum-height-flex-items-008.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-008.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-008.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-009.html" title="css/css-flexbox/flex-minimum-height-flex-items-009.html">flex-minimum-height-flex-items-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-010.html" title="css/css-flexbox/flex-minimum-height-flex-items-010.html">flex-minimum-height-flex-items-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-011.xht" title="css/css-flexbox/flex-minimum-height-flex-items-011.xht">flex-minimum-height-flex-items-011.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-011.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-011.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-012.html" title="css/css-flexbox/flex-minimum-height-flex-items-012.html">flex-minimum-height-flex-items-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-013.html" title="css/css-flexbox/flex-minimum-height-flex-items-013.html">flex-minimum-height-flex-items-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-014.html" title="css/css-flexbox/flex-minimum-height-flex-items-014.html">flex-minimum-height-flex-items-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-015.html" title="css/css-flexbox/flex-minimum-height-flex-items-015.html">flex-minimum-height-flex-items-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-016.html" title="css/css-flexbox/flex-minimum-height-flex-items-016.html">flex-minimum-height-flex-items-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-017.html" title="css/css-flexbox/flex-minimum-height-flex-items-017.html">flex-minimum-height-flex-items-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-018.html" title="css/css-flexbox/flex-minimum-height-flex-items-018.html">flex-minimum-height-flex-items-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-019.html" title="css/css-flexbox/flex-minimum-height-flex-items-019.html">flex-minimum-height-flex-items-019.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-019.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-019.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-020.html" title="css/css-flexbox/flex-minimum-height-flex-items-020.html">flex-minimum-height-flex-items-020.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-020.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-020.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-021.html" title="css/css-flexbox/flex-minimum-height-flex-items-021.html">flex-minimum-height-flex-items-021.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-021.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-021.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-022.html" title="css/css-flexbox/flex-minimum-height-flex-items-022.html">flex-minimum-height-flex-items-022.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-022.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-022.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-023.html" title="css/css-flexbox/flex-minimum-height-flex-items-023.html">flex-minimum-height-flex-items-023.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-023.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-023.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-024.html" title="css/css-flexbox/flex-minimum-height-flex-items-024.html">flex-minimum-height-flex-items-024.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-024.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-024.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-025.html" title="css/css-flexbox/flex-minimum-height-flex-items-025.html">flex-minimum-height-flex-items-025.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-025.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-025.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-026.html" title="css/css-flexbox/flex-minimum-height-flex-items-026.html">flex-minimum-height-flex-items-026.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-026.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-026.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-027.html" title="css/css-flexbox/flex-minimum-height-flex-items-027.html">flex-minimum-height-flex-items-027.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-027.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-027.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-028.html" title="css/css-flexbox/flex-minimum-height-flex-items-028.html">flex-minimum-height-flex-items-028.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-028.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-028.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-029.html" title="css/css-flexbox/flex-minimum-height-flex-items-029.html">flex-minimum-height-flex-items-029.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-029.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-029.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-030.html" title="css/css-flexbox/flex-minimum-height-flex-items-030.html">flex-minimum-height-flex-items-030.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-030.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-030.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-height-flex-items-031.html" title="css/css-flexbox/flex-minimum-height-flex-items-031.html">flex-minimum-height-flex-items-031.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-height-flex-items-031.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-height-flex-items-031.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-size-001.html" title="css/css-flexbox/flex-minimum-size-001.html">flex-minimum-size-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-size-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-size-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-size-002.html" title="css/css-flexbox/flex-minimum-size-002.html">flex-minimum-size-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-size-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-size-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-size-003.html" title="css/css-flexbox/flex-minimum-size-003.html">flex-minimum-size-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-size-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-size-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-001.xht" title="css/css-flexbox/flex-minimum-width-flex-items-001.xht">flex-minimum-width-flex-items-001.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-001.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-001.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-002.xht" title="css/css-flexbox/flex-minimum-width-flex-items-002.xht">flex-minimum-width-flex-items-002.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-002.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-002.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-003.xht" title="css/css-flexbox/flex-minimum-width-flex-items-003.xht">flex-minimum-width-flex-items-003.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-003.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-003.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-004.xht" title="css/css-flexbox/flex-minimum-width-flex-items-004.xht">flex-minimum-width-flex-items-004.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-004.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-004.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-005.xht" title="css/css-flexbox/flex-minimum-width-flex-items-005.xht">flex-minimum-width-flex-items-005.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-005.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-005.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-006.xht" title="css/css-flexbox/flex-minimum-width-flex-items-006.xht">flex-minimum-width-flex-items-006.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-006.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-006.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-007.xht" title="css/css-flexbox/flex-minimum-width-flex-items-007.xht">flex-minimum-width-flex-items-007.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-007.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-007.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-008.xht" title="css/css-flexbox/flex-minimum-width-flex-items-008.xht">flex-minimum-width-flex-items-008.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-008.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-008.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-009.html" title="css/css-flexbox/flex-minimum-width-flex-items-009.html">flex-minimum-width-flex-items-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-010.html" title="css/css-flexbox/flex-minimum-width-flex-items-010.html">flex-minimum-width-flex-items-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-011.html" title="css/css-flexbox/flex-minimum-width-flex-items-011.html">flex-minimum-width-flex-items-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-012.html" title="css/css-flexbox/flex-minimum-width-flex-items-012.html">flex-minimum-width-flex-items-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-013.html" title="css/css-flexbox/flex-minimum-width-flex-items-013.html">flex-minimum-width-flex-items-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-014.html" title="css/css-flexbox/flex-minimum-width-flex-items-014.html">flex-minimum-width-flex-items-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-015.html" title="css/css-flexbox/flex-minimum-width-flex-items-015.html">flex-minimum-width-flex-items-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-minimum-width-flex-items-016.html" title="css/css-flexbox/flex-minimum-width-flex-items-016.html">flex-minimum-width-flex-items-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-minimum-width-flex-items-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-minimum-width-flex-items-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html" title="css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html">flex-one-sets-flex-basis-to-zero-px.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-order.html" title="css/css-flexbox/flex-order.html">flex-order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html" title="css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html">flex-outer-flexbox-column-recalculate-height-on-resize-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shorthand-flex-basis-middle.html" title="css/css-flexbox/flex-shorthand-flex-basis-middle.html">flex-shorthand-flex-basis-middle.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shorthand-flex-basis-middle.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shorthand-flex-basis-middle.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-001.html" title="css/css-flexbox/flex-shrink-001.html">flex-shrink-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-002.html" title="css/css-flexbox/flex-shrink-002.html">flex-shrink-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-003.html" title="css/css-flexbox/flex-shrink-003.html">flex-shrink-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-004.html" title="css/css-flexbox/flex-shrink-004.html">flex-shrink-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-005.html" title="css/css-flexbox/flex-shrink-005.html">flex-shrink-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-006.html" title="css/css-flexbox/flex-shrink-006.html">flex-shrink-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-007.html" title="css/css-flexbox/flex-shrink-007.html">flex-shrink-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-008.html" title="css/css-flexbox/flex-shrink-008.html">flex-shrink-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-shrink-large-value-crash.html" title="css/css-flexbox/flex-shrink-large-value-crash.html">flex-shrink-large-value-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-shrink-large-value-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-shrink-large-value-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-vertical-align-effect.html" title="css/css-flexbox/flex-vertical-align-effect.html">flex-vertical-align-effect.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-vertical-align-effect.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-vertical-align-effect.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-wrap-002.html" title="css/css-flexbox/flex-wrap-002.html">flex-wrap-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-wrap-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-wrap-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-wrap-003.html" title="css/css-flexbox/flex-wrap-003.html">flex-wrap-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-wrap-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-wrap-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-wrap-004.html" title="css/css-flexbox/flex-wrap-004.html">flex-wrap-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-wrap-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-wrap-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-wrap-005.html" title="css/css-flexbox/flex-wrap-005.html">flex-wrap-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-wrap-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-wrap-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flex-wrap-006.html" title="css/css-flexbox/flex-wrap-006.html">flex-wrap-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flex-wrap-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-wrap-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-items-center-nested-001.html" title="css/css-flexbox/flexbox-align-items-center-nested-001.html">flexbox-align-items-center-nested-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-items-center-nested-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-items-center-nested-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml">flexbox-align-self-baseline-horiz-001a.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml">flexbox-align-self-baseline-horiz-001b.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml">flexbox-align-self-baseline-horiz-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml">flexbox-align-self-baseline-horiz-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml">flexbox-align-self-baseline-horiz-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml">flexbox-align-self-baseline-horiz-005.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml">flexbox-align-self-baseline-horiz-006.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml">flexbox-align-self-baseline-horiz-007.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml" title="css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml">flexbox-align-self-baseline-horiz-008.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml">flexbox-align-self-horiz-001-block.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml">flexbox-align-self-horiz-001-table.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-002.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-002.xhtml">flexbox-align-self-horiz-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-003.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-003.xhtml">flexbox-align-self-horiz-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-004.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-004.xhtml">flexbox-align-self-horiz-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-horiz-005.xhtml" title="css/css-flexbox/flexbox-align-self-horiz-005.xhtml">flexbox-align-self-horiz-005.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-horiz-005.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-horiz-005.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-stretch-vert-001.html" title="css/css-flexbox/flexbox-align-self-stretch-vert-001.html">flexbox-align-self-stretch-vert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-stretch-vert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-stretch-vert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-stretch-vert-002.html" title="css/css-flexbox/flexbox-align-self-stretch-vert-002.html">flexbox-align-self-stretch-vert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-stretch-vert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-stretch-vert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-001.xhtml" title="css/css-flexbox/flexbox-align-self-vert-001.xhtml">flexbox-align-self-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-002.xhtml" title="css/css-flexbox/flexbox-align-self-vert-002.xhtml">flexbox-align-self-vert-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-003.xhtml" title="css/css-flexbox/flexbox-align-self-vert-003.xhtml">flexbox-align-self-vert-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-004.xhtml" title="css/css-flexbox/flexbox-align-self-vert-004.xhtml">flexbox-align-self-vert-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml" title="css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml">flexbox-align-self-vert-rtl-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml" title="css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml">flexbox-align-self-vert-rtl-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml" title="css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml">flexbox-align-self-vert-rtl-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml" title="css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml">flexbox-align-self-vert-rtl-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml" title="css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml">flexbox-align-self-vert-rtl-005.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-anonymous-items-001.html" title="css/css-flexbox/flexbox-anonymous-items-001.html">flexbox-anonymous-items-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-anonymous-items-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-anonymous-items-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html" title="css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html">flexbox-baseline-align-self-baseline-horiz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html" title="css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html">flexbox-baseline-align-self-baseline-vert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-empty-001a.html" title="css/css-flexbox/flexbox-baseline-empty-001a.html">flexbox-baseline-empty-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-empty-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-empty-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-empty-001b.html" title="css/css-flexbox/flexbox-baseline-empty-001b.html">flexbox-baseline-empty-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-empty-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-empty-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html" title="css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html">flexbox-baseline-multi-item-horiz-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html" title="css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html">flexbox-baseline-multi-item-horiz-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html" title="css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html">flexbox-baseline-multi-item-vert-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html" title="css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html">flexbox-baseline-multi-item-vert-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html" title="css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html">flexbox-baseline-multi-line-horiz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html" title="css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html">flexbox-baseline-multi-line-horiz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html" title="css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html">flexbox-baseline-multi-line-horiz-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html" title="css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html">flexbox-baseline-multi-line-horiz-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html" title="css/css-flexbox/flexbox-baseline-multi-line-vert-001.html">flexbox-baseline-multi-line-vert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html" title="css/css-flexbox/flexbox-baseline-multi-line-vert-002.html">flexbox-baseline-multi-line-vert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-nested-001.html" title="css/css-flexbox/flexbox-baseline-nested-001.html">flexbox-baseline-nested-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-nested-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-nested-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-single-item-001a.html" title="css/css-flexbox/flexbox-baseline-single-item-001a.html">flexbox-baseline-single-item-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-single-item-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-single-item-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-baseline-single-item-001b.html" title="css/css-flexbox/flexbox-baseline-single-item-001b.html">flexbox-baseline-single-item-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-baseline-single-item-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-baseline-single-item-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-block-horiz-001.xhtml">flexbox-basic-block-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml" title="css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml">flexbox-basic-block-horiz-001v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-block-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-block-vert-001.xhtml">flexbox-basic-block-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-block-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-block-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml" title="css/css-flexbox/flexbox-basic-block-vert-001v.xhtml">flexbox-basic-block-vert-001v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml">flexbox-basic-canvas-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml" title="css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml">flexbox-basic-canvas-horiz-001v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml">flexbox-basic-canvas-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml" title="css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml">flexbox-basic-canvas-vert-001v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml">flexbox-basic-fieldset-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml">flexbox-basic-fieldset-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml">flexbox-basic-iframe-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml">flexbox-basic-iframe-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-img-horiz-001.xhtml">flexbox-basic-img-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-img-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-img-vert-001.xhtml">flexbox-basic-img-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-img-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-img-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml">flexbox-basic-textarea-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml">flexbox-basic-textarea-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml" title="css/css-flexbox/flexbox-basic-video-horiz-001.xhtml">flexbox-basic-video-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-basic-video-vert-001.xhtml" title="css/css-flexbox/flexbox-basic-video-vert-001.xhtml">flexbox-basic-video-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-basic-video-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-basic-video-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-horiz-001a.html" title="css/css-flexbox/flexbox-break-request-horiz-001a.html">flexbox-break-request-horiz-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-horiz-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-horiz-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-horiz-001b.html" title="css/css-flexbox/flexbox-break-request-horiz-001b.html">flexbox-break-request-horiz-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-horiz-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-horiz-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-horiz-002a.html" title="css/css-flexbox/flexbox-break-request-horiz-002a.html">flexbox-break-request-horiz-002a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-horiz-002a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-horiz-002a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-horiz-002b.html" title="css/css-flexbox/flexbox-break-request-horiz-002b.html">flexbox-break-request-horiz-002b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-horiz-002b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-horiz-002b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-vert-001a.html" title="css/css-flexbox/flexbox-break-request-vert-001a.html">flexbox-break-request-vert-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-vert-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-vert-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-vert-001b.html" title="css/css-flexbox/flexbox-break-request-vert-001b.html">flexbox-break-request-vert-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-vert-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-vert-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-vert-002a.html" title="css/css-flexbox/flexbox-break-request-vert-002a.html">flexbox-break-request-vert-002a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-vert-002a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-vert-002a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-break-request-vert-002b.html" title="css/css-flexbox/flexbox-break-request-vert-002b.html">flexbox-break-request-vert-002b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-break-request-vert-002b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-break-request-vert-002b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-collapsed-item-baseline-001.html" title="css/css-flexbox/flexbox-collapsed-item-baseline-001.html">flexbox-collapsed-item-baseline-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-collapsed-item-baseline-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-collapsed-item-baseline-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-collapsed-item-horiz-001.html" title="css/css-flexbox/flexbox-collapsed-item-horiz-001.html">flexbox-collapsed-item-horiz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-collapsed-item-horiz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-collapsed-item-horiz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-collapsed-item-horiz-002.html" title="css/css-flexbox/flexbox-collapsed-item-horiz-002.html">flexbox-collapsed-item-horiz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-collapsed-item-horiz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-collapsed-item-horiz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-collapsed-item-horiz-003.html" title="css/css-flexbox/flexbox-collapsed-item-horiz-003.html">flexbox-collapsed-item-horiz-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-collapsed-item-horiz-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-collapsed-item-horiz-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-column-row-gap-001.html" title="css/css-flexbox/flexbox-column-row-gap-001.html">flexbox-column-row-gap-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-column-row-gap-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-column-row-gap-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-column-row-gap-002.html" title="css/css-flexbox/flexbox-column-row-gap-002.html">flexbox-column-row-gap-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-column-row-gap-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-column-row-gap-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-column-row-gap-003.html" title="css/css-flexbox/flexbox-column-row-gap-003.html">flexbox-column-row-gap-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-column-row-gap-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-column-row-gap-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-column-row-gap-004.html" title="css/css-flexbox/flexbox-column-row-gap-004.html">flexbox-column-row-gap-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-column-row-gap-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-column-row-gap-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html" title="css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html">flexbox-definite-cross-size-constrained-percentage.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-001.html" title="css/css-flexbox/flexbox-definite-sizes-001.html">flexbox-definite-sizes-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-002.html" title="css/css-flexbox/flexbox-definite-sizes-002.html">flexbox-definite-sizes-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-003.html" title="css/css-flexbox/flexbox-definite-sizes-003.html">flexbox-definite-sizes-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-004.html" title="css/css-flexbox/flexbox-definite-sizes-004.html">flexbox-definite-sizes-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-005.html" title="css/css-flexbox/flexbox-definite-sizes-005.html">flexbox-definite-sizes-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-definite-sizes-006.html" title="css/css-flexbox/flexbox-definite-sizes-006.html">flexbox-definite-sizes-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-definite-sizes-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-definite-sizes-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-dyn-resize-001.html" title="css/css-flexbox/flexbox-dyn-resize-001.html">flexbox-dyn-resize-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-dyn-resize-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-dyn-resize-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-001a.html" title="css/css-flexbox/flexbox-flex-basis-content-001a.html">flexbox-flex-basis-content-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-001b.html" title="css/css-flexbox/flexbox-flex-basis-content-001b.html">flexbox-flex-basis-content-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-002a.html" title="css/css-flexbox/flexbox-flex-basis-content-002a.html">flexbox-flex-basis-content-002a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-002a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-002a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-002b.html" title="css/css-flexbox/flexbox-flex-basis-content-002b.html">flexbox-flex-basis-content-002b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-002b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-002b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-003a.html" title="css/css-flexbox/flexbox-flex-basis-content-003a.html">flexbox-flex-basis-content-003a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-003a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-003a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-003b.html" title="css/css-flexbox/flexbox-flex-basis-content-003b.html">flexbox-flex-basis-content-003b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-003b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-003b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-004a.html" title="css/css-flexbox/flexbox-flex-basis-content-004a.html">flexbox-flex-basis-content-004a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-004a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-004a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-basis-content-004b.html" title="css/css-flexbox/flexbox-flex-basis-content-004b.html">flexbox-flex-basis-content-004b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-basis-content-004b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-basis-content-004b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html" title="css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html">flexbox-flex-direction-column-percentage-ignored.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-column-reverse.htm" title="css/css-flexbox/flexbox-flex-direction-column-reverse.htm">flexbox-flex-direction-column-reverse.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-column-reverse.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-column-reverse.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-column.htm" title="css/css-flexbox/flexbox-flex-direction-column.htm">flexbox-flex-direction-column.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-column.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-column.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-default.htm" title="css/css-flexbox/flexbox-flex-direction-default.htm">flexbox-flex-direction-default.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-default.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-default.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-row-reverse.htm" title="css/css-flexbox/flexbox-flex-direction-row-reverse.htm">flexbox-flex-direction-row-reverse.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-row-reverse.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-row-reverse.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-direction-row.htm" title="css/css-flexbox/flexbox-flex-direction-row.htm">flexbox-flex-direction-row.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-direction-row.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-direction-row.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-flow-001.html" title="css/css-flexbox/flexbox-flex-flow-001.html">flexbox-flex-flow-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-flow-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-flow-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-flow-002.html" title="css/css-flexbox/flexbox-flex-flow-002.html">flexbox-flex-flow-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-flow-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-flow-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-default.htm" title="css/css-flexbox/flexbox-flex-wrap-default.htm">flexbox-flex-wrap-default.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-default.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-default.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-flexing.html" title="css/css-flexbox/flexbox-flex-wrap-flexing.html">flexbox-flex-wrap-flexing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-flexing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-flexing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-horiz-001.html" title="css/css-flexbox/flexbox-flex-wrap-horiz-001.html">flexbox-flex-wrap-horiz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-horiz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-horiz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-horiz-002.html" title="css/css-flexbox/flexbox-flex-wrap-horiz-002.html">flexbox-flex-wrap-horiz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-horiz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-horiz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-nowrap.htm" title="css/css-flexbox/flexbox-flex-wrap-nowrap.htm">flexbox-flex-wrap-nowrap.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-nowrap.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-nowrap.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-vert-001.html" title="css/css-flexbox/flexbox-flex-wrap-vert-001.html">flexbox-flex-wrap-vert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-vert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-vert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-vert-002.html" title="css/css-flexbox/flexbox-flex-wrap-vert-002.html">flexbox-flex-wrap-vert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-vert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-vert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm" title="css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm">flexbox-flex-wrap-wrap-reverse.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-flex-wrap-wrap.htm" title="css/css-flexbox/flexbox-flex-wrap-wrap.htm">flexbox-flex-wrap-wrap.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-flex-wrap-wrap.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-flex-wrap-wrap.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-gap-position-absolute.html" title="css/css-flexbox/flexbox-gap-position-absolute.html">flexbox-gap-position-absolute.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-gap-position-absolute.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-gap-position-absolute.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html" title="css/css-flexbox/flexbox-iframe-intrinsic-size-001.html">flexbox-iframe-intrinsic-size-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml" title="css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml">flexbox-items-as-stacking-contexts-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html" title="css/css-flexbox/flexbox-items-as-stacking-contexts-002.html">flexbox-items-as-stacking-contexts-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html" title="css/css-flexbox/flexbox-items-as-stacking-contexts-003.html">flexbox-items-as-stacking-contexts-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml">flexbox-justify-content-horiz-001a.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml">flexbox-justify-content-horiz-001b.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-002.xhtml">flexbox-justify-content-horiz-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-003.xhtml">flexbox-justify-content-horiz-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-004.xhtml">flexbox-justify-content-horiz-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-005.xhtml">flexbox-justify-content-horiz-005.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml" title="css/css-flexbox/flexbox-justify-content-horiz-006.xhtml">flexbox-justify-content-horiz-006.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-001a.xhtml">flexbox-justify-content-vert-001a.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-001b.xhtml">flexbox-justify-content-vert-001b.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-002.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-002.xhtml">flexbox-justify-content-vert-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-003.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-003.xhtml">flexbox-justify-content-vert-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-004.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-004.xhtml">flexbox-justify-content-vert-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-005.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-005.xhtml">flexbox-justify-content-vert-005.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-005.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-005.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-vert-006.xhtml" title="css/css-flexbox/flexbox-justify-content-vert-006.xhtml">flexbox-justify-content-vert-006.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-vert-006.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-vert-006.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml" title="css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml">flexbox-justify-content-wmvert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-wmvert-002.html" title="css/css-flexbox/flexbox-justify-content-wmvert-002.html">flexbox-justify-content-wmvert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-wmvert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-wmvert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-justify-content-wmvert-003.html" title="css/css-flexbox/flexbox-justify-content-wmvert-003.html">flexbox-justify-content-wmvert-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-justify-content-wmvert-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-justify-content-wmvert-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html" title="css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html">flexbox-lines-must-be-stretched-by-default.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml" title="css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml">flexbox-margin-auto-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml" title="css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml">flexbox-margin-auto-horiz-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml">flexbox-mbp-horiz-001-reverse.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml">flexbox-mbp-horiz-001-rtl-reverse.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml">flexbox-mbp-horiz-001-rtl.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-001.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-001.xhtml">flexbox-mbp-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-002a.xhtml">flexbox-mbp-horiz-002a.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-002b.xhtml">flexbox-mbp-horiz-002b.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-002v.xhtml">flexbox-mbp-horiz-002v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml">flexbox-mbp-horiz-003-reverse.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-003.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-003.xhtml">flexbox-mbp-horiz-003.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-003.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-003.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-003v.xhtml">flexbox-mbp-horiz-003v.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-mbp-horiz-004.xhtml" title="css/css-flexbox/flexbox-mbp-horiz-004.xhtml">flexbox-mbp-horiz-004.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-mbp-horiz-004.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-mbp-horiz-004.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-001.html" title="css/css-flexbox/flexbox-min-height-auto-001.html">flexbox-min-height-auto-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-002a.html" title="css/css-flexbox/flexbox-min-height-auto-002a.html">flexbox-min-height-auto-002a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-002a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-002a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-002b.html" title="css/css-flexbox/flexbox-min-height-auto-002b.html">flexbox-min-height-auto-002b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-002b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-002b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-002c.html" title="css/css-flexbox/flexbox-min-height-auto-002c.html">flexbox-min-height-auto-002c.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-002c.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-002c.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-003.html" title="css/css-flexbox/flexbox-min-height-auto-003.html">flexbox-min-height-auto-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-height-auto-004.html" title="css/css-flexbox/flexbox-min-height-auto-004.html">flexbox-min-height-auto-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-height-auto-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-height-auto-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-001.html" title="css/css-flexbox/flexbox-min-width-auto-001.html">flexbox-min-width-auto-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-002a.html" title="css/css-flexbox/flexbox-min-width-auto-002a.html">flexbox-min-width-auto-002a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-002a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-002a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-002b.html" title="css/css-flexbox/flexbox-min-width-auto-002b.html">flexbox-min-width-auto-002b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-002b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-002b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-002c.html" title="css/css-flexbox/flexbox-min-width-auto-002c.html">flexbox-min-width-auto-002c.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-002c.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-002c.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-003.html" title="css/css-flexbox/flexbox-min-width-auto-003.html">flexbox-min-width-auto-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-004.html" title="css/css-flexbox/flexbox-min-width-auto-004.html">flexbox-min-width-auto-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-005.html" title="css/css-flexbox/flexbox-min-width-auto-005.html">flexbox-min-width-auto-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-min-width-auto-006.html" title="css/css-flexbox/flexbox-min-width-auto-006.html">flexbox-min-width-auto-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-min-width-auto-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-min-width-auto-006.html">(source)</a> <li class="wpt-test">flexbox-order-from-lowest.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-order-from-lowest.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-order-only-flexitems.html" title="css/css-flexbox/flexbox-order-only-flexitems.html">flexbox-order-only-flexitems.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-order-only-flexitems.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-order-only-flexitems.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-horiz-001.html" title="css/css-flexbox/flexbox-overflow-horiz-001.html">flexbox-overflow-horiz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-horiz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-horiz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-horiz-002.html" title="css/css-flexbox/flexbox-overflow-horiz-002.html">flexbox-overflow-horiz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-horiz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-horiz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-horiz-003.html" title="css/css-flexbox/flexbox-overflow-horiz-003.html">flexbox-overflow-horiz-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-horiz-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-horiz-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-horiz-004.html" title="css/css-flexbox/flexbox-overflow-horiz-004.html">flexbox-overflow-horiz-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-horiz-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-horiz-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-horiz-005.html" title="css/css-flexbox/flexbox-overflow-horiz-005.html">flexbox-overflow-horiz-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-horiz-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-horiz-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-padding-001.html" title="css/css-flexbox/flexbox-overflow-padding-001.html">flexbox-overflow-padding-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-padding-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-padding-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-padding-002.html" title="css/css-flexbox/flexbox-overflow-padding-002.html">flexbox-overflow-padding-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-padding-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-padding-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-vert-001.html" title="css/css-flexbox/flexbox-overflow-vert-001.html">flexbox-overflow-vert-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-vert-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-vert-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-vert-002.html" title="css/css-flexbox/flexbox-overflow-vert-002.html">flexbox-overflow-vert-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-vert-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-vert-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-vert-003.html" title="css/css-flexbox/flexbox-overflow-vert-003.html">flexbox-overflow-vert-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-vert-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-vert-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-vert-004.html" title="css/css-flexbox/flexbox-overflow-vert-004.html">flexbox-overflow-vert-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-vert-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-vert-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-overflow-vert-005.html" title="css/css-flexbox/flexbox-overflow-vert-005.html">flexbox-overflow-vert-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-overflow-vert-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-overflow-vert-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-paint-ordering-001.xhtml" title="css/css-flexbox/flexbox-paint-ordering-001.xhtml">flexbox-paint-ordering-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-paint-ordering-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-paint-ordering-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-paint-ordering-002.xhtml" title="css/css-flexbox/flexbox-paint-ordering-002.xhtml">flexbox-paint-ordering-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-paint-ordering-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-paint-ordering-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-paint-ordering-003.html" title="css/css-flexbox/flexbox-paint-ordering-003.html">flexbox-paint-ordering-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-paint-ordering-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-paint-ordering-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-root-node-001a.html" title="css/css-flexbox/flexbox-root-node-001a.html">flexbox-root-node-001a.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-root-node-001a.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-root-node-001a.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-root-node-001b.html" title="css/css-flexbox/flexbox-root-node-001b.html">flexbox-root-node-001b.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-root-node-001b.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-root-node-001b.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-safe-overflow-position-001.html" title="css/css-flexbox/flexbox-safe-overflow-position-001.html">flexbox-safe-overflow-position-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-safe-overflow-position-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-safe-overflow-position-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-single-line-clamp-1.html" title="css/css-flexbox/flexbox-single-line-clamp-1.html">flexbox-single-line-clamp-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-single-line-clamp-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-single-line-clamp-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-single-line-clamp-2.html" title="css/css-flexbox/flexbox-single-line-clamp-2.html">flexbox-single-line-clamp-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-single-line-clamp-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-single-line-clamp-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-single-line-clamp-3.html" title="css/css-flexbox/flexbox-single-line-clamp-3.html">flexbox-single-line-clamp-3.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-single-line-clamp-3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-single-line-clamp-3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-sizing-horiz-001.xhtml" title="css/css-flexbox/flexbox-sizing-horiz-001.xhtml">flexbox-sizing-horiz-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-sizing-horiz-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-sizing-horiz-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-sizing-horiz-002.xhtml" title="css/css-flexbox/flexbox-sizing-horiz-002.xhtml">flexbox-sizing-horiz-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-sizing-horiz-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-sizing-horiz-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-sizing-vert-001.xhtml" title="css/css-flexbox/flexbox-sizing-vert-001.xhtml">flexbox-sizing-vert-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-sizing-vert-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-sizing-vert-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-sizing-vert-002.xhtml" title="css/css-flexbox/flexbox-sizing-vert-002.xhtml">flexbox-sizing-vert-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-sizing-vert-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-sizing-vert-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-table-fixup-001.xhtml" title="css/css-flexbox/flexbox-table-fixup-001.xhtml">flexbox-table-fixup-001.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-table-fixup-001.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-table-fixup-001.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml" title="css/css-flexbox/flexbox-whitespace-handling-001a.xhtml">flexbox-whitespace-handling-001a.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml" title="css/css-flexbox/flexbox-whitespace-handling-001b.xhtml">flexbox-whitespace-handling-001b.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-whitespace-handling-002.xhtml" title="css/css-flexbox/flexbox-whitespace-handling-002.xhtml">flexbox-whitespace-handling-002.xhtml</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-whitespace-handling-002.xhtml">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-whitespace-handling-002.xhtml">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-with-multi-column-property.html" title="css/css-flexbox/flexbox-with-multi-column-property.html">flexbox-with-multi-column-property.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-with-multi-column-property.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-with-multi-column-property.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-with-pseudo-elements-001.html" title="css/css-flexbox/flexbox-with-pseudo-elements-001.html">flexbox-with-pseudo-elements-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-with-pseudo-elements-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-with-pseudo-elements-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-with-pseudo-elements-002.html" title="css/css-flexbox/flexbox-with-pseudo-elements-002.html">flexbox-with-pseudo-elements-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-with-pseudo-elements-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-with-pseudo-elements-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-with-pseudo-elements-003.html" title="css/css-flexbox/flexbox-with-pseudo-elements-003.html">flexbox-with-pseudo-elements-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-with-pseudo-elements-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-with-pseudo-elements-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-001.html" title="css/css-flexbox/flexbox-writing-mode-001.html">flexbox-writing-mode-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-002.html" title="css/css-flexbox/flexbox-writing-mode-002.html">flexbox-writing-mode-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-003.html" title="css/css-flexbox/flexbox-writing-mode-003.html">flexbox-writing-mode-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-004.html" title="css/css-flexbox/flexbox-writing-mode-004.html">flexbox-writing-mode-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-005.html" title="css/css-flexbox/flexbox-writing-mode-005.html">flexbox-writing-mode-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-006.html" title="css/css-flexbox/flexbox-writing-mode-006.html">flexbox-writing-mode-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-007.html" title="css/css-flexbox/flexbox-writing-mode-007.html">flexbox-writing-mode-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-008.html" title="css/css-flexbox/flexbox-writing-mode-008.html">flexbox-writing-mode-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-009.html" title="css/css-flexbox/flexbox-writing-mode-009.html">flexbox-writing-mode-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-010.html" title="css/css-flexbox/flexbox-writing-mode-010.html">flexbox-writing-mode-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-011.html" title="css/css-flexbox/flexbox-writing-mode-011.html">flexbox-writing-mode-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-012.html" title="css/css-flexbox/flexbox-writing-mode-012.html">flexbox-writing-mode-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-013.html" title="css/css-flexbox/flexbox-writing-mode-013.html">flexbox-writing-mode-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-014.html" title="css/css-flexbox/flexbox-writing-mode-014.html">flexbox-writing-mode-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-015.html" title="css/css-flexbox/flexbox-writing-mode-015.html">flexbox-writing-mode-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox-writing-mode-016.html" title="css/css-flexbox/flexbox-writing-mode-016.html">flexbox-writing-mode-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox-writing-mode-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox-writing-mode-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-center.html" title="css/css-flexbox/flexbox_align-content-center.html">flexbox_align-content-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-flexend.html" title="css/css-flexbox/flexbox_align-content-flexend.html">flexbox_align-content-flexend.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-flexend.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-flexend.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-flexstart.html" title="css/css-flexbox/flexbox_align-content-flexstart.html">flexbox_align-content-flexstart.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-flexstart.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-flexstart.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-spacearound.html" title="css/css-flexbox/flexbox_align-content-spacearound.html">flexbox_align-content-spacearound.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-spacearound.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-spacearound.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-spacebetween.html" title="css/css-flexbox/flexbox_align-content-spacebetween.html">flexbox_align-content-spacebetween.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-spacebetween.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-spacebetween.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-stretch-2.html" title="css/css-flexbox/flexbox_align-content-stretch-2.html">flexbox_align-content-stretch-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-stretch-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-stretch-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-content-stretch.html" title="css/css-flexbox/flexbox_align-content-stretch.html">flexbox_align-content-stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-content-stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-content-stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-baseline.html" title="css/css-flexbox/flexbox_align-items-baseline.html">flexbox_align-items-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-center-2.html" title="css/css-flexbox/flexbox_align-items-center-2.html">flexbox_align-items-center-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-center-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-center-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-center-3.html" title="css/css-flexbox/flexbox_align-items-center-3.html">flexbox_align-items-center-3.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-center-3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-center-3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-center.html" title="css/css-flexbox/flexbox_align-items-center.html">flexbox_align-items-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-flexend-2.html" title="css/css-flexbox/flexbox_align-items-flexend-2.html">flexbox_align-items-flexend-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-flexend-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-flexend-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-flexend.html" title="css/css-flexbox/flexbox_align-items-flexend.html">flexbox_align-items-flexend.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-flexend.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-flexend.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-flexstart-2.html" title="css/css-flexbox/flexbox_align-items-flexstart-2.html">flexbox_align-items-flexstart-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-flexstart-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-flexstart-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-flexstart.html" title="css/css-flexbox/flexbox_align-items-flexstart.html">flexbox_align-items-flexstart.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-flexstart.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-flexstart.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-stretch-2.html" title="css/css-flexbox/flexbox_align-items-stretch-2.html">flexbox_align-items-stretch-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-stretch-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-stretch-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-stretch-3.html" title="css/css-flexbox/flexbox_align-items-stretch-3.html">flexbox_align-items-stretch-3.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-stretch-3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-stretch-3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-stretch-4.html" title="css/css-flexbox/flexbox_align-items-stretch-4.html">flexbox_align-items-stretch-4.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-stretch-4.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-stretch-4.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-items-stretch.html" title="css/css-flexbox/flexbox_align-items-stretch.html">flexbox_align-items-stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-items-stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-items-stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-auto.html" title="css/css-flexbox/flexbox_align-self-auto.html">flexbox_align-self-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-baseline.html" title="css/css-flexbox/flexbox_align-self-baseline.html">flexbox_align-self-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-center.html" title="css/css-flexbox/flexbox_align-self-center.html">flexbox_align-self-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-flexend.html" title="css/css-flexbox/flexbox_align-self-flexend.html">flexbox_align-self-flexend.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-flexend.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-flexend.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-flexstart.html" title="css/css-flexbox/flexbox_align-self-flexstart.html">flexbox_align-self-flexstart.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-flexstart.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-flexstart.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_align-self-stretch.html" title="css/css-flexbox/flexbox_align-self-stretch.html">flexbox_align-self-stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_align-self-stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_align-self-stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_block.html" title="css/css-flexbox/flexbox_block.html">flexbox_block.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_block.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_block.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_box-clear.html" title="css/css-flexbox/flexbox_box-clear.html">flexbox_box-clear.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_box-clear.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_box-clear.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_columns-flexitems-2.html" title="css/css-flexbox/flexbox_columns-flexitems-2.html">flexbox_columns-flexitems-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_columns-flexitems-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_columns-flexitems-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_columns-flexitems.html" title="css/css-flexbox/flexbox_columns-flexitems.html">flexbox_columns-flexitems.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_columns-flexitems.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_columns-flexitems.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_columns.html" title="css/css-flexbox/flexbox_columns.html">flexbox_columns.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_columns.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_columns.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_direction-column-reverse.html" title="css/css-flexbox/flexbox_direction-column-reverse.html">flexbox_direction-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_direction-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_direction-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_direction-column.html" title="css/css-flexbox/flexbox_direction-column.html">flexbox_direction-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_direction-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_direction-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_direction-row-reverse.html" title="css/css-flexbox/flexbox_direction-row-reverse.html">flexbox_direction-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_direction-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_direction-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_display.html" title="css/css-flexbox/flexbox_display.html">flexbox_display.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_display.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_display.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_fbfc.html" title="css/css-flexbox/flexbox_fbfc.html">flexbox_fbfc.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_fbfc.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_fbfc.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_fbfc2.html" title="css/css-flexbox/flexbox_fbfc2.html">flexbox_fbfc2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_fbfc2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_fbfc2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_first-letter.html" title="css/css-flexbox/flexbox_first-letter.html">flexbox_first-letter.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_first-letter.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_first-letter.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_first-line.html" title="css/css-flexbox/flexbox_first-line.html">flexbox_first-line.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_first-line.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_first-line.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-0-unitless.html" title="css/css-flexbox/flexbox_flex-0-0-0-unitless.html">flexbox_flex-0-0-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-0.html" title="css/css-flexbox/flexbox_flex-0-0-0.html">flexbox_flex-0-0-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html" title="css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html">flexbox_flex-0-0-1-unitless-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-N-shrink.html" title="css/css-flexbox/flexbox_flex-0-0-N-shrink.html">flexbox_flex-0-0-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html" title="css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html">flexbox_flex-0-0-N-unitless-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-N.html" title="css/css-flexbox/flexbox_flex-0-0-N.html">flexbox_flex-0-0-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html">flexbox_flex-0-0-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-Npercent.html" title="css/css-flexbox/flexbox_flex-0-0-Npercent.html">flexbox_flex-0-0-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html" title="css/css-flexbox/flexbox_flex-0-0-auto-shrink.html">flexbox_flex-0-0-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0-auto.html" title="css/css-flexbox/flexbox_flex-0-0-auto.html">flexbox_flex-0-0-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-0.html" title="css/css-flexbox/flexbox_flex-0-0.html">flexbox_flex-0-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-0-unitless.html" title="css/css-flexbox/flexbox_flex-0-1-0-unitless.html">flexbox_flex-0-1-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-0.html" title="css/css-flexbox/flexbox_flex-0-1-0.html">flexbox_flex-0-1-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html" title="css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html">flexbox_flex-0-1-1-unitless-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-N-shrink.html" title="css/css-flexbox/flexbox_flex-0-1-N-shrink.html">flexbox_flex-0-1-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html" title="css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html">flexbox_flex-0-1-N-unitless-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-N.html" title="css/css-flexbox/flexbox_flex-0-1-N.html">flexbox_flex-0-1-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html">flexbox_flex-0-1-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-Npercent.html" title="css/css-flexbox/flexbox_flex-0-1-Npercent.html">flexbox_flex-0-1-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html" title="css/css-flexbox/flexbox_flex-0-1-auto-shrink.html">flexbox_flex-0-1-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1-auto.html" title="css/css-flexbox/flexbox_flex-0-1-auto.html">flexbox_flex-0-1-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-1.html" title="css/css-flexbox/flexbox_flex-0-1.html">flexbox_flex-0-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-0-unitless.html" title="css/css-flexbox/flexbox_flex-0-N-0-unitless.html">flexbox_flex-0-N-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-0.html" title="css/css-flexbox/flexbox_flex-0-N-0.html">flexbox_flex-0-N-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-N-shrink.html" title="css/css-flexbox/flexbox_flex-0-N-N-shrink.html">flexbox_flex-0-N-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-N.html" title="css/css-flexbox/flexbox_flex-0-N-N.html">flexbox_flex-0-N-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html">flexbox_flex-0-N-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-Npercent.html" title="css/css-flexbox/flexbox_flex-0-N-Npercent.html">flexbox_flex-0-N-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html" title="css/css-flexbox/flexbox_flex-0-N-auto-shrink.html">flexbox_flex-0-N-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N-auto.html" title="css/css-flexbox/flexbox_flex-0-N-auto.html">flexbox_flex-0-N-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-N.html" title="css/css-flexbox/flexbox_flex-0-N.html">flexbox_flex-0-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-0-auto.html" title="css/css-flexbox/flexbox_flex-0-auto.html">flexbox_flex-0-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-0-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-0-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-0-unitless.html" title="css/css-flexbox/flexbox_flex-1-0-0-unitless.html">flexbox_flex-1-0-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-0.html" title="css/css-flexbox/flexbox_flex-1-0-0.html">flexbox_flex-1-0-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-N-shrink.html" title="css/css-flexbox/flexbox_flex-1-0-N-shrink.html">flexbox_flex-1-0-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-N.html" title="css/css-flexbox/flexbox_flex-1-0-N.html">flexbox_flex-1-0-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html">flexbox_flex-1-0-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-Npercent.html" title="css/css-flexbox/flexbox_flex-1-0-Npercent.html">flexbox_flex-1-0-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html" title="css/css-flexbox/flexbox_flex-1-0-auto-shrink.html">flexbox_flex-1-0-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0-auto.html" title="css/css-flexbox/flexbox_flex-1-0-auto.html">flexbox_flex-1-0-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-0.html" title="css/css-flexbox/flexbox_flex-1-0.html">flexbox_flex-1-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-0-unitless.html" title="css/css-flexbox/flexbox_flex-1-1-0-unitless.html">flexbox_flex-1-1-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-0.html" title="css/css-flexbox/flexbox_flex-1-1-0.html">flexbox_flex-1-1-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-N-shrink.html" title="css/css-flexbox/flexbox_flex-1-1-N-shrink.html">flexbox_flex-1-1-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-N.html" title="css/css-flexbox/flexbox_flex-1-1-N.html">flexbox_flex-1-1-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html">flexbox_flex-1-1-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-Npercent.html" title="css/css-flexbox/flexbox_flex-1-1-Npercent.html">flexbox_flex-1-1-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html" title="css/css-flexbox/flexbox_flex-1-1-auto-shrink.html">flexbox_flex-1-1-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1-auto.html" title="css/css-flexbox/flexbox_flex-1-1-auto.html">flexbox_flex-1-1-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-1.html" title="css/css-flexbox/flexbox_flex-1-1.html">flexbox_flex-1-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-0-unitless.html" title="css/css-flexbox/flexbox_flex-1-N-0-unitless.html">flexbox_flex-1-N-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-0.html" title="css/css-flexbox/flexbox_flex-1-N-0.html">flexbox_flex-1-N-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-N-shrink.html" title="css/css-flexbox/flexbox_flex-1-N-N-shrink.html">flexbox_flex-1-N-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-N.html" title="css/css-flexbox/flexbox_flex-1-N-N.html">flexbox_flex-1-N-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html">flexbox_flex-1-N-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-Npercent.html" title="css/css-flexbox/flexbox_flex-1-N-Npercent.html">flexbox_flex-1-N-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html" title="css/css-flexbox/flexbox_flex-1-N-auto-shrink.html">flexbox_flex-1-N-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N-auto.html" title="css/css-flexbox/flexbox_flex-1-N-auto.html">flexbox_flex-1-N-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-1-N.html" title="css/css-flexbox/flexbox_flex-1-N.html">flexbox_flex-1-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-1-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-1-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-0-unitless.html" title="css/css-flexbox/flexbox_flex-N-0-0-unitless.html">flexbox_flex-N-0-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-0.html" title="css/css-flexbox/flexbox_flex-N-0-0.html">flexbox_flex-N-0-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-N-shrink.html" title="css/css-flexbox/flexbox_flex-N-0-N-shrink.html">flexbox_flex-N-0-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-N.html" title="css/css-flexbox/flexbox_flex-N-0-N.html">flexbox_flex-N-0-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html">flexbox_flex-N-0-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-Npercent.html" title="css/css-flexbox/flexbox_flex-N-0-Npercent.html">flexbox_flex-N-0-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html" title="css/css-flexbox/flexbox_flex-N-0-auto-shrink.html">flexbox_flex-N-0-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0-auto.html" title="css/css-flexbox/flexbox_flex-N-0-auto.html">flexbox_flex-N-0-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-0.html" title="css/css-flexbox/flexbox_flex-N-0.html">flexbox_flex-N-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-0-unitless.html" title="css/css-flexbox/flexbox_flex-N-1-0-unitless.html">flexbox_flex-N-1-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-0.html" title="css/css-flexbox/flexbox_flex-N-1-0.html">flexbox_flex-N-1-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-N-shrink.html" title="css/css-flexbox/flexbox_flex-N-1-N-shrink.html">flexbox_flex-N-1-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-N.html" title="css/css-flexbox/flexbox_flex-N-1-N.html">flexbox_flex-N-1-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html">flexbox_flex-N-1-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-Npercent.html" title="css/css-flexbox/flexbox_flex-N-1-Npercent.html">flexbox_flex-N-1-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html" title="css/css-flexbox/flexbox_flex-N-1-auto-shrink.html">flexbox_flex-N-1-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1-auto.html" title="css/css-flexbox/flexbox_flex-N-1-auto.html">flexbox_flex-N-1-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-1.html" title="css/css-flexbox/flexbox_flex-N-1.html">flexbox_flex-N-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-0-unitless.html" title="css/css-flexbox/flexbox_flex-N-N-0-unitless.html">flexbox_flex-N-N-0-unitless.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-0-unitless.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-0-unitless.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-0.html" title="css/css-flexbox/flexbox_flex-N-N-0.html">flexbox_flex-N-N-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-N-shrink.html" title="css/css-flexbox/flexbox_flex-N-N-N-shrink.html">flexbox_flex-N-N-N-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-N-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-N-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-N.html" title="css/css-flexbox/flexbox_flex-N-N-N.html">flexbox_flex-N-N-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html" title="css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html">flexbox_flex-N-N-Npercent-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-Npercent.html" title="css/css-flexbox/flexbox_flex-N-N-Npercent.html">flexbox_flex-N-N-Npercent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-Npercent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-Npercent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html" title="css/css-flexbox/flexbox_flex-N-N-auto-shrink.html">flexbox_flex-N-N-auto-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N-auto.html" title="css/css-flexbox/flexbox_flex-N-N-auto.html">flexbox_flex-N-N-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-N-N.html" title="css/css-flexbox/flexbox_flex-N-N.html">flexbox_flex-N-N.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-N-N.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-N-N.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-auto.html" title="css/css-flexbox/flexbox_flex-auto.html">flexbox_flex-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-basis-shrink.html" title="css/css-flexbox/flexbox_flex-basis-shrink.html">flexbox_flex-basis-shrink.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-basis-shrink.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-basis-shrink.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-basis.html" title="css/css-flexbox/flexbox_flex-basis.html">flexbox_flex-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-formatting-interop.html" title="css/css-flexbox/flexbox_flex-formatting-interop.html">flexbox_flex-formatting-interop.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-formatting-interop.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-formatting-interop.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-initial-2.html" title="css/css-flexbox/flexbox_flex-initial-2.html">flexbox_flex-initial-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-initial-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-initial-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-initial.html" title="css/css-flexbox/flexbox_flex-initial.html">flexbox_flex-initial.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-initial.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-initial.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html" title="css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html">flexbox_flex-natural-mixed-basis-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-natural-mixed-basis.html" title="css/css-flexbox/flexbox_flex-natural-mixed-basis.html">flexbox_flex-natural-mixed-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-natural-mixed-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-natural-mixed-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html" title="css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html">flexbox_flex-natural-variable-auto-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html" title="css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html">flexbox_flex-natural-variable-zero-basis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-natural.html" title="css/css-flexbox/flexbox_flex-natural.html">flexbox_flex-natural.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-natural.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-natural.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-none-wrappable-content.html" title="css/css-flexbox/flexbox_flex-none-wrappable-content.html">flexbox_flex-none-wrappable-content.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-none-wrappable-content.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-none-wrappable-content.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flex-none.html" title="css/css-flexbox/flexbox_flex-none.html">flexbox_flex-none.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flex-none.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flex-none.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html" title="css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html">flexbox_flow-column-reverse-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-column-reverse-wrap.html" title="css/css-flexbox/flexbox_flow-column-reverse-wrap.html">flexbox_flow-column-reverse-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-column-reverse-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-column-reverse-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-column-wrap-reverse.html" title="css/css-flexbox/flexbox_flow-column-wrap-reverse.html">flexbox_flow-column-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-column-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-column-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-column-wrap.html" title="css/css-flexbox/flexbox_flow-column-wrap.html">flexbox_flow-column-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-column-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-column-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-row-wrap-reverse.html" title="css/css-flexbox/flexbox_flow-row-wrap-reverse.html">flexbox_flow-row-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-row-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-row-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_flow-row-wrap.html" title="css/css-flexbox/flexbox_flow-row-wrap.html">flexbox_flow-row-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_flow-row-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_flow-row-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_generated-flex.html" title="css/css-flexbox/flexbox_generated-flex.html">flexbox_generated-flex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_generated-flex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_generated-flex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_generated-nested-flex.html" title="css/css-flexbox/flexbox_generated-nested-flex.html">flexbox_generated-nested-flex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_generated-nested-flex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_generated-nested-flex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_generated.html" title="css/css-flexbox/flexbox_generated.html">flexbox_generated.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_generated.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_generated.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_inline-float.html" title="css/css-flexbox/flexbox_inline-float.html">flexbox_inline-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_inline-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_inline-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_inline.html" title="css/css-flexbox/flexbox_inline.html">flexbox_inline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_inline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_inline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_item-bottom-float.html" title="css/css-flexbox/flexbox_item-bottom-float.html">flexbox_item-bottom-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_item-bottom-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_item-bottom-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_item-clear.html" title="css/css-flexbox/flexbox_item-clear.html">flexbox_item-clear.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_item-clear.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_item-clear.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_item-float.html" title="css/css-flexbox/flexbox_item-float.html">flexbox_item-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_item-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_item-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_item-top-float.html" title="css/css-flexbox/flexbox_item-top-float.html">flexbox_item-top-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_item-top-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_item-top-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_item-vertical-align.html" title="css/css-flexbox/flexbox_item-vertical-align.html">flexbox_item-vertical-align.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_item-vertical-align.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_item-vertical-align.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-center-overflow.html" title="css/css-flexbox/flexbox_justifycontent-center-overflow.html">flexbox_justifycontent-center-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-center-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-center-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-center.html" title="css/css-flexbox/flexbox_justifycontent-center.html">flexbox_justifycontent-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-end-rtl.html" title="css/css-flexbox/flexbox_justifycontent-end-rtl.html">flexbox_justifycontent-end-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-end-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-end-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-end.html" title="css/css-flexbox/flexbox_justifycontent-end.html">flexbox_justifycontent-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-flex-end.html" title="css/css-flexbox/flexbox_justifycontent-flex-end.html">flexbox_justifycontent-flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-flex-start.html" title="css/css-flexbox/flexbox_justifycontent-flex-start.html">flexbox_justifycontent-flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-left-001.html" title="css/css-flexbox/flexbox_justifycontent-left-001.html">flexbox_justifycontent-left-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-left-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-left-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-left-002.html" title="css/css-flexbox/flexbox_justifycontent-left-002.html">flexbox_justifycontent-left-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-left-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-left-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-right-001.html" title="css/css-flexbox/flexbox_justifycontent-right-001.html">flexbox_justifycontent-right-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-right-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-right-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-right-002.html" title="css/css-flexbox/flexbox_justifycontent-right-002.html">flexbox_justifycontent-right-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-right-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-right-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-rtl-001.html" title="css/css-flexbox/flexbox_justifycontent-rtl-001.html">flexbox_justifycontent-rtl-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-rtl-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-rtl-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-rtl-002.html" title="css/css-flexbox/flexbox_justifycontent-rtl-002.html">flexbox_justifycontent-rtl-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-rtl-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-rtl-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html" title="css/css-flexbox/flexbox_justifycontent-spacearound-negative.html">flexbox_justifycontent-spacearound-negative.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacearound-only.html" title="css/css-flexbox/flexbox_justifycontent-spacearound-only.html">flexbox_justifycontent-spacearound-only.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacearound-only.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacearound-only.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacearound.html" title="css/css-flexbox/flexbox_justifycontent-spacearound.html">flexbox_justifycontent-spacearound.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacearound.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacearound.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html" title="css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html">flexbox_justifycontent-spacebetween-negative.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html" title="css/css-flexbox/flexbox_justifycontent-spacebetween-only.html">flexbox_justifycontent-spacebetween-only.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-spacebetween.html" title="css/css-flexbox/flexbox_justifycontent-spacebetween.html">flexbox_justifycontent-spacebetween.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-spacebetween.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-spacebetween.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-start-rtl.html" title="css/css-flexbox/flexbox_justifycontent-start-rtl.html">flexbox_justifycontent-start-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-start-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-start-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-start.html" title="css/css-flexbox/flexbox_justifycontent-start.html">flexbox_justifycontent-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_justifycontent-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_justifycontent-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_margin-auto-overflow.html" title="css/css-flexbox/flexbox_margin-auto-overflow.html">flexbox_margin-auto-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_margin-auto-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_margin-auto-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_margin-auto.html" title="css/css-flexbox/flexbox_margin-auto.html">flexbox_margin-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_margin-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_margin-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_margin-left-ex.html" title="css/css-flexbox/flexbox_margin-left-ex.html">flexbox_margin-left-ex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_margin-left-ex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_margin-left-ex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_margin.html" title="css/css-flexbox/flexbox_margin.html">flexbox_margin.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_margin.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_margin.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_nested-flex.html" title="css/css-flexbox/flexbox_nested-flex.html">flexbox_nested-flex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_nested-flex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_nested-flex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_object.html" title="css/css-flexbox/flexbox_object.html">flexbox_object.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_object.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_object.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_order-abspos-space-around.html" title="css/css-flexbox/flexbox_order-abspos-space-around.html">flexbox_order-abspos-space-around.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_order-abspos-space-around.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_order-abspos-space-around.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_order-box.html" title="css/css-flexbox/flexbox_order-box.html">flexbox_order-box.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_order-box.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_order-box.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_order-noninteger-invalid.html" title="css/css-flexbox/flexbox_order-noninteger-invalid.html">flexbox_order-noninteger-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_order-noninteger-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_order-noninteger-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_order.html" title="css/css-flexbox/flexbox_order.html">flexbox_order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_quirks_body.html" title="css/css-flexbox/flexbox_quirks_body.html">flexbox_quirks_body.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_quirks_body.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_quirks_body.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rowspan-overflow-automatic.html" title="css/css-flexbox/flexbox_rowspan-overflow-automatic.html">flexbox_rowspan-overflow-automatic.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rowspan-overflow-automatic.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rowspan-overflow-automatic.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rowspan-overflow.html" title="css/css-flexbox/flexbox_rowspan-overflow.html">flexbox_rowspan-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rowspan-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rowspan-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rowspan.html" title="css/css-flexbox/flexbox_rowspan.html">flexbox_rowspan.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rowspan.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rowspan.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rtl-direction.html" title="css/css-flexbox/flexbox_rtl-direction.html">flexbox_rtl-direction.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rtl-direction.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rtl-direction.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rtl-flow-reverse.html" title="css/css-flexbox/flexbox_rtl-flow-reverse.html">flexbox_rtl-flow-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rtl-flow-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rtl-flow-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rtl-flow.html" title="css/css-flexbox/flexbox_rtl-flow.html">flexbox_rtl-flow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rtl-flow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rtl-flow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_rtl-order.html" title="css/css-flexbox/flexbox_rtl-order.html">flexbox_rtl-order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_rtl-order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_rtl-order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-abspos.html" title="css/css-flexbox/flexbox_stf-abspos.html">flexbox_stf-abspos.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-abspos.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-abspos.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-fixpos.html" title="css/css-flexbox/flexbox_stf-fixpos.html">flexbox_stf-fixpos.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-fixpos.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-fixpos.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-float.html" title="css/css-flexbox/flexbox_stf-float.html">flexbox_stf-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-inline-block.html" title="css/css-flexbox/flexbox_stf-inline-block.html">flexbox_stf-inline-block.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-inline-block.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-inline-block.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-caption.html" title="css/css-flexbox/flexbox_stf-table-caption.html">flexbox_stf-table-caption.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-caption.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-caption.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-cell.html" title="css/css-flexbox/flexbox_stf-table-cell.html">flexbox_stf-table-cell.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-cell.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-cell.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-row-group.html" title="css/css-flexbox/flexbox_stf-table-row-group.html">flexbox_stf-table-row-group.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-row-group.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-row-group.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-row.html" title="css/css-flexbox/flexbox_stf-table-row.html">flexbox_stf-table-row.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-row.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-row.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-singleline-2.html" title="css/css-flexbox/flexbox_stf-table-singleline-2.html">flexbox_stf-table-singleline-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-singleline-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-singleline-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table-singleline.html" title="css/css-flexbox/flexbox_stf-table-singleline.html">flexbox_stf-table-singleline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table-singleline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table-singleline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_stf-table.html" title="css/css-flexbox/flexbox_stf-table.html">flexbox_stf-table.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_stf-table.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_stf-table.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_table-fixed-layout.html" title="css/css-flexbox/flexbox_table-fixed-layout.html">flexbox_table-fixed-layout.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_table-fixed-layout.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_table-fixed-layout.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html" title="css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html">flexbox_visibility-collapse-line-wrapping.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_visibility-collapse.html" title="css/css-flexbox/flexbox_visibility-collapse.html">flexbox_visibility-collapse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_visibility-collapse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_visibility-collapse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_width-change-and-relayout-children.html" title="css/css-flexbox/flexbox_width-change-and-relayout-children.html">flexbox_width-change-and-relayout-children.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_width-change-and-relayout-children.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_width-change-and-relayout-children.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_width-overflow.html" title="css/css-flexbox/flexbox_width-overflow.html">flexbox_width-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_width-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_width-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_width-wrapping-column.html" title="css/css-flexbox/flexbox_width-wrapping-column.html">flexbox_width-wrapping-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_width-wrapping-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_width-wrapping-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_wrap-long.html" title="css/css-flexbox/flexbox_wrap-long.html">flexbox_wrap-long.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_wrap-long.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_wrap-long.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_wrap-reverse.html" title="css/css-flexbox/flexbox_wrap-reverse.html">flexbox_wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_wrap.html" title="css/css-flexbox/flexbox_wrap.html">flexbox_wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html" title="css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html">flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexible-box-float.html" title="css/css-flexbox/flexible-box-float.html">flexible-box-float.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexible-box-float.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexible-box-float.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexible-order.html" title="css/css-flexbox/flexible-order.html">flexible-order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexible-order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexible-order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexitem-no-margin-collapsing.html" title="css/css-flexbox/flexitem-no-margin-collapsing.html">flexitem-no-margin-collapsing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexitem-no-margin-collapsing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexitem-no-margin-collapsing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexitem-stretch-image.html" title="css/css-flexbox/flexitem-stretch-image.html">flexitem-stretch-image.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexitem-stretch-image.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexitem-stretch-image.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/flexitem-stretch-range.html" title="css/css-flexbox/flexitem-stretch-range.html">flexitem-stretch-range.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/flexitem-stretch-range.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flexitem-stretch-range.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/frame-flex-item-crash.html" title="css/css-flexbox/frame-flex-item-crash.html">frame-flex-item-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/frame-flex-item-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/frame-flex-item-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/frameset-crash.html" title="css/css-flexbox/frameset-crash.html">frameset-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/frameset-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/frameset-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-001-lr.html" title="css/css-flexbox/gap-001-lr.html">gap-001-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-001-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-001-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-001-ltr.html" title="css/css-flexbox/gap-001-ltr.html">gap-001-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-001-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-001-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-001-rl.html" title="css/css-flexbox/gap-001-rl.html">gap-001-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-001-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-001-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-001-rtl.html" title="css/css-flexbox/gap-001-rtl.html">gap-001-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-001-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-001-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-002-lr.html" title="css/css-flexbox/gap-002-lr.html">gap-002-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-002-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-002-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-002-ltr.html" title="css/css-flexbox/gap-002-ltr.html">gap-002-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-002-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-002-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-002-rl.html" title="css/css-flexbox/gap-002-rl.html">gap-002-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-002-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-002-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-002-rtl.html" title="css/css-flexbox/gap-002-rtl.html">gap-002-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-002-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-002-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-003-lr.html" title="css/css-flexbox/gap-003-lr.html">gap-003-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-003-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-003-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-003-ltr.html" title="css/css-flexbox/gap-003-ltr.html">gap-003-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-003-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-003-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-003-rl.html" title="css/css-flexbox/gap-003-rl.html">gap-003-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-003-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-003-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-003-rtl.html" title="css/css-flexbox/gap-003-rtl.html">gap-003-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-003-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-003-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-004-lr.html" title="css/css-flexbox/gap-004-lr.html">gap-004-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-004-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-004-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-004-ltr.html" title="css/css-flexbox/gap-004-ltr.html">gap-004-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-004-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-004-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-004-rl.html" title="css/css-flexbox/gap-004-rl.html">gap-004-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-004-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-004-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-004-rtl.html" title="css/css-flexbox/gap-004-rtl.html">gap-004-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-004-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-004-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-005-lr.html" title="css/css-flexbox/gap-005-lr.html">gap-005-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-005-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-005-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-005-ltr.html" title="css/css-flexbox/gap-005-ltr.html">gap-005-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-005-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-005-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-005-rl.html" title="css/css-flexbox/gap-005-rl.html">gap-005-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-005-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-005-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-005-rtl.html" title="css/css-flexbox/gap-005-rtl.html">gap-005-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-005-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-005-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-006-lr.html" title="css/css-flexbox/gap-006-lr.html">gap-006-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-006-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-006-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-006-ltr.html" title="css/css-flexbox/gap-006-ltr.html">gap-006-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-006-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-006-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-006-rl.html" title="css/css-flexbox/gap-006-rl.html">gap-006-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-006-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-006-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-006-rtl.html" title="css/css-flexbox/gap-006-rtl.html">gap-006-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-006-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-006-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-007-lr.html" title="css/css-flexbox/gap-007-lr.html">gap-007-lr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-007-lr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-007-lr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-007-ltr.html" title="css/css-flexbox/gap-007-ltr.html">gap-007-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-007-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-007-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-007-rl.html" title="css/css-flexbox/gap-007-rl.html">gap-007-rl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-007-rl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-007-rl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-007-rtl.html" title="css/css-flexbox/gap-007-rtl.html">gap-007-rtl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-007-rtl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-007-rtl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-008-ltr.html" title="css/css-flexbox/gap-008-ltr.html">gap-008-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-008-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-008-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-009-ltr.html" title="css/css-flexbox/gap-009-ltr.html">gap-009-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-009-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-009-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-010-ltr.html" title="css/css-flexbox/gap-010-ltr.html">gap-010-ltr.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-010-ltr.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-010-ltr.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-011.html" title="css/css-flexbox/gap-011.html">gap-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-012.html" title="css/css-flexbox/gap-012.html">gap-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-013.html" title="css/css-flexbox/gap-013.html">gap-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-014.html" title="css/css-flexbox/gap-014.html">gap-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-015.html" title="css/css-flexbox/gap-015.html">gap-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-016.html" title="css/css-flexbox/gap-016.html">gap-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-017.html" title="css/css-flexbox/gap-017.html">gap-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/gap-018.html" title="css/css-flexbox/gap-018.html">gap-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/gap-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/gap-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html">flexbox_computedstyle_align-content-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html">flexbox_computedstyle_align-content-flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html">flexbox_computedstyle_align-content-flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html">flexbox_computedstyle_align-content-space-around.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html">flexbox_computedstyle_align-content-space-between.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html">flexbox_computedstyle_align-items-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html">flexbox_computedstyle_align-items-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html">flexbox_computedstyle_align-items-flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html">flexbox_computedstyle_align-items-flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html">flexbox_computedstyle_align-items-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html">flexbox_computedstyle_align-items-stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html">flexbox_computedstyle_align-self-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html">flexbox_computedstyle_align-self-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html">flexbox_computedstyle_align-self-flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html">flexbox_computedstyle_align-self-flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html">flexbox_computedstyle_align-self-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html">flexbox_computedstyle_align-self-stretch.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html">flexbox_computedstyle_display-inline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html">flexbox_computedstyle_display.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html">flexbox_computedstyle_flex-basis-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html">flexbox_computedstyle_flex-basis-0percent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html">flexbox_computedstyle_flex-basis-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html">flexbox_computedstyle_flex-basis-percent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html">flexbox_computedstyle_flex-direction-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html">flexbox_computedstyle_flex-direction-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html">flexbox_computedstyle_flex-direction-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html">flexbox_computedstyle_flex-direction-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html">flexbox_computedstyle_flex-direction-row.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html">flexbox_computedstyle_flex-flow-column-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html">flexbox_computedstyle_flex-flow-column-reverse-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html">flexbox_computedstyle_flex-flow-column-reverse-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html">flexbox_computedstyle_flex-flow-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html">flexbox_computedstyle_flex-flow-column-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html">flexbox_computedstyle_flex-flow-column-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html">flexbox_computedstyle_flex-flow-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html">flexbox_computedstyle_flex-flow-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html">flexbox_computedstyle_flex-flow-row-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html">flexbox_computedstyle_flex-flow-row-reverse-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html">flexbox_computedstyle_flex-flow-row-reverse-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html">flexbox_computedstyle_flex-flow-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html">flexbox_computedstyle_flex-flow-row-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html">flexbox_computedstyle_flex-flow-row-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html">flexbox_computedstyle_flex-flow-row.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html">flexbox_computedstyle_flex-flow-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html">flexbox_computedstyle_flex-grow-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html">flexbox_computedstyle_flex-grow-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html">flexbox_computedstyle_flex-grow-number.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html">flexbox_computedstyle_flex-shorthand-0-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html">flexbox_computedstyle_flex-shorthand-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html">flexbox_computedstyle_flex-shorthand-initial.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html">flexbox_computedstyle_flex-shorthand-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html">flexbox_computedstyle_flex-shorthand-none.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html">flexbox_computedstyle_flex-shorthand-number.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html">flexbox_computedstyle_flex-shorthand.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html">flexbox_computedstyle_flex-shrink-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html">flexbox_computedstyle_flex-shrink-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html">flexbox_computedstyle_flex-shrink-number.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html">flexbox_computedstyle_flex-wrap-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html">flexbox_computedstyle_flex-wrap-nowrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html">flexbox_computedstyle_flex-wrap-wrap-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html">flexbox_computedstyle_flex-wrap-wrap.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html">flexbox_computedstyle_justify-content-center.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html">flexbox_computedstyle_justify-content-flex-end.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html">flexbox_computedstyle_justify-content-flex-start.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html">flexbox_computedstyle_justify-content-space-around.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html">flexbox_computedstyle_justify-content-space-between.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html">flexbox_computedstyle_min-auto-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html">flexbox_computedstyle_min-height-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html">flexbox_computedstyle_min-width-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html">flexbox_computedstyle_order-inherit.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html">flexbox_computedstyle_order-integer.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html">flexbox_computedstyle_order-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html">flexbox_computedstyle_order-negative.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html" title="css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html">flexbox_computedstyle_order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-001.html" title="css/css-flexbox/grid-flex-item-001.html">grid-flex-item-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-002.html" title="css/css-flexbox/grid-flex-item-002.html">grid-flex-item-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-003.html" title="css/css-flexbox/grid-flex-item-003.html">grid-flex-item-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-004.html" title="css/css-flexbox/grid-flex-item-004.html">grid-flex-item-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-005.html" title="css/css-flexbox/grid-flex-item-005.html">grid-flex-item-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/grid-flex-item-006.html" title="css/css-flexbox/grid-flex-item-006.html">grid-flex-item-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/grid-flex-item-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/grid-flex-item-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/height-percentage-with-dynamic-container-size.html" title="css/css-flexbox/height-percentage-with-dynamic-container-size.html">height-percentage-with-dynamic-container-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/height-percentage-with-dynamic-container-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/height-percentage-with-dynamic-container-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/hittest-anonymous-box.html" title="css/css-flexbox/hittest-anonymous-box.html">hittest-anonymous-box.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/hittest-anonymous-box.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/hittest-anonymous-box.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/hittest-before-pseudo.html" title="css/css-flexbox/hittest-before-pseudo.html">hittest-before-pseudo.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/hittest-before-pseudo.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/hittest-before-pseudo.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/hittest-overlapping-margin.html" title="css/css-flexbox/hittest-overlapping-margin.html">hittest-overlapping-margin.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/hittest-overlapping-margin.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/hittest-overlapping-margin.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/hittest-overlapping-order.html" title="css/css-flexbox/hittest-overlapping-order.html">hittest-overlapping-order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/hittest-overlapping-order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/hittest-overlapping-order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/hittest-overlapping-relative.html" title="css/css-flexbox/hittest-overlapping-relative.html">hittest-overlapping-relative.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/hittest-overlapping-relative.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/hittest-overlapping-relative.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-001.html" title="css/css-flexbox/image-as-flexitem-size-001.html">image-as-flexitem-size-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-001v.html" title="css/css-flexbox/image-as-flexitem-size-001v.html">image-as-flexitem-size-001v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-001v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-001v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-002.html" title="css/css-flexbox/image-as-flexitem-size-002.html">image-as-flexitem-size-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-002v.html" title="css/css-flexbox/image-as-flexitem-size-002v.html">image-as-flexitem-size-002v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-002v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-002v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-003.html" title="css/css-flexbox/image-as-flexitem-size-003.html">image-as-flexitem-size-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-003v.html" title="css/css-flexbox/image-as-flexitem-size-003v.html">image-as-flexitem-size-003v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-003v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-003v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-004.html" title="css/css-flexbox/image-as-flexitem-size-004.html">image-as-flexitem-size-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-004v.html" title="css/css-flexbox/image-as-flexitem-size-004v.html">image-as-flexitem-size-004v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-004v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-004v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-005.html" title="css/css-flexbox/image-as-flexitem-size-005.html">image-as-flexitem-size-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-005v.html" title="css/css-flexbox/image-as-flexitem-size-005v.html">image-as-flexitem-size-005v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-005v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-005v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-006.html" title="css/css-flexbox/image-as-flexitem-size-006.html">image-as-flexitem-size-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-006v.html" title="css/css-flexbox/image-as-flexitem-size-006v.html">image-as-flexitem-size-006v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-006v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-006v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-007.html" title="css/css-flexbox/image-as-flexitem-size-007.html">image-as-flexitem-size-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-as-flexitem-size-007v.html" title="css/css-flexbox/image-as-flexitem-size-007v.html">image-as-flexitem-size-007v.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-as-flexitem-size-007v.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-as-flexitem-size-007v.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-items-flake-001.html" title="css/css-flexbox/image-items-flake-001.html">image-items-flake-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-items-flake-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-items-flake-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/image-nested-within-definite-column-flexbox.html" title="css/css-flexbox/image-nested-within-definite-column-flexbox.html">image-nested-within-definite-column-flexbox.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/image-nested-within-definite-column-flexbox.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/image-nested-within-definite-column-flexbox.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inheritance.html" title="css/css-flexbox/inheritance.html">inheritance.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inheritance.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inheritance.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flex-editing-crash.html" title="css/css-flexbox/inline-flex-editing-crash.html">inline-flex-editing-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flex-editing-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flex-editing-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html" title="css/css-flexbox/inline-flex-editing-with-updating-text-crash.html">inline-flex-editing-with-updating-text-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flex-frameset-main-axis-crash.html" title="css/css-flexbox/inline-flex-frameset-main-axis-crash.html">inline-flex-frameset-main-axis-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flex-frameset-main-axis-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flex-frameset-main-axis-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flex-min-content-height.html" title="css/css-flexbox/inline-flex-min-content-height.html">inline-flex-min-content-height.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flex-min-content-height.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flex-min-content-height.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flex.html" title="css/css-flexbox/inline-flex.html">inline-flex.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flex.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flex.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html" title="css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html">inline-flexbox-vertical-rl-image-flexitem-crash-print.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html" title="css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html">inline-flexbox-wrap-vertically-width-calculation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-column-item.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-column-lastitem.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-container.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-container.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-item.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-item.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-line-order.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-line.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-line.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-after-multiline.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-before-column-firstitem.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-before-column-item.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-before-container.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-before-container.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-before-item.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-before-item.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-before-multiline.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html">(source)</a> <li class="wpt-test">flexbox_interactive_break-natural.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_break-natural.html">(source)</a> <li class="wpt-test">flexbox_interactive_flex-basis-transitions.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_flex-basis-transitions.html">(source)</a> <li class="wpt-test">flexbox_interactive_flex-grow-transitions.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_flex-grow-transitions.html">(source)</a> <li class="wpt-test">flexbox_interactive_flex-shrink-transitions-invalid.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions-invalid.html">(source)</a> <li class="wpt-test">flexbox_interactive_flex-shrink-transitions.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions.html">(source)</a> <li class="wpt-test">flexbox_interactive_flex-transitions.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_flex-transitions.html">(source)</a> <li class="wpt-test">flexbox_interactive_order-transitions-2.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_order-transitions-2.html">(source)</a> <li class="wpt-test">flexbox_interactive_order-transitions.html (manual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/interactive/flexbox_interactive_order-transitions.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-001.html" title="css/css-flexbox/intrinsic-size/col-wrap-001.html">col-wrap-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-002.html" title="css/css-flexbox/intrinsic-size/col-wrap-002.html">col-wrap-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-003.html" title="css/css-flexbox/intrinsic-size/col-wrap-003.html">col-wrap-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-004.html" title="css/css-flexbox/intrinsic-size/col-wrap-004.html">col-wrap-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-005.html" title="css/css-flexbox/intrinsic-size/col-wrap-005.html">col-wrap-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-006.html" title="css/css-flexbox/intrinsic-size/col-wrap-006.html">col-wrap-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-007.html" title="css/css-flexbox/intrinsic-size/col-wrap-007.html">col-wrap-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-008.html" title="css/css-flexbox/intrinsic-size/col-wrap-008.html">col-wrap-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-009.html" title="css/css-flexbox/intrinsic-size/col-wrap-009.html">col-wrap-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-010.html" title="css/css-flexbox/intrinsic-size/col-wrap-010.html">col-wrap-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-011.html" title="css/css-flexbox/intrinsic-size/col-wrap-011.html">col-wrap-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-012.html" title="css/css-flexbox/intrinsic-size/col-wrap-012.html">col-wrap-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-013.html" title="css/css-flexbox/intrinsic-size/col-wrap-013.html">col-wrap-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-014.html" title="css/css-flexbox/intrinsic-size/col-wrap-014.html">col-wrap-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-015.html" title="css/css-flexbox/intrinsic-size/col-wrap-015.html">col-wrap-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-016.html" title="css/css-flexbox/intrinsic-size/col-wrap-016.html">col-wrap-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-017.html" title="css/css-flexbox/intrinsic-size/col-wrap-017.html">col-wrap-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-018.html" title="css/css-flexbox/intrinsic-size/col-wrap-018.html">col-wrap-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/col-wrap-019.html" title="css/css-flexbox/intrinsic-size/col-wrap-019.html">col-wrap-019.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/col-wrap-019.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/col-wrap-019.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-001.html" title="css/css-flexbox/intrinsic-size/row-001.html">row-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-002.html" title="css/css-flexbox/intrinsic-size/row-002.html">row-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-003.html" title="css/css-flexbox/intrinsic-size/row-003.html">row-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-004.html" title="css/css-flexbox/intrinsic-size/row-004.html">row-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-005.html" title="css/css-flexbox/intrinsic-size/row-005.html">row-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-006.html" title="css/css-flexbox/intrinsic-size/row-006.html">row-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-007.html" title="css/css-flexbox/intrinsic-size/row-007.html">row-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-008.html" title="css/css-flexbox/intrinsic-size/row-008.html">row-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-size/row-wrap-001.html" title="css/css-flexbox/intrinsic-size/row-wrap-001.html">row-wrap-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-size/row-wrap-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-size/row-wrap-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html" title="css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html">intrinsic-width-orthogonal-writing-mode.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/item-with-max-height-and-scrollbar.html" title="css/css-flexbox/item-with-max-height-and-scrollbar.html">item-with-max-height-and-scrollbar.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/item-with-max-height-and-scrollbar.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/item-with-max-height-and-scrollbar.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html" title="css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html">item-with-table-with-infinite-max-intrinsic-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-001.htm" title="css/css-flexbox/justify-content-001.htm">justify-content-001.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-001.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-001.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-002.htm" title="css/css-flexbox/justify-content-002.htm">justify-content-002.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-002.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-002.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-003.htm" title="css/css-flexbox/justify-content-003.htm">justify-content-003.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-003.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-003.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-004.htm" title="css/css-flexbox/justify-content-004.htm">justify-content-004.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-004.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-004.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-005.htm" title="css/css-flexbox/justify-content-005.htm">justify-content-005.htm</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-005.htm">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-005.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content-006.html" title="css/css-flexbox/justify-content-006.html">justify-content-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content-006.html">(source)</a> <li class="wpt-test">justify-content_center.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_center.html">(source)</a> <li class="wpt-test">justify-content_flex-end.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_flex-end.html">(source)</a> <li class="wpt-test">justify-content_flex-start.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_flex-start.html">(source)</a> <li class="wpt-test">justify-content_space-around.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_space-around.html">(source)</a> <li class="wpt-test">justify-content_space-between-001.html (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_space-between-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/justify-content_space-between-002.html" title="css/css-flexbox/justify-content_space-between-002.html">justify-content_space-between-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/justify-content_space-between-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/justify-content_space-between-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/layout-algorithm_algo-cross-line-001.html" title="css/css-flexbox/layout-algorithm_algo-cross-line-001.html">layout-algorithm_algo-cross-line-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/layout-algorithm_algo-cross-line-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/layout-algorithm_algo-cross-line-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/layout-algorithm_algo-cross-line-002.html" title="css/css-flexbox/layout-algorithm_algo-cross-line-002.html">layout-algorithm_algo-cross-line-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/layout-algorithm_algo-cross-line-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/layout-algorithm_algo-cross-line-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/layout-with-inline-svg-001.html" title="css/css-flexbox/layout-with-inline-svg-001.html">layout-with-inline-svg-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/layout-with-inline-svg-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/layout-with-inline-svg-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/max-width-violation.html" title="css/css-flexbox/max-width-violation.html">max-width-violation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/max-width-violation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/max-width-violation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/multiline-column-max-height.html" title="css/css-flexbox/multiline-column-max-height.html">multiline-column-max-height.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/multiline-column-max-height.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/multiline-column-max-height.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/multiline-min-max.html" title="css/css-flexbox/multiline-min-max.html">multiline-min-max.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/multiline-min-max.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/multiline-min-max.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/multiline-min-preferred-width.html" title="css/css-flexbox/multiline-min-preferred-width.html">multiline-min-preferred-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/multiline-min-preferred-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/multiline-min-preferred-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/multiline-reverse-wrap-baseline.html" title="css/css-flexbox/multiline-reverse-wrap-baseline.html">multiline-reverse-wrap-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/multiline-reverse-wrap-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/multiline-reverse-wrap-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/multiline-shrink-to-fit.html" title="css/css-flexbox/multiline-shrink-to-fit.html">multiline-shrink-to-fit.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/multiline-shrink-to-fit.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/multiline-shrink-to-fit.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-available-size-crash.html" title="css/css-flexbox/negative-available-size-crash.html">negative-available-size-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-available-size-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-available-size-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-flex-margins-crash.html" title="css/css-flexbox/negative-flex-margins-crash.html">negative-flex-margins-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-flex-margins-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-flex-margins-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-flex-rounding-crash.html" title="css/css-flexbox/negative-flex-rounding-crash.html">negative-flex-rounding-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-flex-rounding-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-flex-rounding-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-item-margins-002-crash.html" title="css/css-flexbox/negative-item-margins-002-crash.html">negative-item-margins-002-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-item-margins-002-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-item-margins-002-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-item-margins-crash.html" title="css/css-flexbox/negative-item-margins-crash.html">negative-item-margins-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-item-margins-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-item-margins-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-margins-001.html" title="css/css-flexbox/negative-margins-001.html">negative-margins-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-margins-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-margins-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-overflow-002.html" title="css/css-flexbox/negative-overflow-002.html">negative-overflow-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-overflow-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-overflow-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/negative-overflow.html" title="css/css-flexbox/negative-overflow.html">negative-overflow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/negative-overflow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/negative-overflow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/nested-orthogonal-flexbox-relayout.html" title="css/css-flexbox/nested-orthogonal-flexbox-relayout.html">nested-orthogonal-flexbox-relayout.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/nested-orthogonal-flexbox-relayout.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/nested-orthogonal-flexbox-relayout.html">(source)</a> <li class="wpt-test">order-001.htm (visual test) <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order-001.htm">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/order-painting.html" title="css/css-flexbox/order-painting.html">order-painting.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/order-painting.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order-painting.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/order/order-abs-children-painting-order.html" title="css/css-flexbox/order/order-abs-children-painting-order.html">order-abs-children-painting-order.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/order/order-abs-children-painting-order.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order/order-abs-children-painting-order.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/order/order-with-column-reverse.html" title="css/css-flexbox/order/order-with-column-reverse.html">order-with-column-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/order/order-with-column-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order/order-with-column-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/order/order-with-row-reverse.html" title="css/css-flexbox/order/order-with-row-reverse.html">order-with-row-reverse.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/order/order-with-row-reverse.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order/order-with-row-reverse.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/order_value.html" title="css/css-flexbox/order_value.html">order_value.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/order_value.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/order_value.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/ortho-table-item-001.html" title="css/css-flexbox/ortho-table-item-001.html">ortho-table-item-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/ortho-table-item-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/ortho-table-item-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/orthogonal-flex-item-crash.html" title="css/css-flexbox/orthogonal-flex-item-crash.html">orthogonal-flex-item-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/orthogonal-flex-item-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/orthogonal-flex-item-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html" title="css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html">orthogonal-writing-modes-and-intrinsic-sizing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-area-001.html" title="css/css-flexbox/overflow-area-001.html">overflow-area-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-area-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-area-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-area-002.html" title="css/css-flexbox/overflow-area-002.html">overflow-area-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-area-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-area-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-area-003.html" title="css/css-flexbox/overflow-area-003.html">overflow-area-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-area-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-area-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-001.html" title="css/css-flexbox/overflow-auto-001.html">overflow-auto-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-002.html" title="css/css-flexbox/overflow-auto-002.html">overflow-auto-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-003.html" title="css/css-flexbox/overflow-auto-003.html">overflow-auto-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-004.html" title="css/css-flexbox/overflow-auto-004.html">overflow-auto-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-005.html" title="css/css-flexbox/overflow-auto-005.html">overflow-auto-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-006.html" title="css/css-flexbox/overflow-auto-006.html">overflow-auto-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-007.html" title="css/css-flexbox/overflow-auto-007.html">overflow-auto-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-auto-008.html" title="css/css-flexbox/overflow-auto-008.html">overflow-auto-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-auto-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-auto-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/overflow-top-left.html" title="css/css-flexbox/overflow-top-left.html">overflow-top-left.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/overflow-top-left.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/overflow-top-left.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-basis-computed.html" title="css/css-flexbox/parsing/flex-basis-computed.html">flex-basis-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-basis-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-basis-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-basis-invalid.html" title="css/css-flexbox/parsing/flex-basis-invalid.html">flex-basis-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-basis-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-basis-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-basis-valid.html" title="css/css-flexbox/parsing/flex-basis-valid.html">flex-basis-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-basis-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-basis-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-computed.html" title="css/css-flexbox/parsing/flex-computed.html">flex-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-direction-computed.html" title="css/css-flexbox/parsing/flex-direction-computed.html">flex-direction-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-direction-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-direction-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-direction-invalid.html" title="css/css-flexbox/parsing/flex-direction-invalid.html">flex-direction-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-direction-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-direction-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-direction-valid.html" title="css/css-flexbox/parsing/flex-direction-valid.html">flex-direction-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-direction-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-direction-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-flow-computed.html" title="css/css-flexbox/parsing/flex-flow-computed.html">flex-flow-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-flow-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-flow-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-flow-invalid.html" title="css/css-flexbox/parsing/flex-flow-invalid.html">flex-flow-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-flow-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-flow-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-flow-shorthand.html" title="css/css-flexbox/parsing/flex-flow-shorthand.html">flex-flow-shorthand.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-flow-shorthand.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-flow-shorthand.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-flow-valid.html" title="css/css-flexbox/parsing/flex-flow-valid.html">flex-flow-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-flow-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-flow-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-grow-computed.html" title="css/css-flexbox/parsing/flex-grow-computed.html">flex-grow-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-grow-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-grow-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-grow-invalid.html" title="css/css-flexbox/parsing/flex-grow-invalid.html">flex-grow-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-grow-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-grow-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-grow-valid.html" title="css/css-flexbox/parsing/flex-grow-valid.html">flex-grow-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-grow-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-grow-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-invalid.html" title="css/css-flexbox/parsing/flex-invalid.html">flex-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-shorthand.html" title="css/css-flexbox/parsing/flex-shorthand.html">flex-shorthand.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-shorthand.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-shorthand.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-shrink-computed.html" title="css/css-flexbox/parsing/flex-shrink-computed.html">flex-shrink-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-shrink-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-shrink-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-shrink-invalid.html" title="css/css-flexbox/parsing/flex-shrink-invalid.html">flex-shrink-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-shrink-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-shrink-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-shrink-valid.html" title="css/css-flexbox/parsing/flex-shrink-valid.html">flex-shrink-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-shrink-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-shrink-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-valid.html" title="css/css-flexbox/parsing/flex-valid.html">flex-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-wrap-computed.html" title="css/css-flexbox/parsing/flex-wrap-computed.html">flex-wrap-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-wrap-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-wrap-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-wrap-invalid.html" title="css/css-flexbox/parsing/flex-wrap-invalid.html">flex-wrap-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-wrap-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-wrap-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/flex-wrap-valid.html" title="css/css-flexbox/parsing/flex-wrap-valid.html">flex-wrap-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/flex-wrap-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/flex-wrap-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/order-computed.html" title="css/css-flexbox/parsing/order-computed.html">order-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/order-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/order-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/order-invalid.html" title="css/css-flexbox/parsing/order-invalid.html">order-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/order-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/order-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/parsing/order-valid.html" title="css/css-flexbox/parsing/order-valid.html">order-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/parsing/order-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/parsing/order-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html" title="css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html">percentage-descendant-of-anonymous-flex-item.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-000.html" title="css/css-flexbox/percentage-heights-000.html">percentage-heights-000.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-000.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-000.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-001.html" title="css/css-flexbox/percentage-heights-001.html">percentage-heights-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-002.html" title="css/css-flexbox/percentage-heights-002.html">percentage-heights-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-003.html" title="css/css-flexbox/percentage-heights-003.html">percentage-heights-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-004.html" title="css/css-flexbox/percentage-heights-004.html">percentage-heights-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-005.html" title="css/css-flexbox/percentage-heights-005.html">percentage-heights-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-006.html" title="css/css-flexbox/percentage-heights-006.html">percentage-heights-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-007.html" title="css/css-flexbox/percentage-heights-007.html">percentage-heights-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-008.html" title="css/css-flexbox/percentage-heights-008.html">percentage-heights-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-009.html" title="css/css-flexbox/percentage-heights-009.html">percentage-heights-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-010.html" title="css/css-flexbox/percentage-heights-010.html">percentage-heights-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-011.html" title="css/css-flexbox/percentage-heights-011.html">percentage-heights-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-012.html" title="css/css-flexbox/percentage-heights-012.html">percentage-heights-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-013.html" title="css/css-flexbox/percentage-heights-013.html">percentage-heights-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-014.html" title="css/css-flexbox/percentage-heights-014.html">percentage-heights-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-015.html" title="css/css-flexbox/percentage-heights-015.html">percentage-heights-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-016.html" title="css/css-flexbox/percentage-heights-016.html">percentage-heights-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-017.html" title="css/css-flexbox/percentage-heights-017.html">percentage-heights-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-018.html" title="css/css-flexbox/percentage-heights-018.html">percentage-heights-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-heights-019.html" title="css/css-flexbox/percentage-heights-019.html">percentage-heights-019.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-heights-019.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-heights-019.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-margins-001.html" title="css/css-flexbox/percentage-margins-001.html">percentage-margins-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-margins-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-margins-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-max-height-001.html" title="css/css-flexbox/percentage-max-height-001.html">percentage-max-height-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-max-height-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-max-height-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-max-height-002.html" title="css/css-flexbox/percentage-max-height-002.html">percentage-max-height-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-max-height-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-max-height-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-max-height-003.html" title="css/css-flexbox/percentage-max-height-003.html">percentage-max-height-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-max-height-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-max-height-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-max-height-004.html" title="css/css-flexbox/percentage-max-height-004.html">percentage-max-height-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-max-height-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-max-height-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-max-width-cross-axis.html" title="css/css-flexbox/percentage-max-width-cross-axis.html">percentage-max-width-cross-axis.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-max-width-cross-axis.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-max-width-cross-axis.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-padding-001.html" title="css/css-flexbox/percentage-padding-001.html">percentage-padding-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-padding-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-padding-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-padding-002.html" title="css/css-flexbox/percentage-padding-002.html">percentage-padding-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-padding-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-padding-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-size-quirks-002.html" title="css/css-flexbox/percentage-size-quirks-002.html">percentage-size-quirks-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-size-quirks-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-size-quirks-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-size-quirks.html" title="css/css-flexbox/percentage-size-quirks.html">percentage-size-quirks.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-size-quirks.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-size-quirks.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-size-subitems-001.html" title="css/css-flexbox/percentage-size-subitems-001.html">percentage-size-subitems-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-size-subitems-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-size-subitems-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-size.html" title="css/css-flexbox/percentage-size.html">percentage-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/percentage-widths-001.html" title="css/css-flexbox/percentage-widths-001.html">percentage-widths-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/percentage-widths-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/percentage-widths-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-absolute-scrollbar-freeze.html" title="css/css-flexbox/position-absolute-scrollbar-freeze.html">position-absolute-scrollbar-freeze.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-absolute-scrollbar-freeze.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-absolute-scrollbar-freeze.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-fixed-001.html" title="css/css-flexbox/position-fixed-001.html">position-fixed-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-fixed-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-fixed-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-relative-percentage-top-001.html" title="css/css-flexbox/position-relative-percentage-top-001.html">position-relative-percentage-top-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-relative-percentage-top-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-relative-percentage-top-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-relative-percentage-top-002.html" title="css/css-flexbox/position-relative-percentage-top-002.html">position-relative-percentage-top-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-relative-percentage-top-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-relative-percentage-top-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-relative-percentage-top-003.html" title="css/css-flexbox/position-relative-percentage-top-003.html">position-relative-percentage-top-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-relative-percentage-top-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-relative-percentage-top-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html" title="css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html">position-relative-with-scrollable-with-abspos-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html" title="css/css-flexbox/quirks-auto-block-size-with-percentage-item.html">quirks-auto-block-size-with-percentage-item.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/radiobutton-min-size.html" title="css/css-flexbox/radiobutton-min-size.html">radiobutton-min-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/radiobutton-min-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/radiobutton-min-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/relayout-align-items.html" title="css/css-flexbox/relayout-align-items.html">relayout-align-items.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/relayout-align-items.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/relayout-align-items.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/relayout-image-load.html" title="css/css-flexbox/relayout-image-load.html">relayout-image-load.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/relayout-image-load.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/relayout-image-load.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/relayout-input.html" title="css/css-flexbox/relayout-input.html">relayout-input.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/relayout-input.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/relayout-input.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/remove-out-of-flow-child-crash.html" title="css/css-flexbox/remove-out-of-flow-child-crash.html">remove-out-of-flow-child-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/remove-out-of-flow-child-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/remove-out-of-flow-child-crash.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/scrollbars-auto-min-content-sizing.html" title="css/css-flexbox/scrollbars-auto-min-content-sizing.html">scrollbars-auto-min-content-sizing.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/scrollbars-auto-min-content-sizing.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/scrollbars-auto-min-content-sizing.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/scrollbars-auto.html" title="css/css-flexbox/scrollbars-auto.html">scrollbars-auto.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/scrollbars-auto.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/scrollbars-auto.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/scrollbars-no-margin.html" title="css/css-flexbox/scrollbars-no-margin.html">scrollbars-no-margin.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/scrollbars-no-margin.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/scrollbars-no-margin.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/scrollbars.html" title="css/css-flexbox/scrollbars.html">scrollbars.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/scrollbars.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/scrollbars.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/select-element-zero-height-001.html" title="css/css-flexbox/select-element-zero-height-001.html">select-element-zero-height-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/select-element-zero-height-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/select-element-zero-height-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/select-element-zero-height-002.html" title="css/css-flexbox/select-element-zero-height-002.html">select-element-zero-height-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/select-element-zero-height-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/select-element-zero-height-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/shrinking-column-flexbox.html" title="css/css-flexbox/shrinking-column-flexbox.html">shrinking-column-flexbox.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/shrinking-column-flexbox.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/shrinking-column-flexbox.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-after-sibling-size-change.html" title="css/css-flexbox/stretch-after-sibling-size-change.html">stretch-after-sibling-size-change.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-after-sibling-size-change.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-after-sibling-size-change.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-flex-item-checkbox-input.html" title="css/css-flexbox/stretch-flex-item-checkbox-input.html">stretch-flex-item-checkbox-input.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-flex-item-checkbox-input.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-flex-item-checkbox-input.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-flex-item-radio-input.html" title="css/css-flexbox/stretch-flex-item-radio-input.html">stretch-flex-item-radio-input.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-flex-item-radio-input.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-flex-item-radio-input.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-input-in-column.html" title="css/css-flexbox/stretch-input-in-column.html">stretch-input-in-column.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-input-in-column.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-input-in-column.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-obeys-min-max-001.html" title="css/css-flexbox/stretch-obeys-min-max-001.html">stretch-obeys-min-max-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-obeys-min-max-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-obeys-min-max-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-obeys-min-max-002.html" title="css/css-flexbox/stretch-obeys-min-max-002.html">stretch-obeys-min-max-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-obeys-min-max-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-obeys-min-max-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretch-obeys-min-max-003.html" title="css/css-flexbox/stretch-obeys-min-max-003.html">stretch-obeys-min-max-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretch-obeys-min-max-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretch-obeys-min-max-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretched-child-shrink-on-relayout.html" title="css/css-flexbox/stretched-child-shrink-on-relayout.html">stretched-child-shrink-on-relayout.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretched-child-shrink-on-relayout.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretched-child-shrink-on-relayout.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/stretching-orthogonal-flows.html" title="css/css-flexbox/stretching-orthogonal-flows.html">stretching-orthogonal-flows.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/stretching-orthogonal-flows.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/stretching-orthogonal-flows.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-no-natural-size-grandchild.html" title="css/css-flexbox/svg-no-natural-size-grandchild.html">svg-no-natural-size-grandchild.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-no-natural-size-grandchild.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-no-natural-size-grandchild.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-001.html" title="css/css-flexbox/svg-root-as-flex-item-001.html">svg-root-as-flex-item-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-002.html" title="css/css-flexbox/svg-root-as-flex-item-002.html">svg-root-as-flex-item-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-003.html" title="css/css-flexbox/svg-root-as-flex-item-003.html">svg-root-as-flex-item-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-004.html" title="css/css-flexbox/svg-root-as-flex-item-004.html">svg-root-as-flex-item-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-005.html" title="css/css-flexbox/svg-root-as-flex-item-005.html">svg-root-as-flex-item-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/svg-root-as-flex-item-006.html" title="css/css-flexbox/svg-root-as-flex-item-006.html">svg-root-as-flex-item-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/svg-root-as-flex-item-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/svg-root-as-flex-item-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/synthesize-vrl-baseline.html" title="css/css-flexbox/synthesize-vrl-baseline.html">synthesize-vrl-baseline.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/synthesize-vrl-baseline.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/synthesize-vrl-baseline.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-auto-min-width.html" title="css/css-flexbox/table-as-item-auto-min-width.html">table-as-item-auto-min-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-auto-min-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-auto-min-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-change-cell.html" title="css/css-flexbox/table-as-item-change-cell.html">table-as-item-change-cell.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-change-cell.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-change-cell.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-cross-size.html" title="css/css-flexbox/table-as-item-cross-size.html">table-as-item-cross-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-cross-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-cross-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-fixed-min-width-2.html" title="css/css-flexbox/table-as-item-fixed-min-width-2.html">table-as-item-fixed-min-width-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-fixed-min-width-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-fixed-min-width-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-fixed-min-width-3.html" title="css/css-flexbox/table-as-item-fixed-min-width-3.html">table-as-item-fixed-min-width-3.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-fixed-min-width-3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-fixed-min-width-3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-fixed-min-width.html" title="css/css-flexbox/table-as-item-fixed-min-width.html">table-as-item-fixed-min-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-fixed-min-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-fixed-min-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-flex-cross-size.html" title="css/css-flexbox/table-as-item-flex-cross-size.html">table-as-item-flex-cross-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-flex-cross-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-flex-cross-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-inflexible-in-column-1.html" title="css/css-flexbox/table-as-item-inflexible-in-column-1.html">table-as-item-inflexible-in-column-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-inflexible-in-column-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-inflexible-in-column-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-inflexible-in-column-2.html" title="css/css-flexbox/table-as-item-inflexible-in-column-2.html">table-as-item-inflexible-in-column-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-inflexible-in-column-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-inflexible-in-column-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-inflexible-in-row-1.html" title="css/css-flexbox/table-as-item-inflexible-in-row-1.html">table-as-item-inflexible-in-row-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-inflexible-in-row-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-inflexible-in-row-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-inflexible-in-row-2.html" title="css/css-flexbox/table-as-item-inflexible-in-row-2.html">table-as-item-inflexible-in-row-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-inflexible-in-row-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-inflexible-in-row-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-large-intrinsic-size.html" title="css/css-flexbox/table-as-item-large-intrinsic-size.html">table-as-item-large-intrinsic-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-large-intrinsic-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-large-intrinsic-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-min-height-1.html" title="css/css-flexbox/table-as-item-min-height-1.html">table-as-item-min-height-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-min-height-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-min-height-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-narrow-content-2.html" title="css/css-flexbox/table-as-item-narrow-content-2.html">table-as-item-narrow-content-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-narrow-content-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-narrow-content-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-narrow-content.html" title="css/css-flexbox/table-as-item-narrow-content.html">table-as-item-narrow-content.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-narrow-content.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-narrow-content.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-percent-width-cell-001.html" title="css/css-flexbox/table-as-item-percent-width-cell-001.html">table-as-item-percent-width-cell-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-percent-width-cell-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-percent-width-cell-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-specified-height.html" title="css/css-flexbox/table-as-item-specified-height.html">table-as-item-specified-height.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-specified-height.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-specified-height.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-specified-width-vertical.html" title="css/css-flexbox/table-as-item-specified-width-vertical.html">table-as-item-specified-width-vertical.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-specified-width-vertical.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-specified-width-vertical.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-specified-width.html" title="css/css-flexbox/table-as-item-specified-width.html">table-as-item-specified-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-specified-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-specified-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-stretch-cross-size-2.html" title="css/css-flexbox/table-as-item-stretch-cross-size-2.html">table-as-item-stretch-cross-size-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-stretch-cross-size-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-stretch-cross-size-3.html" title="css/css-flexbox/table-as-item-stretch-cross-size-3.html">table-as-item-stretch-cross-size-3.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size-3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-stretch-cross-size-3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-stretch-cross-size-4.html" title="css/css-flexbox/table-as-item-stretch-cross-size-4.html">table-as-item-stretch-cross-size-4.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size-4.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-stretch-cross-size-4.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-stretch-cross-size-5.html" title="css/css-flexbox/table-as-item-stretch-cross-size-5.html">table-as-item-stretch-cross-size-5.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size-5.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-stretch-cross-size-5.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-stretch-cross-size.html" title="css/css-flexbox/table-as-item-stretch-cross-size.html">table-as-item-stretch-cross-size.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-stretch-cross-size.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-as-item-wide-content.html" title="css/css-flexbox/table-as-item-wide-content.html">table-as-item-wide-content.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-as-item-wide-content.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-as-item-wide-content.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-item-flex-percentage-min-width.html" title="css/css-flexbox/table-item-flex-percentage-min-width.html">table-item-flex-percentage-min-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-item-flex-percentage-min-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-item-flex-percentage-min-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-item-flex-percentage-width.html" title="css/css-flexbox/table-item-flex-percentage-width.html">table-item-flex-percentage-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-item-flex-percentage-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-item-flex-percentage-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-with-float-paint.html" title="css/css-flexbox/table-with-float-paint.html">table-with-float-paint.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-with-float-paint.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-with-float-paint.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-with-infinite-max-intrinsic-width.html" title="css/css-flexbox/table-with-infinite-max-intrinsic-width.html">table-with-infinite-max-intrinsic-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-with-infinite-max-intrinsic-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-with-infinite-max-intrinsic-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/table-with-percent-intrinsic-width.html" title="css/css-flexbox/table-with-percent-intrinsic-width.html">table-with-percent-intrinsic-width.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/table-with-percent-intrinsic-width.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/table-with-percent-intrinsic-width.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/text-as-flexitem-size-001.html" title="css/css-flexbox/text-as-flexitem-size-001.html">text-as-flexitem-size-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/text-as-flexitem-size-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/text-as-flexitem-size-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/text-overflow-on-flexbox-001.html" title="css/css-flexbox/text-overflow-on-flexbox-001.html">text-overflow-on-flexbox-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/text-overflow-on-flexbox-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/text-overflow-on-flexbox-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/webkit-box-vertical-writing-mode.html" title="css/css-flexbox/webkit-box-vertical-writing-mode.html">webkit-box-vertical-writing-mode.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/webkit-box-vertical-writing-mode.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/webkit-box-vertical-writing-mode.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/whitespace-in-flexitem-001.html" title="css/css-flexbox/whitespace-in-flexitem-001.html">whitespace-in-flexitem-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/whitespace-in-flexitem-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/whitespace-in-flexitem-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-flexbox/zero-content-size-with-scrollbar-crash.html" title="css/css-flexbox/zero-content-size-with-scrollbar-crash.html">zero-content-size-with-scrollbar-crash.html</a> <a class="wpt-live" href="http://wpt.live/css/css-flexbox/zero-content-size-with-scrollbar-crash.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/zero-content-size-with-scrollbar-crash.html">(source)</a> </ul> </details> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#propdef-align-content">align-content</a>, in § 8.4 <li><a href="#propdef-align-items">align-items</a>, in § 8.3 <li><a href="#propdef-align-self">align-self</a>, in § 8.3 <li> auto <ul> <li><a href="#valdef-align-items-auto">value for align-items, align-self</a>, in § 8.3 <li><a href="#valdef-flex-basis-auto">value for flex-basis</a>, in § 7.1 </ul> <li><a href="#valdef-align-items-baseline">baseline</a>, in § 8.3 <li> center <ul> <li><a href="#valdef-align-content-center">value for align-content</a>, in § 8.4 <li><a href="#valdef-align-items-center">value for align-items, align-self</a>, in § 8.3 <li><a href="#valdef-justify-content-center">value for justify-content</a>, in § 8.2 </ul> <li><a href="#collapsed-flex-item">collapsed</a>, in § 4.4 <li><a href="#collapsed-flex-item">collapsed flex item</a>, in § 4.4 <li><a href="#valdef-flex-direction-column">column</a>, in § 5.1 <li><a href="#valdef-flex-direction-column-reverse">column-reverse</a>, in § 5.1 <li><a href="#valdef-flex-basis-content">content</a>, in § 7.1 <li><a href="#content-based-minimum-size">content-based minimum size</a>, in § 4.5 <li><a href="#content-size-suggestion">content size suggestion</a>, in § 4.5 <li><a href="#cross-axis">cross axis</a>, in § 2 <li><a href="#cross-axis">cross-axis</a>, in § 2 <li><a href="#cross-axis-baseline">cross-axis baseline set</a>, in § 8.5 <li><a href="#cross-dimension">cross dimension</a>, in § 2 <li><a href="#cross-end">cross-end</a>, in § 2 <li><a href="#cross-size">cross size</a>, in § 2 <li><a href="#cross-size-property">cross size property</a>, in § 2 <li><a href="#cross-start">cross-start</a>, in § 2 <li><a href="#definite">definite</a>, in § 9.8 <li><a href="#definite">definite size</a>, in § 9.8 <li><a href="#cross-axis-baseline">first cross-axis baseline set</a>, in § 8.5 <li><a href="#main-axis-baseline">first main-axis baseline set</a>, in § 8.5 <li> flex <ul> <li><a href="#propdef-flex">(property)</a>, in § 7.1 <li><a href="#valdef-display-flex">value for display</a>, in § 3 </ul> <li><a href="#flex-base-size">flex base size</a>, in § 9.2 <li><a href="#valdef-flex-flex-basis"><'flex-basis'></a>, in § 7.1 <li><a href="#flex-flex-basis">flex basis</a>, in § 7.1 <li><a href="#propdef-flex-basis">flex-basis</a>, in § 7.2.3 <li><a href="#flex-container">flex container</a>, in § 2 <li><a href="#flex-direction">flex direction</a>, in § 2 <li><a href="#propdef-flex-direction">flex-direction</a>, in § 5.1 <li> flex-end <ul> <li><a href="#valdef-align-content-flex-end">value for align-content</a>, in § 8.4 <li><a href="#valdef-align-items-flex-end">value for align-items, align-self</a>, in § 8.3 <li><a href="#valdef-justify-content-flex-end">value for justify-content</a>, in § 8.2 </ul> <li><a href="#flex-factor">flex factor</a>, in § 7.1 <li><a href="#propdef-flex-flow">flex-flow</a>, in § 5.3 <li><a href="#flex-formatting-context">flex formatting context</a>, in § 3 <li><a href="#valdef-flex-flex-grow"><'flex-grow'></a>, in § 7.1 <li><a href="#propdef-flex-grow">flex-grow</a>, in § 7.2.1 <li><a href="#flex-flex-grow-factor">flex grow factor</a>, in § 7.1 <li><a href="#flexible">flexible</a>, in § 7 <li><a href="#flex-item">flex item</a>, in § 2 <li><a href="#flex-layout">flex layout</a>, in § 1 <li><a href="#flex-level">flex-level</a>, in § 4 <li><a href="#flex-line">flex line</a>, in § 6 <li><a href="#valdef-flex-flex-shrink"><'flex-shrink'></a>, in § 7.1 <li><a href="#propdef-flex-shrink">flex-shrink</a>, in § 7.2.2 <li><a href="#flex-flex-shrink-factor">flex shrink factor</a>, in § 7.1 <li> flex-start <ul> <li><a href="#valdef-align-content-flex-start">value for align-content</a>, in § 8.4 <li><a href="#valdef-align-items-flex-start">value for align-items, align-self</a>, in § 8.3 <li><a href="#valdef-justify-content-flex-start">value for justify-content</a>, in § 8.2 </ul> <li><a href="#propdef-flex-wrap">flex-wrap</a>, in § 5.2 <li><a href="#fully-inflexible">fully inflexible</a>, in § 7 <li><a href="#hypothetical-cross-size">hypothetical cross size</a>, in § 9.4 <li><a href="#hypothetical-main-size">hypothetical main size</a>, in § 9.2 <li><a href="#definite">indefinite</a>, in § 9.8 <li><a href="#definite">indefinite size</a>, in § 9.8 <li><a href="#initial-free-space">initial free space</a>, in § 9.7 <li><a href="#valdef-display-inline-flex">inline-flex</a>, in § 3 <li><a href="#propdef-justify-content">justify-content</a>, in § 8.2 <li><a href="#cross-axis-baseline">last cross-axis baseline set</a>, in § 8.5 <li><a href="#main-axis-baseline">last main-axis baseline set</a>, in § 8.5 <li><a href="#main-axis">main axis</a>, in § 2 <li><a href="#main-axis">main-axis</a>, in § 2 <li><a href="#main-axis-baseline">main-axis baseline set</a>, in § 8.5 <li><a href="#main-dimension">main dimension</a>, in § 2 <li><a href="#main-end">main-end</a>, in § 2 <li><a href="#main-size">main size</a>, in § 2 <li><a href="#main-size-property">main size property</a>, in § 2 <li><a href="#main-start">main-start</a>, in § 2 <li><a href="#max-cross-size">max cross size</a>, in § 2 <li><a href="#max-cross-size-property">max cross size property</a>, in § 2 <li><a href="#max-main-size">max main size</a>, in § 2 <li><a href="#max-main-size-property">max main size property</a>, in § 2 <li><a href="#min-cross-size">min cross size</a>, in § 2 <li><a href="#min-cross-size-property">min cross size property</a>, in § 2 <li><a href="#min-main-size">min main size</a>, in § 2 <li><a href="#min-main-size-property">min main size property</a>, in § 2 <li><a href="#multi-line-flex-container">multi-line</a>, in § 6 <li><a href="#multi-line-flex-container">multi-line flex container</a>, in § 6 <li><a href="#valdef-flex-none">none</a>, in § 7.1 <li><a href="#valdef-flex-wrap-nowrap">nowrap</a>, in § 5.2 <li> <number> <ul> <li><a href="#valdef-flex-grow-number">value for flex-grow</a>, in § 7.2.1 <li><a href="#valdef-flex-shrink-number">value for flex-shrink</a>, in § 7.2.2 </ul> <li><a href="#baseline-participation">participates in baseline alignment</a>, in § 8.3 <li><a href="#remaining-free-space">remaining free space</a>, in § 9.7 <li><a href="#valdef-flex-direction-row">row</a>, in § 5.1 <li><a href="#valdef-flex-direction-row-reverse">row-reverse</a>, in § 5.1 <li><a href="#scaled-flex-shrink-factor">scaled flex shrink factor</a>, in § 9.7 <li><a href="#single-line-flex-container">single-line</a>, in § 6 <li><a href="#single-line-flex-container">single-line flex container</a>, in § 6 <li> space-around <ul> <li><a href="#valdef-align-content-space-around">value for align-content</a>, in § 8.4 <li><a href="#valdef-justify-content-space-around">value for justify-content</a>, in § 8.2 </ul> <li> space-between <ul> <li><a href="#valdef-align-content-space-between">value for align-content</a>, in § 8.4 <li><a href="#valdef-justify-content-space-between">value for justify-content</a>, in § 8.2 </ul> <li><a href="#specified-size-suggestion">specified size suggestion</a>, in § 4.5 <li> stretch <ul> <li><a href="#valdef-align-content-stretch">value for align-content</a>, in § 8.4 <li><a href="#valdef-align-items-stretch">value for align-items, align-self</a>, in § 8.3 </ul> <li><a href="#stretched">stretched</a>, in § 8.3 <li><a href="#target-main-size">target main size</a>, in § 9.7 <li><a href="#transferred-size-suggestion">transferred size suggestion</a>, in § 4.5 <li><a href="#valdef-flex-wrap-wrap">wrap</a>, in § 5.2 <li><a href="#valdef-flex-wrap-wrap-reverse">wrap-reverse</a>, in § 5.2 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li>alignment baseline <li>alignment context <li>baseline set <li>generate baselines <li>justify-self <li>last-baseline alignment <li>start <li>synthesize baseline <li>synthesized baseline </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>content edge <li>margin edge </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>fragmentation container <li>fragmentation context </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>initial <li>legacy name alias <li>used value </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>anonymous <li>block box <li>block container <li>block-level <li>block-level box <li>blockify <li>containing block <li>display <li>establishes an independent formatting context <li>flow layout <li>formatting context <li>in-flow <li>inline-level <li>order <li>order-modified document order <li>replaced element <li>text node <li>text sequence <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms: <ul> <li>cross-size </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li>specified size </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>non-scrollable overflow value <li>overflow <li>scroll container <li>scrollport <li>visible </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>bottom <li>left <li>position <li>relative <li>right <li>static <li>static position <li>static-position rectangle <li>top </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::first-letter <li>::first-line <li>first formatted line </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>automatic block size <li>automatic minimum size <li>automatic size <li>available space <li>behave as auto <li>box-sizing <li>definite <li>height <li>indefinite <li>inner size <li>intrinsic size contribution <li>intrinsic sizing <li>max-content <li>max-content (for width) <li>max-content constraint <li>max-content contribution <li>max-content size <li>maximum size <li>min-content <li>min-content (for width) <li>min-content constraint <li>min-content contribution <li>min-content size <li>minimum size <li>outer size <li>preferred size <li>width </ul> <li> <a data-link-type="biblio">[CSS-SIZING-4]</a> defines the following terms: <ul> <li>aspect-ratio <li>fit-content <li>preferred aspect ratio </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>document white space characters <li>white-space </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-decoration </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><length-percentage> <li><number> <li>? <li>CSS bracketed range notation <li>CSS-wide keywords <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>block size <li>block-end <li>block-start <li>endmost <li>horizontal-tb <li>inline axis <li>inline size <li>inline-end <li>inline-start <li>ltr <li>rtl <li>startmost <li>vertical-rl <li>writing mode <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>auto (for table-layout) <li>auto (for z-index) <li>page-break-after <li>page-break-before <li>z-index </ul> <li> <a data-link-type="biblio">[CSS3-BREAK]</a> defines the following terms: <ul> <li>break-after <li>break-before <li>break-inside </ul> <li> <a data-link-type="biblio">[CSS3-WRITING-MODES]</a> defines the following terms: <ul> <li>direction <li>end <li>start </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>resolved value </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-align/"><cite>CSS Box Alignment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-flexbox-1/">https://drafts.csswg.org/css-flexbox-1/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-3/">https://drafts.csswg.org/css-images-3/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-sizing-4">[CSS-SIZING-4] <dd>Tab Atkins Jr.; Elika Etemad; Jen Simmons. <a href="https://drafts.csswg.org/css-sizing-4/"><cite>CSS Box Sizing Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-4/">https://drafts.csswg.org/css-sizing-4/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css3-break">[CSS3-BREAK] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css3-writing-modes">[CSS3-WRITING-MODES] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-cssom-1">[CSSOM-1] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-4/</a> <dt id="biblio-css3ui">[CSS3UI] <dd>Tantek Çelik; Florian Rivoal. <a href="https://drafts.csswg.org/css-ui-3/"><cite>CSS Basic User Interface Module Level 3 (CSS3 UI)</cite></a>. URL: <a href="https://drafts.csswg.org/css-ui-3/">https://drafts.csswg.org/css-ui-3/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⑤">align-content</a> <td>flex-start | flex-end | center | space-between | space-around | stretch <td>stretch <td>multi-line flex containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items①⓪">align-items</a> <td>flex-start | flex-end | center | baseline | stretch <td>stretch <td>flex containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self③④">align-self</a> <td>auto | flex-start | flex-end | center | baseline | stretch <td>auto <td>flex items <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex" id="ref-for-propdef-flex④②">flex</a> <td>none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] <td>0 1 auto <td>flex items <td>no <td>see individual properties <td>by computed value type <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-basis" id="ref-for-propdef-flex-basis②⑧">flex-basis</a> <td>content | <'width'> <td>auto <td>flex items <td>no <td>relative to the flex container’s inner main size <td>by computed value type <td>per grammar <td>specified keyword or a computed <length-percentage> value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-direction" id="ref-for-propdef-flex-direction①⓪">flex-direction</a> <td>row | row-reverse | column | column-reverse <td>row <td>flex containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-flow" id="ref-for-propdef-flex-flow①⓪">flex-flow</a> <td><'flex-direction'> || <'flex-wrap'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-grow" id="ref-for-propdef-flex-grow②①">flex-grow</a> <td><number [0,∞]> <td>0 <td>flex items <td>no <td>n/a <td>by computed value type <td>per grammar <td>specified number <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-shrink" id="ref-for-propdef-flex-shrink⑧">flex-shrink</a> <td><number [0,∞]> <td>1 <td>flex items <td>no <td>n/a <td>number <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-flex-wrap" id="ref-for-propdef-flex-wrap①②">flex-wrap</a> <td>nowrap | wrap | wrap-reverse <td>nowrap <td>flex containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑤">justify-content</a> <td>flex-start | flex-end | center | space-between | space-around <td>flex-start <td>flex containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Outline Web-compatible algorithm here, once we have one. <a href="https://github.com/w3c/csswg-drafts/issues/8884">[Issue #8884]</a> <a class="issue-return" href="#issue-bc420653" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="align-content-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" title="The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.">align-content</a> In all current engines. <div class="support"> Firefox28+Safari9+Chrome29+ <hr> Opera?Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="align-items-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" title="The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.">align-items</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera?Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" title="The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.">align-self</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-basis-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" title="The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.">flex-basis</a> In all current engines. <div class="support"> Firefox22+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-direction-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" title="The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).">flex-direction</a> In all current engines. <div class="support"> Firefox81+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-flow-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow" title="The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.">flex-flow</a> In all current engines. <div class="support"> Firefox28+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-grow-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" title="The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size.">flex-grow</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-shrink-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" title="The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.">flex-shrink</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-wrap-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" title="The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.">flex-wrap</a> In all current engines. <div class="support"> Firefox28+Safari9+Chrome29+ <hr> Opera17+Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android52+iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile18+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="flex-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" title="The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.">flex</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android20+iOS Safari?Chrome for Android?Android WebView4.4+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="justify-content-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" title="The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.">justify-content</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome29+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "026d7801": {"dfnID":"026d7801","dfnText":"relative","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-relative"}],"title":"4.3. \nFlex Item Z-Ordering"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-relative"}, "03109b7e": {"dfnID":"03109b7e","dfnText":"indefinite","external":true,"refSections":[{"refs":[{"id":"ref-for-indefinite"}],"title":"9.8. \nDefinite and Indefinite Sizes"}],"url":"https://drafts.csswg.org/css-sizing-3/#indefinite"}, "035798cf": {"dfnID":"035798cf","dfnText":"inner size","external":true,"refSections":[{"refs":[{"id":"ref-for-inner-size"}],"title":"9.3. \nMain Size Determination"}],"url":"https://drafts.csswg.org/css-sizing-3/#inner-size"}, "06bc643d": {"dfnID":"06bc643d","dfnText":"rtl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-rtl"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl"}, "0a52b385": {"dfnID":"0a52b385","dfnText":"break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-after"},{"id":"ref-for-propdef-break-after\u2460"},{"id":"ref-for-propdef-break-after\u2461"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-propdef-break-after\u2462"},{"id":"ref-for-propdef-break-after\u2463"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-propdef-break-after\u2464"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-after"}, "0b918417": {"dfnID":"0b918417","dfnText":"min-content contribution","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-contribution"},{"id":"ref-for-min-content-contribution\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-min-content-contribution\u2461"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-min-content-contribution\u2462"},{"id":"ref-for-min-content-contribution\u2463"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-min-content-contribution\u2464"},{"id":"ref-for-min-content-contribution\u2465"},{"id":"ref-for-min-content-contribution\u2466"},{"id":"ref-for-min-content-contribution\u2467"},{"id":"ref-for-min-content-contribution\u2468"},{"id":"ref-for-min-content-contribution\u2460\u24ea"},{"id":"ref-for-min-content-contribution\u2460\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-contribution"}, "0bc73d68": {"dfnID":"0bc73d68","dfnText":"formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-formatting-context"}],"title":"9.6. \nCross-Axis Alignment"},{"refs":[{"id":"ref-for-formatting-context\u2460"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-display-4/#formatting-context"}, "0bd2791e": {"dfnID":"0bd2791e","dfnText":"max-content constraint","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content-constraint"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-max-content-constraint\u2460"},{"id":"ref-for-max-content-constraint\u2461"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-max-content-constraint\u2462"},{"id":"ref-for-max-content-constraint\u2463"},{"id":"ref-for-max-content-constraint\u2464"},{"id":"ref-for-max-content-constraint\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content-constraint"}, "0e5cedd7": {"dfnID":"0e5cedd7","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-valdef-width-auto\u2461"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-valdef-width-auto\u2462"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-valdef-width-auto\u2463"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-valdef-width-auto\u2464"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-valdef-width-auto\u2465"},{"id":"ref-for-valdef-width-auto\u2466"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-valdef-width-auto\u2467"},{"id":"ref-for-valdef-width-auto\u2468"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460\u24ea"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460\u2460"},{"id":"ref-for-valdef-width-auto\u2460\u2461"},{"id":"ref-for-valdef-width-auto\u2460\u2462"},{"id":"ref-for-valdef-width-auto\u2460\u2463"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460\u2464"},{"id":"ref-for-valdef-width-auto\u2460\u2468"},{"id":"ref-for-valdef-width-auto\u2461\u24ea"},{"id":"ref-for-valdef-width-auto\u2461\u2460"},{"id":"ref-for-valdef-width-auto\u2461\u2461"},{"id":"ref-for-valdef-width-auto\u2461\u2462"},{"id":"ref-for-valdef-width-auto\u2461\u2463"},{"id":"ref-for-valdef-width-auto\u2461\u2464"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460\u2465"},{"id":"ref-for-valdef-width-auto\u2460\u2466"},{"id":"ref-for-valdef-width-auto\u2460\u2467"},{"id":"ref-for-valdef-width-auto\u2461\u2465"},{"id":"ref-for-valdef-width-auto\u2461\u2466"},{"id":"ref-for-valdef-width-auto\u2461\u2467"},{"id":"ref-for-valdef-width-auto\u2461\u2468"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "0fdaa620": {"dfnID":"0fdaa620","dfnText":"justify-self","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-self"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#propdef-justify-self"}, "11ee6625": {"dfnID":"11ee6625","dfnText":"available space","external":true,"refSections":[{"refs":[{"id":"ref-for-available"},{"id":"ref-for-available\u2460"},{"id":"ref-for-available\u2461"},{"id":"ref-for-available\u2462"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-available\u2463"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-available\u2464"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-available\u2465"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-sizing-3/#available"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"},{"id":"ref-for-propdef-visibility\u2460"},{"id":"ref-for-propdef-visibility\u2461"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-propdef-visibility\u2462"}],"title":"9.4. \nCross Size Determination"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "1370dad0": {"dfnID":"1370dad0","dfnText":"block-start","external":true,"refSections":[{"refs":[{"id":"ref-for-block-start"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-block-start\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-block-start\u2461"}],"title":"9.6. \nCross-Axis Alignment"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-start"}, "16310992": {"dfnID":"16310992","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"}],"title":"7.2.1. \nThe flex-grow property"},{"refs":[{"id":"ref-for-number-value\u2463"},{"id":"ref-for-number-value\u2464"}],"title":"7.2.2. \nThe flex-shrink property"}],"url":"https://drafts.csswg.org/css-values-4/#number-value"}, "16b64b43": {"dfnID":"16b64b43","dfnText":"vertical-rl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl"}, "18222566": {"dfnID":"18222566","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"}],"title":"7.2.3. \nThe flex-basis property"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "18d57a4b": {"dfnID":"18d57a4b","dfnText":"max-content (for width)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-max-content"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-valdef-width-max-content\u2460"},{"id":"ref-for-valdef-width-max-content\u2461"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-valdef-width-max-content\u2462"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content"}, "190183bb": {"dfnID":"190183bb","dfnText":"block size","external":true,"refSections":[{"refs":[{"id":"ref-for-block-size"}],"title":"2. \nFlex Layout Box Model and Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-size"}, "1a548a6a": {"dfnID":"1a548a6a","dfnText":"blockify","external":true,"refSections":[{"refs":[{"id":"ref-for-blockify"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#blockify"}, "20747766": {"dfnID":"20747766","dfnText":"synthesized baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-synthesize-baseline"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-synthesize-baseline\u2460"},{"id":"ref-for-synthesize-baseline\u2461"},{"id":"ref-for-synthesize-baseline\u2462"},{"id":"ref-for-synthesize-baseline\u2463"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-align-3/#synthesize-baseline"}, "214c6f37": {"dfnID":"214c6f37","dfnText":"first formatted line","external":true,"refSections":[{"refs":[{"id":"ref-for-first-formatted-line"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"}],"url":"https://drafts.csswg.org/css-pseudo-4/#first-formatted-line"}, "224fb41d": {"dfnID":"224fb41d","dfnText":"non-scrollable overflow value","external":true,"refSections":[{"refs":[{"id":"ref-for-non-scrollable-overflow-value"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"https://drafts.csswg.org/css-overflow-3/#non-scrollable-overflow-value"}, "26a40c98": {"dfnID":"26a40c98","dfnText":"max-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-max-content\u2460"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-max-content\u2461"}],"title":"9.9. \nIntrinsic Sizes"},{"refs":[{"id":"ref-for-max-content\u2462"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-max-content\u2463"},{"id":"ref-for-max-content\u2464"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-max-content\u2465"},{"id":"ref-for-max-content\u2466"},{"id":"ref-for-max-content\u2467"},{"id":"ref-for-max-content\u2468"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-max-content\u2460\u24ea"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-max-content\u2460\u2460"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-max-content\u2460\u2461"},{"id":"ref-for-max-content\u2460\u2462"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-max-content\u2460\u2463"},{"id":"ref-for-max-content\u2460\u2464"},{"id":"ref-for-max-content\u2460\u2465"},{"id":"ref-for-max-content\u2460\u2466"},{"id":"ref-for-max-content\u2460\u2467"},{"id":"ref-for-max-content\u2460\u2468"},{"id":"ref-for-max-content\u2461\u24ea"},{"id":"ref-for-max-content\u2461\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "26bd7702": {"dfnID":"26bd7702","dfnText":"minimum size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-width"},{"id":"ref-for-min-width\u2460"},{"id":"ref-for-min-width\u2461"},{"id":"ref-for-min-width\u2462"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-width"}, "288dfcac": {"dfnID":"288dfcac","dfnText":"static","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-static"}],"title":"4.3. \nFlex Item Z-Ordering"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-static"}, "28d6b91b": {"dfnID":"28d6b91b","dfnText":"max-content","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-max-content\u2460"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-max-content\u2461"}],"title":"9.9. \nIntrinsic Sizes"},{"refs":[{"id":"ref-for-max-content\u2462"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-max-content\u2463"},{"id":"ref-for-max-content\u2464"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-max-content\u2465"},{"id":"ref-for-max-content\u2466"},{"id":"ref-for-max-content\u2467"},{"id":"ref-for-max-content\u2468"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-max-content\u2460\u24ea"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-max-content\u2460\u2460"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-max-content\u2460\u2461"},{"id":"ref-for-max-content\u2460\u2462"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-max-content\u2460\u2463"},{"id":"ref-for-max-content\u2460\u2464"},{"id":"ref-for-max-content\u2460\u2465"},{"id":"ref-for-max-content\u2460\u2466"},{"id":"ref-for-max-content\u2460\u2467"},{"id":"ref-for-max-content\u2460\u2468"},{"id":"ref-for-max-content\u2461\u24ea"},{"id":"ref-for-max-content\u2461\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "2c3a36fb": {"dfnID":"2c3a36fb","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-visible"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-valdef-overflow-visible\u2460"},{"id":"ref-for-valdef-overflow-visible\u2461"},{"id":"ref-for-valdef-overflow-visible\u2462"},{"id":"ref-for-valdef-overflow-visible\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "30868380": {"dfnID":"30868380","dfnText":"specified size","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-size"},{"id":"ref-for-specified-size\u2460"},{"id":"ref-for-specified-size\u2461"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-images-3/#specified-size"}, "31168949": {"dfnID":"31168949","dfnText":"max-content contribution","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content-contribution"},{"id":"ref-for-max-content-contribution\u2460"},{"id":"ref-for-max-content-contribution\u2461"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-max-content-contribution\u2462"},{"id":"ref-for-max-content-contribution\u2463"},{"id":"ref-for-max-content-contribution\u2464"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-max-content-contribution\u2465"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-max-content-contribution\u2466"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-max-content-contribution\u2467"},{"id":"ref-for-max-content-contribution\u2468"},{"id":"ref-for-max-content-contribution\u2460\u24ea"},{"id":"ref-for-max-content-contribution\u2460\u2460"},{"id":"ref-for-max-content-contribution\u2460\u2461"},{"id":"ref-for-max-content-contribution\u2460\u2462"},{"id":"ref-for-max-content-contribution\u2460\u2463"},{"id":"ref-for-max-content-contribution\u2460\u2464"},{"id":"ref-for-max-content-contribution\u2460\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content-contribution"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.3. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "36fd3b67": {"dfnID":"36fd3b67","dfnText":"aspect-ratio","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-aspect-ratio"},{"id":"ref-for-propdef-aspect-ratio\u2460"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio"}, "37c3d179": {"dfnID":"37c3d179","dfnText":"block-end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "37f0daea": {"dfnID":"37f0daea","dfnText":"inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-size"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-inline-size\u2460"}],"title":"4.2. \nFlex Item Margins and Paddings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-size"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3da47525": {"dfnID":"3da47525","dfnText":"auto (for table-layout)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-table-layout-auto"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css2/#valdef-table-layout-auto"}, "3f0db204": {"dfnID":"3f0db204","dfnText":"min-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content"},{"id":"ref-for-min-content\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-min-content\u2461"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-min-content\u2462"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-min-content\u2463"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-min-content\u2464"},{"id":"ref-for-min-content\u2465"},{"id":"ref-for-min-content\u2466"},{"id":"ref-for-min-content\u2467"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-min-content\u2468"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-min-content\u2460\u24ea"},{"id":"ref-for-min-content\u2460\u2460"},{"id":"ref-for-min-content\u2460\u2461"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-min-content\u2460\u2462"},{"id":"ref-for-min-content\u2460\u2463"},{"id":"ref-for-min-content\u2460\u2464"},{"id":"ref-for-min-content\u2460\u2465"},{"id":"ref-for-min-content\u2460\u2466"},{"id":"ref-for-min-content\u2460\u2467"},{"id":"ref-for-min-content\u2460\u2468"},{"id":"ref-for-min-content\u2461\u24ea"},{"id":"ref-for-min-content\u2461\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "40060954": {"dfnID":"40060954","dfnText":"fragmentation container","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-container"},{"id":"ref-for-fragmentation-container\u2460"}],"title":"10. \nFragmenting Flex Layout"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-container"}, "42349ef8": {"dfnID":"42349ef8","dfnText":"startmost","external":true,"refSections":[{"refs":[{"id":"ref-for-css-start"},{"id":"ref-for-css-start\u2460"},{"id":"ref-for-css-start\u2461"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#css-start"}, "43667deb": {"dfnID":"43667deb","dfnText":"inline axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-inline-axis\u2460"},{"id":"ref-for-inline-axis\u2461"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-axis"}, "466b2ed9": {"dfnID":"466b2ed9","dfnText":"inline-start","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-start"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-inline-start\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-inline-start\u2461"}],"title":"9.6. \nCross-Axis Alignment"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "4792e5bd": {"dfnID":"4792e5bd","dfnText":"cross-size","external":true,"refSections":[{"refs":[{"id":"ref-for-cross-size\u2461\u2465"},{"id":"ref-for-cross-size\u2461\u2467"},{"id":"ref-for-cross-size\u2462\u2461"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-cross-size\u2463\u2464"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://www.w3.org/TR/css-flexbox-1/#cross-size"}, "48594205": {"dfnID":"48594205","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-css-start\u2462"},{"id":"ref-for-css-start\u2463"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-start"}, "49494f8c": {"dfnID":"49494f8c","dfnText":"static-position rectangle","external":true,"refSections":[{"refs":[{"id":"ref-for-static-position-rectangle"},{"id":"ref-for-static-position-rectangle\u2460"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-static-position-rectangle\u2461"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-static-position-rectangle\u2462"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-position-3/#static-position-rectangle"}, "4afd591e": {"dfnID":"4afd591e","dfnText":"automatic block size","external":true,"refSections":[{"refs":[{"id":"ref-for-automatic-block-size"}],"title":"9.2. \nLine Length Determination"}],"url":"https://drafts.csswg.org/css-sizing-3/#automatic-block-size"}, "4d7d3dcd": {"dfnID":"4d7d3dcd","dfnText":"initial","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-initial"}],"title":"7.1.1. \nBasic Values of flex"}],"url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-initial"}, "4fe61159": {"dfnID":"4fe61159","dfnText":"resolved value","external":true,"refSections":[{"refs":[{"id":"ref-for-resolved-value"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/cssom-1/#resolved-value"}, "513590d3": {"dfnID":"513590d3","dfnText":"min-content (for width)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-min-content"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-valdef-width-min-content\u2460"},{"id":"ref-for-valdef-width-min-content\u2461"},{"id":"ref-for-valdef-width-min-content\u2462"},{"id":"ref-for-valdef-width-min-content\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"7.1. \nThe flex Shorthand"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "571aeab5": {"dfnID":"571aeab5","dfnText":"static position","external":true,"refSections":[{"refs":[{"id":"ref-for-static-position"},{"id":"ref-for-static-position\u2460"},{"id":"ref-for-static-position\u2461"},{"id":"ref-for-static-position\u2462"},{"id":"ref-for-static-position\u2463"},{"id":"ref-for-static-position\u2464"},{"id":"ref-for-static-position\u2465"},{"id":"ref-for-static-position\u2466"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-position-3/#static-position"}, "5bc3d0ec": {"dfnID":"5bc3d0ec","dfnText":"text-decoration","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-propdef-text-decoration\u2460"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5ddc23c6": {"dfnID":"5ddc23c6","dfnText":"page-break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-after"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "60bbf126": {"dfnID":"60bbf126","dfnText":"scrollport","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollport"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollport"}, "6501e5b3": {"dfnID":"6501e5b3","dfnText":"white-space","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-white-space"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-white-space\u2460"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "65a738ee": {"dfnID":"65a738ee","dfnText":"definite","external":true,"refSections":[{"refs":[{"id":"ref-for-definite\u2460\u2462"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-definite\u2461\u2466"},{"id":"ref-for-definite\u2461\u2467"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-sizing-3/#definite"}, "668e27c9": {"dfnID":"668e27c9","dfnText":"preferred size","external":true,"refSections":[{"refs":[{"id":"ref-for-preferred-size"},{"id":"ref-for-preferred-size\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-preferred-size\u2461"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-preferred-size\u2462"},{"id":"ref-for-preferred-size\u2463"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-preferred-size\u2464"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-preferred-size\u2465"},{"id":"ref-for-preferred-size\u2466"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css-sizing-3/#preferred-size"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"},{"id":"ref-for-propdef-height\u2460"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-propdef-height\u2461"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-height\u2462"},{"id":"ref-for-propdef-height\u2463"},{"id":"ref-for-propdef-height\u2464"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-height\u2465"},{"id":"ref-for-propdef-height\u2466"},{"id":"ref-for-propdef-height\u2467"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-propdef-height\u2468"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-propdef-height\u2460\u24ea"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-propdef-height\u2460\u2460"},{"id":"ref-for-propdef-height\u2460\u2461"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-propdef-height\u2460\u2462"},{"id":"ref-for-propdef-height\u2460\u2463"},{"id":"ref-for-propdef-height\u2460\u2464"},{"id":"ref-for-propdef-height\u2460\u2465"},{"id":"ref-for-propdef-height\u2460\u2466"},{"id":"ref-for-propdef-height\u2460\u2467"},{"id":"ref-for-propdef-height\u2460\u2468"},{"id":"ref-for-propdef-height\u2461\u24ea"},{"id":"ref-for-propdef-height\u2461\u2460"},{"id":"ref-for-propdef-height\u2461\u2461"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6dc3914f": {"dfnID":"6dc3914f","dfnText":"min-content constraint","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-constraint"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-min-content-constraint\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-min-content-constraint\u2461"},{"id":"ref-for-min-content-constraint\u2462"},{"id":"ref-for-min-content-constraint\u2463"},{"id":"ref-for-min-content-constraint\u2464"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-constraint"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-comb-one\u2465"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-comb-one\u2466"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"},{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"},{"id":"ref-for-comb-one\u2460\u2465"},{"id":"ref-for-comb-one\u2460\u2466"},{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"},{"id":"ref-for-comb-one\u2461\u24ea"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"},{"id":"ref-for-comb-one\u2461\u2464"}],"title":"8.4. \nPacking Flex Lines: the align-content property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "75bfa627": {"dfnID":"75bfa627","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-line"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-selectordef-first-line\u2460"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-selectordef-first-line\u2461"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "75e46141": {"dfnID":"75e46141","dfnText":"box-sizing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-sizing"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-propdef-box-sizing\u2460"},{"id":"ref-for-propdef-box-sizing\u2461"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-propdef-box-sizing\u2462"},{"id":"ref-for-propdef-box-sizing\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing"}, "799c2725": {"dfnID":"799c2725","dfnText":"fit-content","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-fit-content"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content"}, "7c24ec23": {"dfnID":"7c24ec23","dfnText":"synthesize baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-synthesize-baseline"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-synthesize-baseline\u2460"},{"id":"ref-for-synthesize-baseline\u2461"},{"id":"ref-for-synthesize-baseline\u2462"},{"id":"ref-for-synthesize-baseline\u2463"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-align-3/#synthesize-baseline"}, "7f0d729a": {"dfnID":"7f0d729a","dfnText":"ltr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-ltr"},{"id":"ref-for-valdef-direction-ltr\u2460"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr"}, "7fb2c729": {"dfnID":"7fb2c729","dfnText":"margin edge","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-edge"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"}],"url":"https://drafts.csswg.org/css-box-4/#margin-edge"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-block-level\u2460"}],"title":"9.2. \nLine Length Determination"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "8573ec1b": {"dfnID":"8573ec1b","dfnText":"intrinsic sizing","external":true,"refSections":[{"refs":[{"id":"ref-for-intrinsic-sizing"}],"title":"9.9. \nIntrinsic Sizes"}],"url":"https://drafts.csswg.org/css-sizing-3/#intrinsic-sizing"}, "86923d07": {"dfnID":"86923d07","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-scroll-container\u2460"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-scroll-container\u2461"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-scroll-container\u2462"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"}],"url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-propdef-overflow\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-propdef-overflow\u2461"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-propdef-overflow\u2462"},{"id":"ref-for-propdef-overflow\u2468"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-propdef-overflow\u2463"},{"id":"ref-for-propdef-overflow\u2464"},{"id":"ref-for-propdef-overflow\u2465"},{"id":"ref-for-propdef-overflow\u2466"},{"id":"ref-for-propdef-overflow\u2467"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"},{"id":"ref-for-propdef-width\u2460"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-propdef-width\u2461"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-width\u2462"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-propdef-width\u2463"},{"id":"ref-for-propdef-width\u2464"},{"id":"ref-for-propdef-width\u2465"},{"id":"ref-for-propdef-width\u2466"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-width\u2467"},{"id":"ref-for-propdef-width\u2468"},{"id":"ref-for-propdef-width\u2460\u24ea"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2460"},{"id":"ref-for-propdef-width\u2460\u2461"},{"id":"ref-for-propdef-width\u2460\u2462"},{"id":"ref-for-propdef-width\u2460\u2463"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2464"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2465"},{"id":"ref-for-propdef-width\u2460\u2466"},{"id":"ref-for-propdef-width\u2460\u2467"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2468"},{"id":"ref-for-propdef-width\u2461\u24ea"},{"id":"ref-for-propdef-width\u2461\u2460"},{"id":"ref-for-propdef-width\u2461\u2463"},{"id":"ref-for-propdef-width\u2461\u2464"},{"id":"ref-for-propdef-width\u2461\u2465"},{"id":"ref-for-propdef-width\u2461\u2466"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-propdef-width\u2461\u2461"},{"id":"ref-for-propdef-width\u2461\u2462"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-comb-any\u2460"}],"title":"7.1. \nThe flex Shorthand"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8e39589a": {"dfnID":"8e39589a","dfnText":"block box","external":true,"refSections":[{"refs":[{"id":"ref-for-block-box"}],"title":"4.2. \nFlex Item Margins and Paddings"}],"url":"https://drafts.csswg.org/css-display-4/#block-box"}, "8f568cb6": {"dfnID":"8f568cb6","dfnText":"page-break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-before"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "9522389e": {"dfnID":"9522389e","dfnText":"break-inside","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-inside"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "97cc51ce": {"dfnID":"97cc51ce","dfnText":"intrinsic size contribution","external":true,"refSections":[{"refs":[{"id":"ref-for-intrinsic-size-contribution"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-intrinsic-size-contribution\u2460"},{"id":"ref-for-intrinsic-size-contribution\u2461"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution"}, "99cabd32": {"dfnID":"99cabd32","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-in-flow\u2460"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "9cb30ff4": {"dfnID":"9cb30ff4","dfnText":"alignment baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-alignment-baseline"},{"id":"ref-for-alignment-baseline\u2460"},{"id":"ref-for-alignment-baseline\u2461"},{"id":"ref-for-alignment-baseline\u2462"},{"id":"ref-for-alignment-baseline\u2463"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-alignment-baseline\u2464"},{"id":"ref-for-alignment-baseline\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#alignment-baseline"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-computed-value\u2461"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-computed-value\u2462"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-computed-value\u2463"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9f13b712": {"dfnID":"9f13b712","dfnText":"behave as auto","external":true,"refSections":[{"refs":[{"id":"ref-for-behave-as-auto"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"https://drafts.csswg.org/css-sizing-3/#behave-as-auto"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a00822b3": {"dfnID":"a00822b3","dfnText":"anonymous","external":true,"refSections":[{"refs":[{"id":"ref-for-anonymous"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "a1addf6c": {"dfnID":"a1addf6c","dfnText":"::first-letter","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-letter"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-selectordef-first-letter\u2460"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-selectordef-first-letter\u2461"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "a270c80d": {"dfnID":"a270c80d","dfnText":"fragmentation context","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-context"},{"id":"ref-for-fragmentation-context\u2460"}],"title":"10. \nFragmenting Flex Layout"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-used-value\u2461"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-used-value\u2462"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a58a3cd8": {"dfnID":"a58a3cd8","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"},{"id":"ref-for-propdef-bottom\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-writing-mode\u2460"}],"title":"4.2. \nFlex Item Margins and Paddings"},{"refs":[{"id":"ref-for-writing-mode\u2461"},{"id":"ref-for-writing-mode\u2462"},{"id":"ref-for-writing-mode\u2463"},{"id":"ref-for-writing-mode\u2464"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-writing-mode\u2465"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-writing-mode\u2466"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-writing-mode\u2467"},{"id":"ref-for-writing-mode\u2468"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-writing-mode\u2460\u24ea"},{"id":"ref-for-writing-mode\u2460\u2460"},{"id":"ref-for-writing-mode\u2460\u2461"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "a758a91a": {"dfnID":"a758a91a","dfnText":"establishes an independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-establish-an-independent-formatting-context"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-replaced-element\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-replaced-element\u2461"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "a91f632a": {"dfnID":"a91f632a","dfnText":"legacy name alias","external":true,"refSections":[{"refs":[{"id":"ref-for-legacy-name-alias"}],"title":"\nAppendix B: -webkit- Legacy Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#legacy-name-alias"}, "a963f9ba": {"dfnID":"a963f9ba","dfnText":"document white space characters","external":true,"refSections":[{"refs":[{"id":"ref-for-white-space"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-text-4/#white-space"}, "ac6ecea0": {"dfnID":"ac6ecea0","dfnText":"text sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-css-text-sequence"},{"id":"ref-for-css-text-sequence\u2460"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#css-text-sequence"}, "ac9b4191": {"dfnID":"ac9b4191","dfnText":"baseline set","external":true,"refSections":[{"refs":[{"id":"ref-for-baseline-set"},{"id":"ref-for-baseline-set\u2460"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-baseline-set\u2461"},{"id":"ref-for-baseline-set\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#baseline-set"}, "ad47bbf0": {"dfnID":"ad47bbf0","dfnText":"CSS bracketed range notation","external":true,"refSections":[{"refs":[{"id":"ref-for-css-bracketed-range-notation"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-values-4/#css-bracketed-range-notation"}, "aec5d7d1": {"dfnID":"aec5d7d1","dfnText":"end","external":true,"refSections":[{"refs":[{"id":"ref-for-css-end"}],"title":"8.1. \nAligning with auto margins"},{"refs":[{"id":"ref-for-css-end\u2463"},{"id":"ref-for-css-end\u2464"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-end"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"},{"id":"ref-for-propdef-right\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b30820a7": {"dfnID":"b30820a7","dfnText":"text node","external":true,"refSections":[{"refs":[{"id":"ref-for-text-nodes"}],"title":"4. \nFlex Items"}],"url":"https://drafts.csswg.org/css-display-4/#text-nodes"}, "b4da59cc": {"dfnID":"b4da59cc","dfnText":"horizontal-tb","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb"},{"id":"ref-for-valdef-writing-mode-horizontal-tb\u2460"}],"title":"\nAppendix A: Axis Mappings"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb"}, "b713cb30": {"dfnID":"b713cb30","dfnText":"automatic size","external":true,"refSections":[{"refs":[{"id":"ref-for-automatic-size"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-automatic-size\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-automatic-size\u2461"}],"title":"9.8. \nDefinite and Indefinite Sizes"}],"url":"https://drafts.csswg.org/css-sizing-3/#automatic-size"}, "b8850feb": {"dfnID":"b8850feb","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-start"},{"id":"ref-for-valdef-self-position-start\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#valdef-self-position-start"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"},{"id":"ref-for-propdef-position\u2460"}],"title":"4.3. \nFlex Item Z-Ordering"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "b9f6db61": {"dfnID":"b9f6db61","dfnText":"last-baseline alignment","external":true,"refSections":[{"refs":[{"id":"ref-for-last-baseline-alignment"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#last-baseline-alignment"}, "ba9b3d06": {"dfnID":"ba9b3d06","dfnText":"order-modified document order","external":true,"refSections":[{"refs":[{"id":"ref-for-order-modified-document-order"}],"title":"5.4. \nItem Reordering: the order property"},{"refs":[{"id":"ref-for-order-modified-document-order\u2460"}],"title":"9. \nFlex Layout Algorithm"},{"refs":[{"id":"ref-for-order-modified-document-order\u2461"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-order-modified-document-order\u2462"},{"id":"ref-for-order-modified-document-order\u2463"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"https://drafts.csswg.org/css-display-4/#order-modified-document-order"}, "baseline-participation": {"dfnID":"baseline-participation","dfnText":"participates in baseline alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-participation"},{"id":"ref-for-baseline-participation"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-baseline-participation"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#baseline-participation"}, "c1654d36": {"dfnID":"c1654d36","dfnText":"break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-before"},{"id":"ref-for-propdef-break-before\u2460"},{"id":"ref-for-propdef-break-before\u2461"},{"id":"ref-for-propdef-break-before\u2462"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-propdef-break-before\u2463"},{"id":"ref-for-propdef-break-before\u2464"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-propdef-break-before\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "c82d6e13": {"dfnID":"c82d6e13","dfnText":"z-index","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-z-index"}],"title":"4.3. \nFlex Item Z-Ordering"}],"url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "cde9ab5b": {"dfnID":"cde9ab5b","dfnText":"automatic minimum size","external":true,"refSections":[{"refs":[{"id":"ref-for-automatic-minimum-size"},{"id":"ref-for-automatic-minimum-size\u2460"},{"id":"ref-for-automatic-minimum-size\u2461"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-automatic-minimum-size\u2462"},{"id":"ref-for-automatic-minimum-size\u2463"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-automatic-minimum-size\u2464"},{"id":"ref-for-automatic-minimum-size\u2465"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-automatic-minimum-size\u2466"},{"id":"ref-for-automatic-minimum-size\u2467"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"}, "collapsed-flex-item": {"dfnID":"collapsed-flex-item","dfnText":"collapsed flex item","external":false,"refSections":[{"refs":[{"id":"ref-for-collapsed-flex-item"},{"id":"ref-for-collapsed-flex-item\u2460"},{"id":"ref-for-collapsed-flex-item\u2461"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-collapsed-flex-item\u2462"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-collapsed-flex-item\u2463"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-collapsed-flex-item\u2464"},{"id":"ref-for-collapsed-flex-item\u2465"},{"id":"ref-for-collapsed-flex-item\u2466"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"#collapsed-flex-item"}, "content-based-minimum-size": {"dfnID":"content-based-minimum-size","dfnText":"content-based minimum size","external":false,"refSections":[{"refs":[{"id":"ref-for-content-based-minimum-size"},{"id":"ref-for-content-based-minimum-size\u2460"},{"id":"ref-for-content-based-minimum-size\u2461"},{"id":"ref-for-content-based-minimum-size\u2462"},{"id":"ref-for-content-based-minimum-size\u2463"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-content-based-minimum-size\u2464"},{"id":"ref-for-content-based-minimum-size\u2465"},{"id":"ref-for-content-based-minimum-size\u2466"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-content-based-minimum-size\u2467"}],"title":"\nChanges since the 16 October 2017 CR"}],"url":"#content-based-minimum-size"}, "content-size-suggestion": {"dfnID":"content-size-suggestion","dfnText":"content size suggestion","external":false,"refSections":[{"refs":[{"id":"ref-for-content-size-suggestion"},{"id":"ref-for-content-size-suggestion\u2460"},{"id":"ref-for-content-size-suggestion\u2461"},{"id":"ref-for-content-size-suggestion\u2462"},{"id":"ref-for-content-size-suggestion\u2463"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"#content-size-suggestion"}, "cross-axis": {"dfnID":"cross-axis","dfnText":"cross axis","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-axis"},{"id":"ref-for-cross-axis\u2460"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-cross-axis\u2461"},{"id":"ref-for-cross-axis\u2462"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-cross-axis\u2463"},{"id":"ref-for-cross-axis\u2464"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-cross-axis\u2465"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-cross-axis\u2466"}],"title":"8. \nAlignment"},{"refs":[{"id":"ref-for-cross-axis\u2467"},{"id":"ref-for-cross-axis\u2468"},{"id":"ref-for-cross-axis\u2460\u24ea"},{"id":"ref-for-cross-axis\u2460\u2460"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-cross-axis\u2460\u2461"},{"id":"ref-for-cross-axis\u2460\u2462"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-cross-axis\u2460\u2463"},{"id":"ref-for-cross-axis\u2460\u2464"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-cross-axis\u2460\u2465"},{"id":"ref-for-cross-axis\u2460\u2466"},{"id":"ref-for-cross-axis\u2460\u2467"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-cross-axis\u2460\u2468"},{"id":"ref-for-cross-axis\u2461\u24ea"},{"id":"ref-for-cross-axis\u2461\u2460"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-cross-axis\u2461\u2461"},{"id":"ref-for-cross-axis\u2461\u2462"},{"id":"ref-for-cross-axis\u2461\u2463"},{"id":"ref-for-cross-axis\u2461\u2464"},{"id":"ref-for-cross-axis\u2461\u2465"},{"id":"ref-for-cross-axis\u2461\u2466"},{"id":"ref-for-cross-axis\u2461\u2467"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#cross-axis"}, "cross-axis-baseline": {"dfnID":"cross-axis-baseline","dfnText":"\n\t\t\tcross-axis baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-axis-baseline"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-cross-axis-baseline\u2460"},{"id":"ref-for-cross-axis-baseline\u2461"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#cross-axis-baseline"}, "cross-dimension": {"dfnID":"cross-dimension","dfnText":"cross dimension","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-dimension"},{"id":"ref-for-cross-dimension\u2460"},{"id":"ref-for-cross-dimension\u2461"}],"title":"2. \nFlex Layout Box Model and Terminology"}],"url":"#cross-dimension"}, "cross-end": {"dfnID":"cross-end","dfnText":"cross-end","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-end"},{"id":"ref-for-cross-end\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-cross-end\u2461"},{"id":"ref-for-cross-end\u2462"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-cross-end\u2463"},{"id":"ref-for-cross-end\u2464"},{"id":"ref-for-cross-end\u2465"},{"id":"ref-for-cross-end\u2466"},{"id":"ref-for-cross-end\u2467"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-cross-end\u2468"},{"id":"ref-for-cross-end\u2460\u24ea"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#cross-end"}, "cross-size": {"dfnID":"cross-size","dfnText":"cross size","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-size"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-cross-size\u2460"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-cross-size\u2461"},{"id":"ref-for-cross-size\u2462"},{"id":"ref-for-cross-size\u2463"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-cross-size\u2464"},{"id":"ref-for-cross-size\u2465"},{"id":"ref-for-cross-size\u2466"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-cross-size\u2467"},{"id":"ref-for-cross-size\u2468"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-cross-size\u2460\u24ea"},{"id":"ref-for-cross-size\u2460\u2460"},{"id":"ref-for-cross-size\u2460\u2461"},{"id":"ref-for-cross-size\u2460\u2462"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-cross-size\u2460\u2463"},{"id":"ref-for-cross-size\u2460\u2464"},{"id":"ref-for-cross-size\u2460\u2465"},{"id":"ref-for-cross-size\u2460\u2466"},{"id":"ref-for-cross-size\u2460\u2467"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-cross-size\u2460\u2468"},{"id":"ref-for-cross-size\u2461\u24ea"}],"title":"9.6. \nCross-Axis Alignment"},{"refs":[{"id":"ref-for-cross-size\u2461\u2460"},{"id":"ref-for-cross-size\u2461\u2461"},{"id":"ref-for-cross-size\u2461\u2462"},{"id":"ref-for-cross-size\u2461\u2463"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-cross-size\u2461\u2464"},{"id":"ref-for-cross-size\u2461\u2466"},{"id":"ref-for-cross-size\u2461\u2468"},{"id":"ref-for-cross-size\u2462\u24ea"},{"id":"ref-for-cross-size\u2462\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-cross-size\u2462\u2462"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-cross-size\u2462\u2463"},{"id":"ref-for-cross-size\u2462\u2464"},{"id":"ref-for-cross-size\u2462\u2465"},{"id":"ref-for-cross-size\u2462\u2466"},{"id":"ref-for-cross-size\u2462\u2467"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-cross-size\u2462\u2468"},{"id":"ref-for-cross-size\u2464\u2462"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-cross-size\u2463\u24ea"},{"id":"ref-for-cross-size\u2463\u2460"},{"id":"ref-for-cross-size\u2463\u2461"},{"id":"ref-for-cross-size\u2463\u2462"},{"id":"ref-for-cross-size\u2463\u2463"},{"id":"ref-for-cross-size\u2463\u2465"},{"id":"ref-for-cross-size\u2463\u2466"},{"id":"ref-for-cross-size\u2463\u2467"},{"id":"ref-for-cross-size\u2463\u2468"},{"id":"ref-for-cross-size\u2464\u24ea"},{"id":"ref-for-cross-size\u2464\u2460"},{"id":"ref-for-cross-size\u2464\u2461"},{"id":"ref-for-cross-size\u2464\u2463"},{"id":"ref-for-cross-size\u2464\u2464"},{"id":"ref-for-cross-size\u2464\u2465"},{"id":"ref-for-cross-size\u2464\u2466"},{"id":"ref-for-cross-size\u2464\u2467"},{"id":"ref-for-cross-size\u2464\u2468"},{"id":"ref-for-cross-size\u2465\u24ea"},{"id":"ref-for-cross-size\u2465\u2460"},{"id":"ref-for-cross-size\u2465\u2461"},{"id":"ref-for-cross-size\u2465\u2462"},{"id":"ref-for-cross-size\u2465\u2463"},{"id":"ref-for-cross-size\u2465\u2464"},{"id":"ref-for-cross-size\u2465\u2465"},{"id":"ref-for-cross-size\u2465\u2466"},{"id":"ref-for-cross-size\u2465\u2467"},{"id":"ref-for-cross-size\u2465\u2468"},{"id":"ref-for-cross-size\u2466\u24ea"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#cross-size"}, "cross-size-property": {"dfnID":"cross-size-property","dfnText":"cross size property","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-size-property"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-cross-size-property\u2460"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-cross-size-property\u2461"}],"title":"\nClarifications"}],"url":"#cross-size-property"}, "cross-start": {"dfnID":"cross-start","dfnText":"cross-start","external":false,"refSections":[{"refs":[{"id":"ref-for-cross-start"},{"id":"ref-for-cross-start\u2460"},{"id":"ref-for-cross-start\u2461"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-cross-start\u2462"},{"id":"ref-for-cross-start\u2463"},{"id":"ref-for-cross-start\u2464"},{"id":"ref-for-cross-start\u2465"},{"id":"ref-for-cross-start\u2466"},{"id":"ref-for-cross-start\u2467"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-cross-start\u2468"},{"id":"ref-for-cross-start\u2460\u24ea"},{"id":"ref-for-cross-start\u2460\u2460"},{"id":"ref-for-cross-start\u2460\u2461"},{"id":"ref-for-cross-start\u2460\u2462"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-cross-start\u2460\u2463"},{"id":"ref-for-cross-start\u2460\u2464"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-cross-start\u2460\u2465"},{"id":"ref-for-cross-start\u2460\u2466"},{"id":"ref-for-cross-start\u2460\u2467"},{"id":"ref-for-cross-start\u2460\u2468"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#cross-start"}, "d0e23e1f": {"dfnID":"d0e23e1f","dfnText":"outer size","external":true,"refSections":[{"refs":[{"id":"ref-for-outer-size"}],"title":"9.3. \nMain Size Determination"},{"refs":[{"id":"ref-for-outer-size\u2460"}],"title":"9.8. \nDefinite and Indefinite Sizes"}],"url":"https://drafts.csswg.org/css-sizing-3/#outer-size"}, "d332e4ec": {"dfnID":"d332e4ec","dfnText":"auto (for z-index)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-z-index-auto"}],"title":"4.3. \nFlex Item Z-Ordering"}],"url":"https://drafts.csswg.org/css2/#valdef-z-index-auto"}, "d66c8386": {"dfnID":"d66c8386","dfnText":"alignment context","external":true,"refSections":[{"refs":[{"id":"ref-for-shared-alignment-context"},{"id":"ref-for-shared-alignment-context\u2460"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-align-3/#shared-alignment-context"}, "d7fa3e1c": {"dfnID":"d7fa3e1c","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "daf2c48f": {"dfnID":"daf2c48f","dfnText":"maximum size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-width"},{"id":"ref-for-max-width\u2460"},{"id":"ref-for-max-width\u2461"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-width"}, "db7f5876": {"dfnID":"db7f5876","dfnText":"endmost","external":true,"refSections":[{"refs":[{"id":"ref-for-css-end\u2460"},{"id":"ref-for-css-end\u2461"},{"id":"ref-for-css-end\u2462"}],"title":"8.5. \nFlex Container Baselines"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#css-end"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"},{"id":"ref-for-propdef-left\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "definite": {"dfnID":"definite","dfnText":"definite","external":false,"refSections":[{"refs":[{"id":"ref-for-definite"},{"id":"ref-for-definite\u2460"},{"id":"ref-for-definite\u2461"},{"id":"ref-for-definite\u2462"},{"id":"ref-for-definite\u2463"},{"id":"ref-for-definite\u2464"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-definite\u2465"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-definite\u2466"},{"id":"ref-for-definite\u2467"},{"id":"ref-for-definite\u2468"},{"id":"ref-for-definite\u2460\u24ea"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-definite\u2460\u2460"},{"id":"ref-for-definite\u2460\u2461"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-definite\u2460\u2463"},{"id":"ref-for-definite\u2460\u2464"},{"id":"ref-for-definite\u2460\u2465"},{"id":"ref-for-definite\u2460\u2466"},{"id":"ref-for-definite\u2460\u2467"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-definite\u2460\u2468"},{"id":"ref-for-definite\u2461\u24ea"},{"id":"ref-for-definite\u2461\u2460"},{"id":"ref-for-definite\u2461\u2461"},{"id":"ref-for-definite\u2461\u2462"},{"id":"ref-for-definite\u2461\u2463"},{"id":"ref-for-definite\u2461\u2464"},{"id":"ref-for-definite\u2461\u2465"},{"id":"ref-for-definite\u2461\u2468"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-definite\u2462\u24ea"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-definite\u2462\u2460"},{"id":"ref-for-definite\u2462\u2461"},{"id":"ref-for-definite\u2462\u2462"},{"id":"ref-for-definite\u2462\u2463"},{"id":"ref-for-definite\u2462\u2464"},{"id":"ref-for-definite\u2462\u2465"},{"id":"ref-for-definite\u2462\u2466"},{"id":"ref-for-definite\u2462\u2467"},{"id":"ref-for-definite\u2462\u2468"},{"id":"ref-for-definite\u2463\u2464"},{"id":"ref-for-definite\u2463\u2465"},{"id":"ref-for-definite\u2463\u2466"},{"id":"ref-for-definite\u2463\u2467"},{"id":"ref-for-definite\u2463\u2468"},{"id":"ref-for-definite\u2464\u24ea"},{"id":"ref-for-definite\u2464\u2460"},{"id":"ref-for-definite\u2464\u2461"},{"id":"ref-for-definite\u2464\u2462"},{"id":"ref-for-definite\u2464\u2463"},{"id":"ref-for-definite\u2464\u2464"},{"id":"ref-for-definite\u2464\u2465"},{"id":"ref-for-definite\u2464\u2466"},{"id":"ref-for-definite\u2464\u2467"},{"id":"ref-for-definite\u2464\u2468"},{"id":"ref-for-definite\u2465\u24ea"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-definite\u2463\u24ea"},{"id":"ref-for-definite\u2463\u2460"},{"id":"ref-for-definite\u2463\u2461"},{"id":"ref-for-definite\u2463\u2462"},{"id":"ref-for-definite\u2463\u2463"},{"id":"ref-for-definite\u2465\u2460"}],"title":"\nClarifications"}],"url":"#definite"}, "e0b6ed58": {"dfnID":"e0b6ed58","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "e1483d91": {"dfnID":"e1483d91","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"},{"id":"ref-for-propdef-top\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "e1ab41b7": {"dfnID":"e1ab41b7","dfnText":"block axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-axis"}, "e66d392c": {"dfnID":"e66d392c","dfnText":"min-content","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content"},{"id":"ref-for-min-content\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-min-content\u2461"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-min-content\u2462"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-min-content\u2463"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-min-content\u2464"},{"id":"ref-for-min-content\u2465"},{"id":"ref-for-min-content\u2466"},{"id":"ref-for-min-content\u2467"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-min-content\u2468"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-min-content\u2460\u24ea"},{"id":"ref-for-min-content\u2460\u2460"},{"id":"ref-for-min-content\u2460\u2461"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-min-content\u2460\u2462"},{"id":"ref-for-min-content\u2460\u2463"},{"id":"ref-for-min-content\u2460\u2464"},{"id":"ref-for-min-content\u2460\u2465"},{"id":"ref-for-min-content\u2460\u2466"},{"id":"ref-for-min-content\u2460\u2467"},{"id":"ref-for-min-content\u2460\u2468"},{"id":"ref-for-min-content\u2461\u24ea"},{"id":"ref-for-min-content\u2461\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-propdef-display\u2460"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-propdef-display\u2461"},{"id":"ref-for-propdef-display\u2462"},{"id":"ref-for-propdef-display\u2463"},{"id":"ref-for-propdef-display\u2464"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-propdef-display\u2465"},{"id":"ref-for-propdef-display\u2466"},{"id":"ref-for-propdef-display\u2467"},{"id":"ref-for-propdef-display\u2468"},{"id":"ref-for-propdef-display\u2460\u24ea"},{"id":"ref-for-propdef-display\u2460\u2460"},{"id":"ref-for-propdef-display\u2460\u2461"},{"id":"ref-for-propdef-display\u2460\u2462"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-display\u2460\u2463"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-propdef-display\u2460\u2464"},{"id":"ref-for-propdef-display\u2460\u2465"},{"id":"ref-for-propdef-display\u2460\u2466"},{"id":"ref-for-propdef-display\u2460\u2467"},{"id":"ref-for-propdef-display\u2460\u2468"},{"id":"ref-for-propdef-display\u2461\u24ea"},{"id":"ref-for-propdef-display\u2461\u2460"},{"id":"ref-for-propdef-display\u2461\u2461"},{"id":"ref-for-propdef-display\u2461\u2462"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-propdef-display\u2461\u2463"},{"id":"ref-for-propdef-display\u2461\u2464"},{"id":"ref-for-propdef-display\u2461\u2465"},{"id":"ref-for-propdef-display\u2461\u2466"},{"id":"ref-for-propdef-display\u2461\u2467"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"},{"id":"ref-for-containing-block\u2460"}],"title":"4.2. \nFlex Item Margins and Paddings"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "ee0a8be8": {"dfnID":"ee0a8be8","dfnText":"generate baselines","external":true,"refSections":[{"refs":[{"id":"ref-for-generate-baselines"},{"id":"ref-for-generate-baselines\u2460"},{"id":"ref-for-generate-baselines\u2461"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-generate-baselines\u2462"},{"id":"ref-for-generate-baselines\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"https://drafts.csswg.org/css-align-3/#generate-baselines"}, "f210b721": {"dfnID":"f210b721","dfnText":"order","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-order"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-propdef-order\u2460"}],"title":"4.3. \nFlex Item Z-Ordering"},{"refs":[{"id":"ref-for-propdef-order\u2461"},{"id":"ref-for-propdef-order\u2462"}],"title":"5. \nOrdering and Orientation"},{"refs":[{"id":"ref-for-propdef-order\u2463"},{"id":"ref-for-propdef-order\u2464"},{"id":"ref-for-propdef-order\u2465"},{"id":"ref-for-propdef-order\u2466"},{"id":"ref-for-propdef-order\u2467"}],"title":"5.4. \nItem Reordering: the order property"},{"refs":[{"id":"ref-for-propdef-order\u2468"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-propdef-order\u2460\u24ea"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-propdef-order\u2460\u2460"},{"id":"ref-for-propdef-order\u2460\u2461"},{"id":"ref-for-propdef-order\u2460\u2462"},{"id":"ref-for-propdef-order\u2460\u2463"},{"id":"ref-for-propdef-order\u2460\u2464"},{"id":"ref-for-propdef-order\u2460\u2468"},{"id":"ref-for-propdef-order\u2461\u2462"},{"id":"ref-for-propdef-order\u2461\u2463"},{"id":"ref-for-propdef-order\u2461\u2464"},{"id":"ref-for-propdef-order\u2461\u2465"},{"id":"ref-for-propdef-order\u2461\u2466"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-propdef-order\u2460\u2465"},{"id":"ref-for-propdef-order\u2460\u2466"},{"id":"ref-for-propdef-order\u2460\u2467"},{"id":"ref-for-propdef-order\u2461\u24ea"},{"id":"ref-for-propdef-order\u2461\u2460"},{"id":"ref-for-propdef-order\u2461\u2461"},{"id":"ref-for-propdef-order\u2461\u2467"},{"id":"ref-for-propdef-order\u2461\u2468"},{"id":"ref-for-propdef-order\u2462\u24ea"},{"id":"ref-for-propdef-order\u2462\u2460"},{"id":"ref-for-propdef-order\u2462\u2461"}],"title":"\nClarifications"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-order"}, "f271d0a1": {"dfnID":"f271d0a1","dfnText":"flow layout","external":true,"refSections":[{"refs":[{"id":"ref-for-flow-layout"},{"id":"ref-for-flow-layout\u2460"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"}],"url":"https://drafts.csswg.org/css-display-4/#flow-layout"}, "f4a5f1c1": {"dfnID":"f4a5f1c1","dfnText":"inline-end","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-end"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-end"}, "f9be6a15": {"dfnID":"f9be6a15","dfnText":"preferred aspect ratio","external":true,"refSections":[{"refs":[{"id":"ref-for-preferred-aspect-ratio"},{"id":"ref-for-preferred-aspect-ratio\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-preferred-aspect-ratio\u2461"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-preferred-aspect-ratio\u2462"},{"id":"ref-for-preferred-aspect-ratio\u2463"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-preferred-aspect-ratio\u2464"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-preferred-aspect-ratio\u2465"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio"}, "fd9aa8f7": {"dfnID":"fd9aa8f7","dfnText":"block-level box","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level-box"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-block-level-box\u2460"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-display-4/#block-level-box"}, "ff0f7174": {"dfnID":"ff0f7174","dfnText":"content edge","external":true,"refSections":[{"refs":[{"id":"ref-for-content-edge"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-content-edge\u2460"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"https://drafts.csswg.org/css-box-4/#content-edge"}, "flex-base-size": {"dfnID":"flex-base-size","dfnText":"flex base size","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-base-size"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-flex-base-size\u2460"},{"id":"ref-for-flex-base-size\u2461"},{"id":"ref-for-flex-base-size\u2462"},{"id":"ref-for-flex-base-size\u2463"},{"id":"ref-for-flex-base-size\u2464"},{"id":"ref-for-flex-base-size\u2465"},{"id":"ref-for-flex-base-size\u2466"},{"id":"ref-for-flex-base-size\u2467"},{"id":"ref-for-flex-base-size\u2468"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-flex-base-size\u2460\u24ea"},{"id":"ref-for-flex-base-size\u2460\u2460"},{"id":"ref-for-flex-base-size\u2460\u2461"},{"id":"ref-for-flex-base-size\u2460\u2462"},{"id":"ref-for-flex-base-size\u2460\u2463"},{"id":"ref-for-flex-base-size\u2460\u2464"},{"id":"ref-for-flex-base-size\u2460\u2465"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-flex-base-size\u2460\u2466"},{"id":"ref-for-flex-base-size\u2460\u2467"},{"id":"ref-for-flex-base-size\u2460\u2468"},{"id":"ref-for-flex-base-size\u2461\u24ea"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-flex-base-size\u2461\u2460"},{"id":"ref-for-flex-base-size\u2461\u2461"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-flex-base-size\u2461\u2462"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-flex-base-size\u2461\u2463"},{"id":"ref-for-flex-base-size\u2461\u2464"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-flex-base-size\u2461\u2465"},{"id":"ref-for-flex-base-size\u2461\u2466"},{"id":"ref-for-flex-base-size\u2461\u2467"},{"id":"ref-for-flex-base-size\u2461\u2468"},{"id":"ref-for-flex-base-size\u2462\u24ea"},{"id":"ref-for-flex-base-size\u2462\u2460"},{"id":"ref-for-flex-base-size\u2462\u2461"},{"id":"ref-for-flex-base-size\u2462\u2462"},{"id":"ref-for-flex-base-size\u2462\u2463"},{"id":"ref-for-flex-base-size\u2462\u2464"},{"id":"ref-for-flex-base-size\u2462\u2465"},{"id":"ref-for-flex-base-size\u2463\u24ea"},{"id":"ref-for-flex-base-size\u2463\u2460"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-flex-base-size\u2462\u2466"},{"id":"ref-for-flex-base-size\u2462\u2467"},{"id":"ref-for-flex-base-size\u2462\u2468"}],"title":"\nClarifications"}],"url":"#flex-base-size"}, "flex-container": {"dfnID":"flex-container","dfnText":"flex container","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-container"},{"id":"ref-for-flex-container\u2460"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-flex-container\u2461"},{"id":"ref-for-flex-container\u2462"},{"id":"ref-for-flex-container\u2463"},{"id":"ref-for-flex-container\u2464"},{"id":"ref-for-flex-container\u2465"},{"id":"ref-for-flex-container\u2466"},{"id":"ref-for-flex-container\u2467"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-flex-container\u2468"},{"id":"ref-for-flex-container\u2460\u24ea"},{"id":"ref-for-flex-container\u2460\u2460"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-flex-container\u2460\u2461"},{"id":"ref-for-flex-container\u2460\u2462"},{"id":"ref-for-flex-container\u2460\u2463"},{"id":"ref-for-flex-container\u2460\u2464"},{"id":"ref-for-flex-container\u2460\u2465"},{"id":"ref-for-flex-container\u2460\u2466"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-flex-container\u2460\u2467"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-flex-container\u2460\u2468"},{"id":"ref-for-flex-container\u2461\u24ea"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-flex-container\u2461\u2460"},{"id":"ref-for-flex-container\u2461\u2461"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-flex-container\u2461\u2462"},{"id":"ref-for-flex-container\u2461\u2463"},{"id":"ref-for-flex-container\u2461\u2464"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-flex-container\u2461\u2465"},{"id":"ref-for-flex-container\u2461\u2466"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-flex-container\u2461\u2467"},{"id":"ref-for-flex-container\u2461\u2468"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-flex-container\u2462\u24ea"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-flex-container\u2462\u2460"},{"id":"ref-for-flex-container\u2462\u2461"},{"id":"ref-for-flex-container\u2462\u2462"},{"id":"ref-for-flex-container\u2462\u2463"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-flex-container\u2462\u2464"},{"id":"ref-for-flex-container\u2462\u2465"},{"id":"ref-for-flex-container\u2462\u2466"},{"id":"ref-for-flex-container\u2462\u2467"},{"id":"ref-for-flex-container\u2462\u2468"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-flex-container\u2463\u24ea"},{"id":"ref-for-flex-container\u2463\u2460"},{"id":"ref-for-flex-container\u2463\u2461"},{"id":"ref-for-flex-container\u2463\u2462"},{"id":"ref-for-flex-container\u2463\u2463"},{"id":"ref-for-flex-container\u2463\u2464"},{"id":"ref-for-flex-container\u2463\u2465"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-flex-container\u2463\u2466"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-flex-container\u2463\u2467"},{"id":"ref-for-flex-container\u2463\u2468"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-flex-container\u2464\u24ea"}],"title":"9.9. \nIntrinsic Sizes"},{"refs":[{"id":"ref-for-flex-container\u2464\u2460"},{"id":"ref-for-flex-container\u2464\u2461"},{"id":"ref-for-flex-container\u2464\u2462"},{"id":"ref-for-flex-container\u2464\u2463"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-flex-container\u2464\u2464"},{"id":"ref-for-flex-container\u2464\u2465"},{"id":"ref-for-flex-container\u2464\u2466"},{"id":"ref-for-flex-container\u2464\u2467"},{"id":"ref-for-flex-container\u2464\u2468"},{"id":"ref-for-flex-container\u2465\u24ea"},{"id":"ref-for-flex-container\u2465\u2460"},{"id":"ref-for-flex-container\u2465\u2461"},{"id":"ref-for-flex-container\u2465\u2462"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-flex-container\u2465\u2463"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-flex-container\u2465\u2464"},{"id":"ref-for-flex-container\u2465\u2465"},{"id":"ref-for-flex-container\u2465\u2466"},{"id":"ref-for-flex-container\u2465\u2467"},{"id":"ref-for-flex-container\u2465\u2468"},{"id":"ref-for-flex-container\u2466\u24ea"},{"id":"ref-for-flex-container\u2466\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-flex-container\u2466\u2461"},{"id":"ref-for-flex-container\u2466\u2462"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-flex-container\u2466\u2463"},{"id":"ref-for-flex-container\u2466\u2464"},{"id":"ref-for-flex-container\u2466\u2465"},{"id":"ref-for-flex-container\u2466\u2466"},{"id":"ref-for-flex-container\u2466\u2467"},{"id":"ref-for-flex-container\u2466\u2468"},{"id":"ref-for-flex-container\u2467\u24ea"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-flex-container\u2467\u2460"},{"id":"ref-for-flex-container\u2467\u2461"},{"id":"ref-for-flex-container\u2467\u2462"},{"id":"ref-for-flex-container\u2467\u2463"},{"id":"ref-for-flex-container\u2467\u2466"},{"id":"ref-for-flex-container\u2467\u2467"},{"id":"ref-for-flex-container\u2467\u2468"},{"id":"ref-for-flex-container\u2468\u24ea"},{"id":"ref-for-flex-container\u2468\u2460"},{"id":"ref-for-flex-container\u2468\u2461"},{"id":"ref-for-flex-container\u2468\u2462"},{"id":"ref-for-flex-container\u2468\u2463"},{"id":"ref-for-flex-container\u2468\u2464"},{"id":"ref-for-flex-container\u2468\u2465"},{"id":"ref-for-flex-container\u2468\u2466"},{"id":"ref-for-flex-container\u2468\u2467"},{"id":"ref-for-flex-container\u2468\u2468"},{"id":"ref-for-flex-container\u2460\u24ea\u24ea"},{"id":"ref-for-flex-container\u2460\u24ea\u2460"},{"id":"ref-for-flex-container\u2460\u24ea\u2461"},{"id":"ref-for-flex-container\u2460\u24ea\u2462"},{"id":"ref-for-flex-container\u2460\u24ea\u2463"},{"id":"ref-for-flex-container\u2460\u24ea\u2464"},{"id":"ref-for-flex-container\u2460\u24ea\u2465"},{"id":"ref-for-flex-container\u2460\u24ea\u2466"},{"id":"ref-for-flex-container\u2460\u24ea\u2468"},{"id":"ref-for-flex-container\u2460\u2460\u24ea"},{"id":"ref-for-flex-container\u2460\u2460\u2460"},{"id":"ref-for-flex-container\u2460\u2460\u2461"},{"id":"ref-for-flex-container\u2460\u2460\u2462"},{"id":"ref-for-flex-container\u2460\u2460\u2463"},{"id":"ref-for-flex-container\u2460\u2460\u2464"},{"id":"ref-for-flex-container\u2460\u2460\u2465"},{"id":"ref-for-flex-container\u2460\u2460\u2466"},{"id":"ref-for-flex-container\u2460\u2460\u2467"},{"id":"ref-for-flex-container\u2460\u2460\u2468"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-flex-container\u2467\u2464"},{"id":"ref-for-flex-container\u2467\u2465"},{"id":"ref-for-flex-container\u2460\u24ea\u2467"},{"id":"ref-for-flex-container\u2460\u2461\u24ea"},{"id":"ref-for-flex-container\u2460\u2461\u2460"},{"id":"ref-for-flex-container\u2460\u2461\u2461"},{"id":"ref-for-flex-container\u2460\u2461\u2462"}],"title":"\nClarifications"}],"url":"#flex-container"}, "flex-direction": {"dfnID":"flex-direction","dfnText":"flex directions","external":false,"refSections":[],"url":"#flex-direction"}, "flex-factor": {"dfnID":"flex-factor","dfnText":"flex factors","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-factor"},{"id":"ref-for-flex-factor\u2460"}],"title":"9.9.1.1. \nIdeal Algorithm"}],"url":"#flex-factor"}, "flex-flex-basis": {"dfnID":"flex-flex-basis","dfnText":"flex basis","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-flex-basis"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-flex-flex-basis\u2460"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-flex-flex-basis\u2461"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-flex-flex-basis\u2462"},{"id":"ref-for-flex-flex-basis\u2463"},{"id":"ref-for-flex-flex-basis\u2464"},{"id":"ref-for-flex-flex-basis\u2465"},{"id":"ref-for-flex-flex-basis\u2466"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-flex-flex-basis\u2467"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-flex-flex-basis\u2468"},{"id":"ref-for-flex-flex-basis\u2460\u24ea"},{"id":"ref-for-flex-flex-basis\u2460\u2460"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-flex-flex-basis\u2460\u2461"},{"id":"ref-for-flex-flex-basis\u2460\u2465"},{"id":"ref-for-flex-flex-basis\u2460\u2466"},{"id":"ref-for-flex-flex-basis\u2460\u2468"},{"id":"ref-for-flex-flex-basis\u2461\u24ea"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-flex-flex-basis\u2460\u2462"},{"id":"ref-for-flex-flex-basis\u2460\u2463"},{"id":"ref-for-flex-flex-basis\u2460\u2464"},{"id":"ref-for-flex-flex-basis\u2460\u2467"}],"title":"\nClarifications"}],"url":"#flex-flex-basis"}, "flex-flex-grow-factor": {"dfnID":"flex-flex-grow-factor","dfnText":"flex grow factor","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-flex-grow-factor"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-flex-flex-grow-factor\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-flex-flex-grow-factor\u2461"}],"title":"7.2.1. \nThe flex-grow property"},{"refs":[{"id":"ref-for-flex-flex-grow-factor\u2462"},{"id":"ref-for-flex-flex-grow-factor\u2463"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-flex-flex-grow-factor\u2464"},{"id":"ref-for-flex-flex-grow-factor\u2465"},{"id":"ref-for-flex-flex-grow-factor\u2466"},{"id":"ref-for-flex-flex-grow-factor\u2467"},{"id":"ref-for-flex-flex-grow-factor\u2468"},{"id":"ref-for-flex-flex-grow-factor\u2460\u24ea"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-flex-flex-grow-factor\u2460\u2460"},{"id":"ref-for-flex-flex-grow-factor\u2460\u2461"},{"id":"ref-for-flex-flex-grow-factor\u2460\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#flex-flex-grow-factor"}, "flex-flex-shrink-factor": {"dfnID":"flex-flex-shrink-factor","dfnText":"flex shrink factor","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-flex-shrink-factor"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-flex-flex-shrink-factor\u2460"},{"id":"ref-for-flex-flex-shrink-factor\u2461"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-flex-flex-shrink-factor\u2462"}],"title":"7.2.2. \nThe flex-shrink property"},{"refs":[{"id":"ref-for-flex-flex-shrink-factor\u2463"},{"id":"ref-for-flex-flex-shrink-factor\u2464"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-flex-flex-shrink-factor\u2465"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-flex-flex-shrink-factor\u2466"},{"id":"ref-for-flex-flex-shrink-factor\u2467"},{"id":"ref-for-flex-flex-shrink-factor\u2468"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#flex-flex-shrink-factor"}, "flex-formatting-context": {"dfnID":"flex-formatting-context","dfnText":"flex formatting context","external":false,"refSections":[],"url":"#flex-formatting-context"}, "flex-item": {"dfnID":"flex-item","dfnText":"flex items","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-item"},{"id":"ref-for-flex-item\u2460"},{"id":"ref-for-flex-item\u2461"},{"id":"ref-for-flex-item\u2462"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-flex-item\u2463"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-flex-item\u2464"},{"id":"ref-for-flex-item\u2465"},{"id":"ref-for-flex-item\u2466"},{"id":"ref-for-flex-item\u2467"},{"id":"ref-for-flex-item\u2468"},{"id":"ref-for-flex-item\u2460\u24ea"},{"id":"ref-for-flex-item\u2460\u2460"},{"id":"ref-for-flex-item\u2460\u2461"},{"id":"ref-for-flex-item\u2460\u2462"},{"id":"ref-for-flex-item\u2460\u2463"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-flex-item\u2460\u2464"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-flex-item\u2460\u2465"},{"id":"ref-for-flex-item\u2460\u2466"}],"title":"4.2. \nFlex Item Margins and Paddings"},{"refs":[{"id":"ref-for-flex-item\u2460\u2467"}],"title":"4.3. \nFlex Item Z-Ordering"},{"refs":[{"id":"ref-for-flex-item\u2460\u2468"},{"id":"ref-for-flex-item\u2461\u24ea"},{"id":"ref-for-flex-item\u2461\u2460"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-flex-item\u2461\u2461"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-flex-item\u2461\u2462"}],"title":"5.4. \nItem Reordering: the order property"},{"refs":[{"id":"ref-for-flex-item\u2461\u2463"},{"id":"ref-for-flex-item\u2461\u2464"},{"id":"ref-for-flex-item\u2461\u2465"},{"id":"ref-for-flex-item\u2461\u2466"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-flex-item\u2461\u2467"},{"id":"ref-for-flex-item\u2461\u2468"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-flex-item\u2462\u24ea"},{"id":"ref-for-flex-item\u2462\u2460"},{"id":"ref-for-flex-item\u2462\u2461"},{"id":"ref-for-flex-item\u2462\u2462"},{"id":"ref-for-flex-item\u2462\u2463"},{"id":"ref-for-flex-item\u2462\u2464"},{"id":"ref-for-flex-item\u2462\u2465"},{"id":"ref-for-flex-item\u2462\u2466"},{"id":"ref-for-flex-item\u2462\u2467"},{"id":"ref-for-flex-item\u2462\u2468"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-flex-item\u2463\u24ea"}],"title":"7.2.1. \nThe flex-grow property"},{"refs":[{"id":"ref-for-flex-item\u2463\u2460"}],"title":"7.2.2. \nThe flex-shrink property"},{"refs":[{"id":"ref-for-flex-item\u2463\u2461"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-flex-item\u2463\u2462"}],"title":"8. \nAlignment"},{"refs":[{"id":"ref-for-flex-item\u2463\u2463"},{"id":"ref-for-flex-item\u2463\u2464"},{"id":"ref-for-flex-item\u2463\u2465"},{"id":"ref-for-flex-item\u2463\u2466"},{"id":"ref-for-flex-item\u2463\u2467"},{"id":"ref-for-flex-item\u2463\u2468"},{"id":"ref-for-flex-item\u2464\u24ea"},{"id":"ref-for-flex-item\u2464\u2460"},{"id":"ref-for-flex-item\u2464\u2461"},{"id":"ref-for-flex-item\u2464\u2462"},{"id":"ref-for-flex-item\u2464\u2463"},{"id":"ref-for-flex-item\u2464\u2464"},{"id":"ref-for-flex-item\u2464\u2465"},{"id":"ref-for-flex-item\u2464\u2466"},{"id":"ref-for-flex-item\u2464\u2467"},{"id":"ref-for-flex-item\u2464\u2468"},{"id":"ref-for-flex-item\u2465\u24ea"},{"id":"ref-for-flex-item\u2465\u2460"},{"id":"ref-for-flex-item\u2465\u2461"},{"id":"ref-for-flex-item\u2465\u2462"},{"id":"ref-for-flex-item\u2465\u2463"},{"id":"ref-for-flex-item\u2465\u2464"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-flex-item\u2465\u2465"},{"id":"ref-for-flex-item\u2465\u2466"},{"id":"ref-for-flex-item\u2465\u2467"},{"id":"ref-for-flex-item\u2465\u2468"},{"id":"ref-for-flex-item\u2466\u24ea"},{"id":"ref-for-flex-item\u2466\u2460"},{"id":"ref-for-flex-item\u2466\u2461"},{"id":"ref-for-flex-item\u2466\u2462"},{"id":"ref-for-flex-item\u2466\u2463"},{"id":"ref-for-flex-item\u2466\u2464"},{"id":"ref-for-flex-item\u2466\u2465"},{"id":"ref-for-flex-item\u2466\u2466"},{"id":"ref-for-flex-item\u2466\u2467"},{"id":"ref-for-flex-item\u2466\u2468"},{"id":"ref-for-flex-item\u2467\u24ea"},{"id":"ref-for-flex-item\u2467\u2460"},{"id":"ref-for-flex-item\u2467\u2461"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-flex-item\u2467\u2462"},{"id":"ref-for-flex-item\u2467\u2463"},{"id":"ref-for-flex-item\u2467\u2464"},{"id":"ref-for-flex-item\u2467\u2465"},{"id":"ref-for-flex-item\u2467\u2466"},{"id":"ref-for-flex-item\u2467\u2467"},{"id":"ref-for-flex-item\u2467\u2468"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-flex-item\u2468\u24ea"}],"title":"9. \nFlex Layout Algorithm"},{"refs":[{"id":"ref-for-flex-item\u2468\u2460"},{"id":"ref-for-flex-item\u2468\u2461"},{"id":"ref-for-flex-item\u2468\u2462"},{"id":"ref-for-flex-item\u2468\u2463"},{"id":"ref-for-flex-item\u2468\u2464"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-flex-item\u2468\u2465"},{"id":"ref-for-flex-item\u2468\u2466"},{"id":"ref-for-flex-item\u2468\u2467"},{"id":"ref-for-flex-item\u2468\u2468"},{"id":"ref-for-flex-item\u2460\u24ea\u24ea"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-flex-item\u2460\u24ea\u2460"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-flex-item\u2460\u24ea\u2461"},{"id":"ref-for-flex-item\u2460\u24ea\u2462"},{"id":"ref-for-flex-item\u2460\u24ea\u2463"},{"id":"ref-for-flex-item\u2460\u24ea\u2464"},{"id":"ref-for-flex-item\u2460\u24ea\u2465"},{"id":"ref-for-flex-item\u2460\u24ea\u2466"},{"id":"ref-for-flex-item\u2460\u24ea\u2467"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-flex-item\u2460\u24ea\u2468"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-flex-item\u2460\u2460\u24ea"},{"id":"ref-for-flex-item\u2460\u2460\u2460"},{"id":"ref-for-flex-item\u2460\u2460\u2461"},{"id":"ref-for-flex-item\u2460\u2460\u2462"},{"id":"ref-for-flex-item\u2460\u2460\u2463"},{"id":"ref-for-flex-item\u2460\u2460\u2464"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-flex-item\u2460\u2460\u2465"},{"id":"ref-for-flex-item\u2460\u2460\u2466"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"},{"refs":[{"id":"ref-for-flex-item\u2460\u2460\u2467"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-flex-item\u2460\u2460\u2468"},{"id":"ref-for-flex-item\u2460\u2461\u24ea"},{"id":"ref-for-flex-item\u2460\u2461\u2460"},{"id":"ref-for-flex-item\u2460\u2461\u2461"},{"id":"ref-for-flex-item\u2460\u2461\u2462"},{"id":"ref-for-flex-item\u2460\u2461\u2463"},{"id":"ref-for-flex-item\u2460\u2461\u2464"},{"id":"ref-for-flex-item\u2460\u2461\u2465"},{"id":"ref-for-flex-item\u2460\u2461\u2466"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-flex-item\u2460\u2461\u2467"},{"id":"ref-for-flex-item\u2460\u2461\u2468"},{"id":"ref-for-flex-item\u2460\u2462\u24ea"},{"id":"ref-for-flex-item\u2460\u2462\u2460"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-flex-item\u2460\u2462\u2461"},{"id":"ref-for-flex-item\u2460\u2462\u2462"},{"id":"ref-for-flex-item\u2460\u2462\u2463"},{"id":"ref-for-flex-item\u2460\u2462\u2464"},{"id":"ref-for-flex-item\u2460\u2462\u2465"},{"id":"ref-for-flex-item\u2460\u2462\u2466"},{"id":"ref-for-flex-item\u2460\u2462\u2467"},{"id":"ref-for-flex-item\u2460\u2462\u2468"},{"id":"ref-for-flex-item\u2460\u2463\u24ea"},{"id":"ref-for-flex-item\u2460\u2463\u2460"},{"id":"ref-for-flex-item\u2460\u2463\u2461"},{"id":"ref-for-flex-item\u2460\u2463\u2462"},{"id":"ref-for-flex-item\u2460\u2463\u2463"},{"id":"ref-for-flex-item\u2460\u2463\u2464"},{"id":"ref-for-flex-item\u2460\u2463\u2465"},{"id":"ref-for-flex-item\u2460\u2463\u2466"},{"id":"ref-for-flex-item\u2460\u2463\u2467"},{"id":"ref-for-flex-item\u2460\u2463\u2468"},{"id":"ref-for-flex-item"},{"id":"ref-for-flex-item\u2460\u2464\u2463"},{"id":"ref-for-flex-item\u2460\u2464\u2464"},{"id":"ref-for-flex-item\u2460\u2464\u2465"},{"id":"ref-for-flex-item\u2460\u2464\u2466"},{"id":"ref-for-flex-item\u2460\u2464\u2467"},{"id":"ref-for-flex-item\u2460\u2464\u2468"},{"id":"ref-for-flex-item\u2460\u2465\u24ea"},{"id":"ref-for-flex-item\u2460\u2465\u2460"},{"id":"ref-for-flex-item\u2460\u2465\u2461"},{"id":"ref-for-flex-item\u2460\u2465\u2462"},{"id":"ref-for-flex-item\u2460\u2465\u2463"},{"id":"ref-for-flex-item\u2460\u2465\u2464"},{"id":"ref-for-flex-item\u2460\u2465\u2465"},{"id":"ref-for-flex-item\u2460\u2465\u2466"},{"id":"ref-for-flex-item\u2460\u2465\u2467"},{"id":"ref-for-flex-item\u2460\u2465\u2468"},{"id":"ref-for-flex-item\u2460\u2466\u24ea"},{"id":"ref-for-flex-item\u2460\u2466\u2460"},{"id":"ref-for-flex-item\u2460\u2466\u2461"},{"id":"ref-for-flex-item\u2460\u2466\u2462"},{"id":"ref-for-flex-item\u2460\u2466\u2463"},{"id":"ref-for-flex-item\u2460\u2466\u2464"},{"id":"ref-for-flex-item\u2460\u2466\u2465"},{"id":"ref-for-flex-item\u2460\u2466\u2466"},{"id":"ref-for-flex-item\u2460\u2466\u2467"},{"id":"ref-for-flex-item\u2460\u2466\u2468"},{"id":"ref-for-flex-item\u2460\u2467\u24ea"},{"id":"ref-for-flex-item\u2460\u2467\u2460"},{"id":"ref-for-flex-item\u2460\u2467\u2461"},{"id":"ref-for-flex-item\u2460\u2467\u2462"},{"id":"ref-for-flex-item\u2460\u2467\u2463"},{"id":"ref-for-flex-item\u2460\u2467\u2464"},{"id":"ref-for-flex-item\u2460\u2467\u2465"},{"id":"ref-for-flex-item\u2460\u2467\u2466"},{"id":"ref-for-flex-item\u2460\u2467\u2467"},{"id":"ref-for-flex-item\u2460\u2467\u2468"},{"id":"ref-for-flex-item\u2460\u2468\u24ea"},{"id":"ref-for-flex-item\u2460\u2468\u2460"},{"id":"ref-for-flex-item\u2460\u2468\u2461"},{"id":"ref-for-flex-item\u2460\u2468\u2462"},{"id":"ref-for-flex-item\u2460\u2468\u2463"},{"id":"ref-for-flex-item\u2460\u2468\u2464"},{"id":"ref-for-flex-item\u2460\u2468\u2465"},{"id":"ref-for-flex-item\u2460\u2468\u2466"},{"id":"ref-for-flex-item\u2460\u2468\u2467"},{"id":"ref-for-flex-item\u2460\u2468\u2468"},{"id":"ref-for-flex-item\u2461\u24ea\u24ea"},{"id":"ref-for-flex-item\u2461\u24ea\u2460"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-flex-item\u2460\u2464\u24ea"},{"id":"ref-for-flex-item\u2460\u2464\u2460"},{"id":"ref-for-flex-item\u2460\u2464\u2461"},{"id":"ref-for-flex-item\u2460\u2464\u2462"},{"id":"ref-for-flex-item\u2461\u24ea\u2461"},{"id":"ref-for-flex-item\u2461\u24ea\u2462"},{"id":"ref-for-flex-item\u2461\u24ea\u2463"}],"title":"\nClarifications"}],"url":"#flex-item"}, "flex-layout": {"dfnID":"flex-layout","dfnText":"flex layout","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-layout"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-flex-layout\u2460"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-flex-layout\u2461"}],"title":"\nChanges since the 19 November 2018 CR"}],"url":"#flex-layout"}, "flex-level": {"dfnID":"flex-level","dfnText":"flex-level","external":false,"refSections":[],"url":"#flex-level"}, "flex-line": {"dfnID":"flex-line","dfnText":"flex lines","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-line"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-flex-line\u2460"},{"id":"ref-for-flex-line\u2461"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-flex-line\u2462"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-flex-line\u2463"},{"id":"ref-for-flex-line\u2464"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-flex-line\u2465"}],"title":"9.6. \nCross-Axis Alignment"},{"refs":[{"id":"ref-for-flex-line\u2466"},{"id":"ref-for-flex-line\u2467"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-flex-line\u2468"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-flex-line\u2460\u24ea"},{"id":"ref-for-flex-line\u2460\u2460"},{"id":"ref-for-flex-line\u2460\u2461"},{"id":"ref-for-flex-line\u2460\u2462"},{"id":"ref-for-flex-line\u2460\u2463"},{"id":"ref-for-flex-line\u2460\u2464"},{"id":"ref-for-flex-line\u2460\u2465"},{"id":"ref-for-flex-line\u2460\u2466"},{"id":"ref-for-flex-line\u2460\u2467"},{"id":"ref-for-flex-line\u2460\u2468"},{"id":"ref-for-flex-line\u2461\u24ea"},{"id":"ref-for-flex-line\u2461\u2460"},{"id":"ref-for-flex-line\u2461\u2461"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#flex-line"}, "flexible": {"dfnID":"flexible","dfnText":"flexible","external":false,"refSections":[{"refs":[{"id":"ref-for-flexible"}],"title":"\nClarifications"}],"url":"#flexible"}, "fully-inflexible": {"dfnID":"fully-inflexible","dfnText":"fully inflexible","external":false,"refSections":[{"refs":[{"id":"ref-for-fully-inflexible"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-fully-inflexible\u2460"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-fully-inflexible\u2461"},{"id":"ref-for-fully-inflexible\u2462"}],"title":"\nClarifications"}],"url":"#fully-inflexible"}, "hypothetical-cross-size": {"dfnID":"hypothetical-cross-size","dfnText":"hypothetical cross size","external":false,"refSections":[{"refs":[{"id":"ref-for-hypothetical-cross-size"},{"id":"ref-for-hypothetical-cross-size\u2460"}],"title":"9.4. \nCross Size Determination"}],"url":"#hypothetical-cross-size"}, "hypothetical-main-size": {"dfnID":"hypothetical-main-size","dfnText":"hypothetical main size","external":false,"refSections":[{"refs":[{"id":"ref-for-hypothetical-main-size"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-hypothetical-main-size\u2460"}],"title":"9.3. \nMain Size Determination"},{"refs":[{"id":"ref-for-hypothetical-main-size\u2461"},{"id":"ref-for-hypothetical-main-size\u2462"},{"id":"ref-for-hypothetical-main-size\u2463"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-hypothetical-main-size\u2464"},{"id":"ref-for-hypothetical-main-size\u2465"},{"id":"ref-for-hypothetical-main-size\u2467"},{"id":"ref-for-hypothetical-main-size\u2468"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-hypothetical-main-size\u2466"}],"title":"\nClarifications"}],"url":"#hypothetical-main-size"}, "initial-free-space": {"dfnID":"initial-free-space","dfnText":"initial free space","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-free-space"},{"id":"ref-for-initial-free-space\u2460"}],"title":"9.7. \nResolving Flexible Lengths"}],"url":"#initial-free-space"}, "main-axis": {"dfnID":"main-axis","dfnText":"main axis","external":false,"refSections":[{"refs":[{"id":"ref-for-main-axis"},{"id":"ref-for-main-axis\u2460"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-main-axis\u2461"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-main-axis\u2462"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-main-axis\u2463"},{"id":"ref-for-main-axis\u2464"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-main-axis\u2465"},{"id":"ref-for-main-axis\u2466"},{"id":"ref-for-main-axis\u2467"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-main-axis\u2468"},{"id":"ref-for-main-axis\u2460\u24ea"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-main-axis\u2460\u2460"}],"title":"8. \nAlignment"},{"refs":[{"id":"ref-for-main-axis\u2460\u2461"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-main-axis\u2460\u2462"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-main-axis\u2460\u2463"},{"id":"ref-for-main-axis\u2460\u2464"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-main-axis\u2460\u2465"},{"id":"ref-for-main-axis\u2460\u2466"},{"id":"ref-for-main-axis\u2460\u2467"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-main-axis\u2460\u2468"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-main-axis\u2461\u24ea"},{"id":"ref-for-main-axis\u2461\u2460"},{"id":"ref-for-main-axis\u2461\u2461"},{"id":"ref-for-main-axis\u2461\u2462"},{"id":"ref-for-main-axis\u2461\u2463"},{"id":"ref-for-main-axis\u2461\u2464"},{"id":"ref-for-main-axis\u2461\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#main-axis"}, "main-axis-baseline": {"dfnID":"main-axis-baseline","dfnText":"\n\t\t main-axis baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-main-axis-baseline"},{"id":"ref-for-main-axis-baseline\u2460"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-main-axis-baseline\u2461"},{"id":"ref-for-main-axis-baseline\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#main-axis-baseline"}, "main-dimension": {"dfnID":"main-dimension","dfnText":"main dimension","external":false,"refSections":[{"refs":[{"id":"ref-for-main-dimension"},{"id":"ref-for-main-dimension\u2460"},{"id":"ref-for-main-dimension\u2461"},{"id":"ref-for-main-dimension\u2462"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-main-dimension\u2463"}],"title":"7. \nFlexibility"}],"url":"#main-dimension"}, "main-end": {"dfnID":"main-end","dfnText":"main-end","external":false,"refSections":[{"refs":[{"id":"ref-for-main-end"},{"id":"ref-for-main-end\u2460"},{"id":"ref-for-main-end\u2461"},{"id":"ref-for-main-end\u2462"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-main-end\u2463"},{"id":"ref-for-main-end\u2464"},{"id":"ref-for-main-end\u2465"},{"id":"ref-for-main-end\u2466"},{"id":"ref-for-main-end\u2467"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-main-end\u2468"},{"id":"ref-for-main-end\u2460\u24ea"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-main-end\u2460\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#main-end"}, "main-size": {"dfnID":"main-size","dfnText":"main size","external":false,"refSections":[{"refs":[{"id":"ref-for-main-size"},{"id":"ref-for-main-size\u2460"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-main-size\u2461"}],"title":"4.4. \nCollapsed Items"},{"refs":[{"id":"ref-for-main-size\u2462"},{"id":"ref-for-main-size\u2463"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"},{"refs":[{"id":"ref-for-main-size\u2464"},{"id":"ref-for-main-size\u2465"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-main-size\u2466"},{"id":"ref-for-main-size\u2467"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-main-size\u2468"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-main-size\u2460\u24ea"},{"id":"ref-for-main-size\u2460\u2460"},{"id":"ref-for-main-size\u2460\u2461"},{"id":"ref-for-main-size\u2460\u2462"},{"id":"ref-for-main-size\u2460\u2463"},{"id":"ref-for-main-size\u2460\u2464"},{"id":"ref-for-main-size\u2460\u2465"},{"id":"ref-for-main-size\u2460\u2466"},{"id":"ref-for-main-size\u2460\u2467"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-main-size\u2460\u2468"}],"title":"9.3. \nMain Size Determination"},{"refs":[{"id":"ref-for-main-size\u2461\u24ea"},{"id":"ref-for-main-size\u2461\u2460"},{"id":"ref-for-main-size\u2461\u2461"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-main-size\u2461\u2462"},{"id":"ref-for-main-size\u2461\u2463"},{"id":"ref-for-main-size\u2461\u2464"},{"id":"ref-for-main-size\u2461\u2465"},{"id":"ref-for-main-size\u2461\u2466"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-main-size\u2461\u2467"},{"id":"ref-for-main-size\u2461\u2468"},{"id":"ref-for-main-size\u2462\u24ea"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-main-size\u2462\u2460"},{"id":"ref-for-main-size\u2462\u2461"}],"title":"9.9.1. \nFlex Container Intrinsic Main Sizes"},{"refs":[{"id":"ref-for-main-size\u2462\u2462"},{"id":"ref-for-main-size\u2462\u2463"},{"id":"ref-for-main-size\u2462\u2464"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-main-size\u2462\u2465"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-main-size\u2462\u2466"},{"id":"ref-for-main-size\u2462\u2467"},{"id":"ref-for-main-size\u2462\u2468"},{"id":"ref-for-main-size\u2463\u24ea"},{"id":"ref-for-main-size\u2463\u2460"},{"id":"ref-for-main-size\u2463\u2461"},{"id":"ref-for-main-size\u2463\u2462"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-main-size\u2463\u2463"},{"id":"ref-for-main-size\u2463\u2466"},{"id":"ref-for-main-size\u2463\u2467"},{"id":"ref-for-main-size\u2463\u2468"},{"id":"ref-for-main-size\u2464\u24ea"},{"id":"ref-for-main-size\u2464\u2461"},{"id":"ref-for-main-size\u2464\u2462"},{"id":"ref-for-main-size\u2464\u2463"},{"id":"ref-for-main-size\u2464\u2464"},{"id":"ref-for-main-size\u2464\u2465"},{"id":"ref-for-main-size\u2464\u2466"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-main-size\u2463\u2464"},{"id":"ref-for-main-size\u2463\u2465"},{"id":"ref-for-main-size\u2464\u2460"}],"title":"\nClarifications"}],"url":"#main-size"}, "main-size-property": {"dfnID":"main-size-property","dfnText":"main size property","external":false,"refSections":[{"refs":[{"id":"ref-for-main-size-property"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-main-size-property\u2460"},{"id":"ref-for-main-size-property\u2461"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-main-size-property\u2462"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-main-size-property\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#main-size-property"}, "main-start": {"dfnID":"main-start","dfnText":"main-start","external":false,"refSections":[{"refs":[{"id":"ref-for-main-start"},{"id":"ref-for-main-start\u2460"},{"id":"ref-for-main-start\u2461"},{"id":"ref-for-main-start\u2462"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-main-start\u2463"},{"id":"ref-for-main-start\u2464"},{"id":"ref-for-main-start\u2465"},{"id":"ref-for-main-start\u2466"},{"id":"ref-for-main-start\u2467"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-main-start\u2468"},{"id":"ref-for-main-start\u2460\u24ea"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-main-start\u2460\u2460"},{"id":"ref-for-main-start\u2460\u2461"},{"id":"ref-for-main-start\u2460\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#main-start"}, "max-cross-size": {"dfnID":"max-cross-size","dfnText":"max cross size","external":false,"refSections":[],"url":"#max-cross-size"}, "max-cross-size-property": {"dfnID":"max-cross-size-property","dfnText":"max cross size properties","external":false,"refSections":[],"url":"#max-cross-size-property"}, "max-main-size": {"dfnID":"max-main-size","dfnText":"max main size","external":false,"refSections":[{"refs":[{"id":"ref-for-max-main-size"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-max-main-size\u2460"},{"id":"ref-for-max-main-size\u2461"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"}],"url":"#max-main-size"}, "max-main-size-property": {"dfnID":"max-main-size-property","dfnText":"max main size properties","external":false,"refSections":[{"refs":[{"id":"ref-for-max-main-size-property"},{"id":"ref-for-max-main-size-property\u2460"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-max-main-size-property\u2461"},{"id":"ref-for-max-main-size-property\u2462"},{"id":"ref-for-max-main-size-property\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#max-main-size-property"}, "min-cross-size": {"dfnID":"min-cross-size","dfnText":"min","external":false,"refSections":[],"url":"#min-cross-size"}, "min-cross-size-property": {"dfnID":"min-cross-size-property","dfnText":"min","external":false,"refSections":[],"url":"#min-cross-size-property"}, "min-main-size": {"dfnID":"min-main-size","dfnText":"min","external":false,"refSections":[{"refs":[{"id":"ref-for-min-main-size"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-min-main-size\u2460"},{"id":"ref-for-min-main-size\u2461"}],"title":"9.9.3. \nFlex Item Intrinsic Size Contributions"}],"url":"#min-main-size"}, "min-main-size-property": {"dfnID":"min-main-size-property","dfnText":"min","external":false,"refSections":[{"refs":[{"id":"ref-for-min-main-size-property"},{"id":"ref-for-min-main-size-property\u2460"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-min-main-size-property\u2461"},{"id":"ref-for-min-main-size-property\u2462"},{"id":"ref-for-min-main-size-property\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#min-main-size-property"}, "multi-line-flex-container": {"dfnID":"multi-line-flex-container","dfnText":"multi-line flex container","external":false,"refSections":[{"refs":[{"id":"ref-for-multi-line-flex-container"},{"id":"ref-for-multi-line-flex-container\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2461"},{"id":"ref-for-multi-line-flex-container\u2462"},{"id":"ref-for-multi-line-flex-container\u2463"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2464"},{"id":"ref-for-multi-line-flex-container\u2465"},{"id":"ref-for-multi-line-flex-container\u2466"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2467"}],"title":"9.9.1.3. \nMulti-line Min-content Algorithm"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2468"},{"id":"ref-for-multi-line-flex-container\u2460\u24ea"},{"id":"ref-for-multi-line-flex-container\u2460\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2460\u2461"},{"id":"ref-for-multi-line-flex-container\u2460\u2462"}],"title":"10. \nFragmenting Flex Layout"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2460\u2463"},{"id":"ref-for-multi-line-flex-container\u2460\u2464"},{"id":"ref-for-multi-line-flex-container\u2460\u2465"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2460\u2466"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-multi-line-flex-container\u2460\u2467"},{"id":"ref-for-multi-line-flex-container\u2460\u2468"},{"id":"ref-for-multi-line-flex-container\u2461\u24ea"},{"id":"ref-for-multi-line-flex-container\u2461\u2460"},{"id":"ref-for-multi-line-flex-container\u2461\u2461"},{"id":"ref-for-multi-line-flex-container\u2461\u2462"},{"id":"ref-for-multi-line-flex-container\u2461\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#multi-line-flex-container"}, "propdef-align-content": {"dfnID":"propdef-align-content","dfnText":"align-content","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-align-content"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-propdef-align-content\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-propdef-align-content\u2461"},{"id":"ref-for-propdef-align-content\u2462"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-propdef-align-content\u2463"},{"id":"ref-for-propdef-align-content\u2464"},{"id":"ref-for-propdef-align-content\u2465"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-propdef-align-content\u2466"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-propdef-align-content\u2467"}],"title":"9.6. \nCross-Axis Alignment"},{"refs":[{"id":"ref-for-propdef-align-content\u2468"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u24ea"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2460"},{"id":"ref-for-propdef-align-content\u2460\u2461"},{"id":"ref-for-propdef-align-content\u2460\u2462"},{"id":"ref-for-propdef-align-content\u2460\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-align-content"}, "propdef-align-items": {"dfnID":"propdef-align-items","dfnText":"align-items","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-align-items"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-propdef-align-items\u2460"}],"title":"8.1. \nAligning with auto margins"},{"refs":[{"id":"ref-for-propdef-align-items\u2461"},{"id":"ref-for-propdef-align-items\u2462"},{"id":"ref-for-propdef-align-items\u2463"},{"id":"ref-for-propdef-align-items\u2464"},{"id":"ref-for-propdef-align-items\u2465"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-propdef-align-items\u2466"},{"id":"ref-for-propdef-align-items\u2467"},{"id":"ref-for-propdef-align-items\u2468"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-align-items"}, "propdef-align-self": {"dfnID":"propdef-align-self","dfnText":"align-self","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-align-self"},{"id":"ref-for-propdef-align-self\u2460"},{"id":"ref-for-propdef-align-self\u2461"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-propdef-align-self\u2462"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-propdef-align-self\u2463"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-align-self\u2464"}],"title":"4.1. \nAbsolutely-Positioned Flex Children"},{"refs":[{"id":"ref-for-propdef-align-self\u2465"},{"id":"ref-for-propdef-align-self\u2466"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-propdef-align-self\u2467"},{"id":"ref-for-propdef-align-self\u2468"}],"title":"8.1. \nAligning with auto margins"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u24ea"},{"id":"ref-for-propdef-align-self\u2460\u2460"},{"id":"ref-for-propdef-align-self\u2460\u2461"},{"id":"ref-for-propdef-align-self\u2460\u2462"},{"id":"ref-for-propdef-align-self\u2460\u2463"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2464"},{"id":"ref-for-propdef-align-self\u2460\u2465"},{"id":"ref-for-propdef-align-self\u2460\u2466"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2467"}],"title":"9.6. \nCross-Axis Alignment"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2468"},{"id":"ref-for-propdef-align-self\u2461\u24ea"},{"id":"ref-for-propdef-align-self\u2461\u2460"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2461"}],"title":"\nChanges since the 19 November 2018 CR"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2462"},{"id":"ref-for-propdef-align-self\u2461\u2463"},{"id":"ref-for-propdef-align-self\u2461\u2464"},{"id":"ref-for-propdef-align-self\u2461\u2465"},{"id":"ref-for-propdef-align-self\u2461\u2466"},{"id":"ref-for-propdef-align-self\u2461\u2467"},{"id":"ref-for-propdef-align-self\u2461\u2468"},{"id":"ref-for-propdef-align-self\u2462\u2460"},{"id":"ref-for-propdef-align-self\u2462\u2461"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-propdef-align-self\u2462\u24ea"},{"id":"ref-for-propdef-align-self\u2462\u2462"}],"title":"\nClarifications"}],"url":"#propdef-align-self"}, "propdef-flex": {"dfnID":"propdef-flex","dfnText":"flex","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-propdef-flex\u2460"}],"title":"4. \nFlex Items"},{"refs":[{"id":"ref-for-propdef-flex\u2461"},{"id":"ref-for-propdef-flex\u2462"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-propdef-flex\u2463"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-propdef-flex\u2464"},{"id":"ref-for-propdef-flex\u2465"},{"id":"ref-for-propdef-flex\u2466"},{"id":"ref-for-propdef-flex\u2467"},{"id":"ref-for-propdef-flex\u2468"},{"id":"ref-for-propdef-flex\u2460\u24ea"},{"id":"ref-for-propdef-flex\u2460\u2460"},{"id":"ref-for-propdef-flex\u2460\u2461"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-flex\u2460\u2462"},{"id":"ref-for-propdef-flex\u2460\u2463"},{"id":"ref-for-propdef-flex\u2460\u2464"},{"id":"ref-for-propdef-flex\u2460\u2465"},{"id":"ref-for-propdef-flex\u2460\u2466"},{"id":"ref-for-propdef-flex\u2460\u2467"},{"id":"ref-for-propdef-flex\u2460\u2468"},{"id":"ref-for-propdef-flex\u2461\u24ea"},{"id":"ref-for-propdef-flex\u2461\u2460"},{"id":"ref-for-propdef-flex\u2461\u2461"},{"id":"ref-for-propdef-flex\u2461\u2462"},{"id":"ref-for-propdef-flex\u2461\u2463"},{"id":"ref-for-propdef-flex\u2461\u2464"},{"id":"ref-for-propdef-flex\u2461\u2465"}],"title":"7.1.1. \nBasic Values of flex"},{"refs":[{"id":"ref-for-propdef-flex\u2461\u2466"}],"title":"7.2. \nComponents of Flexibility"},{"refs":[{"id":"ref-for-propdef-flex\u2461\u2467"}],"title":"7.2.1. \nThe flex-grow property"},{"refs":[{"id":"ref-for-propdef-flex\u2461\u2468"}],"title":"7.2.2. \nThe flex-shrink property"},{"refs":[{"id":"ref-for-propdef-flex\u2462\u24ea"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-propdef-flex\u2462\u2460"},{"id":"ref-for-propdef-flex\u2462\u2461"},{"id":"ref-for-propdef-flex\u2462\u2462"},{"id":"ref-for-propdef-flex\u2462\u2463"},{"id":"ref-for-propdef-flex\u2462\u2464"},{"id":"ref-for-propdef-flex\u2462\u2465"},{"id":"ref-for-propdef-flex\u2462\u2466"},{"id":"ref-for-propdef-flex\u2462\u2467"},{"id":"ref-for-propdef-flex\u2462\u2468"},{"id":"ref-for-propdef-flex\u2463\u24ea"},{"id":"ref-for-propdef-flex\u2463\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-flex"}, "propdef-flex-basis": {"dfnID":"propdef-flex-basis","dfnText":"flex-basis","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-basis"},{"id":"ref-for-propdef-flex-basis\u2460"},{"id":"ref-for-propdef-flex-basis\u2461"},{"id":"ref-for-propdef-flex-basis\u2462"},{"id":"ref-for-propdef-flex-basis\u2463"},{"id":"ref-for-propdef-flex-basis\u2464"},{"id":"ref-for-propdef-flex-basis\u2465"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-flex-basis\u2466"},{"id":"ref-for-propdef-flex-basis\u2467"},{"id":"ref-for-propdef-flex-basis\u2468"},{"id":"ref-for-propdef-flex-basis\u2460\u24ea"},{"id":"ref-for-propdef-flex-basis\u2460\u2460"},{"id":"ref-for-propdef-flex-basis\u2460\u2461"},{"id":"ref-for-propdef-flex-basis\u2460\u2462"},{"id":"ref-for-propdef-flex-basis\u2460\u2463"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-propdef-flex-basis\u2460\u2464"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-propdef-flex-basis\u2460\u2465"}],"title":"\nChanges since the 16 October 2017 CR"},{"refs":[{"id":"ref-for-propdef-flex-basis\u2460\u2466"},{"id":"ref-for-propdef-flex-basis\u2460\u2467"},{"id":"ref-for-propdef-flex-basis\u2460\u2468"},{"id":"ref-for-propdef-flex-basis\u2461\u24ea"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-propdef-flex-basis\u2461\u2460"},{"id":"ref-for-propdef-flex-basis\u2461\u2461"},{"id":"ref-for-propdef-flex-basis\u2461\u2462"},{"id":"ref-for-propdef-flex-basis\u2461\u2463"},{"id":"ref-for-propdef-flex-basis\u2461\u2464"},{"id":"ref-for-propdef-flex-basis\u2461\u2465"},{"id":"ref-for-propdef-flex-basis\u2461\u2466"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-flex-basis"}, "propdef-flex-direction": {"dfnID":"propdef-flex-direction","dfnText":"flex-direction","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-direction"},{"id":"ref-for-propdef-flex-direction\u2460"}],"title":"5. \nOrdering and Orientation"},{"refs":[{"id":"ref-for-propdef-flex-direction\u2461"},{"id":"ref-for-propdef-flex-direction\u2462"},{"id":"ref-for-propdef-flex-direction\u2463"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-propdef-flex-direction\u2464"},{"id":"ref-for-propdef-flex-direction\u2465"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-propdef-flex-direction\u2466"}],"title":"8.5. \nFlex Container Baselines"},{"refs":[{"id":"ref-for-propdef-flex-direction\u2467"},{"id":"ref-for-propdef-flex-direction\u2468"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-flex-direction"}, "propdef-flex-flow": {"dfnID":"propdef-flex-flow","dfnText":"flex-flow","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-flow"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-propdef-flex-flow\u2460"}],"title":"5. \nOrdering and Orientation"},{"refs":[{"id":"ref-for-propdef-flex-flow\u2461"},{"id":"ref-for-propdef-flex-flow\u2462"},{"id":"ref-for-propdef-flex-flow\u2463"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-propdef-flex-flow\u2464"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-propdef-flex-flow\u2465"},{"id":"ref-for-propdef-flex-flow\u2466"},{"id":"ref-for-propdef-flex-flow\u2467"}],"title":"\nAppendix A: Axis Mappings"},{"refs":[{"id":"ref-for-propdef-flex-flow\u2468"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-flex-flow"}, "propdef-flex-grow": {"dfnID":"propdef-flex-grow","dfnText":"flex-grow","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-grow"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-propdef-flex-grow\u2460"},{"id":"ref-for-propdef-flex-grow\u2461"},{"id":"ref-for-propdef-flex-grow\u2462"},{"id":"ref-for-propdef-flex-grow\u2463"},{"id":"ref-for-propdef-flex-grow\u2464"},{"id":"ref-for-propdef-flex-grow\u2465"},{"id":"ref-for-propdef-flex-grow\u2466"},{"id":"ref-for-propdef-flex-grow\u2467"},{"id":"ref-for-propdef-flex-grow\u2468"},{"id":"ref-for-propdef-flex-grow\u2460\u24ea"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-flex-grow\u2460\u2460"},{"id":"ref-for-propdef-flex-grow\u2460\u2461"},{"id":"ref-for-propdef-flex-grow\u2460\u2462"}],"title":"7.2.1. \nThe flex-grow property"},{"refs":[{"id":"ref-for-propdef-flex-grow\u2460\u2463"},{"id":"ref-for-propdef-flex-grow\u2460\u2464"},{"id":"ref-for-propdef-flex-grow\u2460\u2465"},{"id":"ref-for-propdef-flex-grow\u2460\u2466"},{"id":"ref-for-propdef-flex-grow\u2460\u2467"},{"id":"ref-for-propdef-flex-grow\u2460\u2468"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-propdef-flex-grow\u2461\u24ea"}],"title":"\nClarifications"}],"url":"#propdef-flex-grow"}, "propdef-flex-shrink": {"dfnID":"propdef-flex-shrink","dfnText":"flex-shrink","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-shrink"}],"title":"7. \nFlexibility"},{"refs":[{"id":"ref-for-propdef-flex-shrink\u2460"},{"id":"ref-for-propdef-flex-shrink\u2461"},{"id":"ref-for-propdef-flex-shrink\u2462"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-propdef-flex-shrink\u2463"},{"id":"ref-for-propdef-flex-shrink\u2464"},{"id":"ref-for-propdef-flex-shrink\u2465"}],"title":"7.2.2. \nThe flex-shrink property"},{"refs":[{"id":"ref-for-propdef-flex-shrink\u2466"}],"title":"\nClarifications"}],"url":"#propdef-flex-shrink"}, "propdef-flex-wrap": {"dfnID":"propdef-flex-wrap","dfnText":"flex-wrap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-wrap"}],"title":"5. \nOrdering and Orientation"},{"refs":[{"id":"ref-for-propdef-flex-wrap\u2460"},{"id":"ref-for-propdef-flex-wrap\u2461"},{"id":"ref-for-propdef-flex-wrap\u2462"},{"id":"ref-for-propdef-flex-wrap\u2463"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-propdef-flex-wrap\u2464"},{"id":"ref-for-propdef-flex-wrap\u2465"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-propdef-flex-wrap\u2466"},{"id":"ref-for-propdef-flex-wrap\u2467"},{"id":"ref-for-propdef-flex-wrap\u2468"},{"id":"ref-for-propdef-flex-wrap\u2460\u24ea"},{"id":"ref-for-propdef-flex-wrap\u2460\u2460"}],"title":"6. \nFlex Lines"}],"url":"#propdef-flex-wrap"}, "propdef-justify-content": {"dfnID":"propdef-justify-content","dfnText":"justify-content","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-content"}],"title":"1.2. \nModule interactions"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-propdef-justify-content\u2462"}],"title":"8.1. \nAligning with auto margins"},{"refs":[{"id":"ref-for-propdef-justify-content\u2463"},{"id":"ref-for-propdef-justify-content\u2464"},{"id":"ref-for-propdef-justify-content\u2465"}],"title":"8.2. \nAxis Alignment: the justify-content property"},{"refs":[{"id":"ref-for-propdef-justify-content\u2466"}],"title":"8.3. \nCross-axis Alignment: the align-items and align-self properties"},{"refs":[{"id":"ref-for-propdef-justify-content\u2467"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-propdef-justify-content\u2468"}],"title":"9.5. \nMain-Axis Alignment"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460\u24ea"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460\u2460"},{"id":"ref-for-propdef-justify-content\u2460\u2461"},{"id":"ref-for-propdef-justify-content\u2460\u2462"},{"id":"ref-for-propdef-justify-content\u2460\u2463"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#propdef-justify-content"}, "remaining-free-space": {"dfnID":"remaining-free-space","dfnText":"remaining free space","external":false,"refSections":[{"refs":[{"id":"ref-for-remaining-free-space"},{"id":"ref-for-remaining-free-space\u2460"},{"id":"ref-for-remaining-free-space\u2461"},{"id":"ref-for-remaining-free-space\u2462"},{"id":"ref-for-remaining-free-space\u2463"}],"title":"9.7. \nResolving Flexible Lengths"}],"url":"#remaining-free-space"}, "scaled-flex-shrink-factor": {"dfnID":"scaled-flex-shrink-factor","dfnText":"scaled flex shrink factor","external":false,"refSections":[{"refs":[{"id":"ref-for-scaled-flex-shrink-factor"},{"id":"ref-for-scaled-flex-shrink-factor\u2460"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-scaled-flex-shrink-factor\u2461"},{"id":"ref-for-scaled-flex-shrink-factor\u2462"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-scaled-flex-shrink-factor\u2463"},{"id":"ref-for-scaled-flex-shrink-factor\u2464"},{"id":"ref-for-scaled-flex-shrink-factor\u2465"},{"id":"ref-for-scaled-flex-shrink-factor\u2466"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#scaled-flex-shrink-factor"}, "single-line-flex-container": {"dfnID":"single-line-flex-container","dfnText":"single-line flex container","external":false,"refSections":[{"refs":[{"id":"ref-for-single-line-flex-container"},{"id":"ref-for-single-line-flex-container\u2460"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-single-line-flex-container\u2461"},{"id":"ref-for-single-line-flex-container\u2462"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-single-line-flex-container\u2463"},{"id":"ref-for-single-line-flex-container\u2464"}],"title":"8.4. \nPacking Flex Lines: the align-content property"},{"refs":[{"id":"ref-for-single-line-flex-container\u2465"}],"title":"9.3. \nMain Size Determination"},{"refs":[{"id":"ref-for-single-line-flex-container\u2466"},{"id":"ref-for-single-line-flex-container\u2467"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-single-line-flex-container\u2468"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-single-line-flex-container\u2460\u24ea"}],"title":"9.9.1.1. \nIdeal Algorithm"},{"refs":[{"id":"ref-for-single-line-flex-container\u2460\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-single-line-flex-container\u2460\u2461"},{"id":"ref-for-single-line-flex-container\u2460\u2462"},{"id":"ref-for-single-line-flex-container\u2460\u2463"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-single-line-flex-container\u2460\u2464"},{"id":"ref-for-single-line-flex-container\u2460\u2465"},{"id":"ref-for-single-line-flex-container\u2460\u2466"},{"id":"ref-for-single-line-flex-container\u2460\u2467"},{"id":"ref-for-single-line-flex-container\u2460\u2468"},{"id":"ref-for-single-line-flex-container\u2461\u24ea"},{"id":"ref-for-single-line-flex-container\u2461\u2460"},{"id":"ref-for-single-line-flex-container\u2461\u2461"},{"id":"ref-for-single-line-flex-container\u2461\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#single-line-flex-container"}, "specified-size-suggestion": {"dfnID":"specified-size-suggestion","dfnText":"specified size suggestion","external":false,"refSections":[{"refs":[{"id":"ref-for-specified-size-suggestion"},{"id":"ref-for-specified-size-suggestion\u2460"},{"id":"ref-for-specified-size-suggestion\u2461"},{"id":"ref-for-specified-size-suggestion\u2462"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"#specified-size-suggestion"}, "stretched": {"dfnID":"stretched","dfnText":"stretched","external":false,"refSections":[{"refs":[{"id":"ref-for-stretched"}],"title":"9.8. \nDefinite and Indefinite Sizes"},{"refs":[{"id":"ref-for-stretched\u2460"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-stretched\u2461"}],"title":"\nClarifications"}],"url":"#stretched"}, "target-main-size": {"dfnID":"target-main-size","dfnText":"target main size","external":false,"refSections":[{"refs":[{"id":"ref-for-target-main-size"},{"id":"ref-for-target-main-size\u2460"},{"id":"ref-for-target-main-size\u2461"},{"id":"ref-for-target-main-size\u2462"},{"id":"ref-for-target-main-size\u2463"},{"id":"ref-for-target-main-size\u2464"},{"id":"ref-for-target-main-size\u2465"},{"id":"ref-for-target-main-size\u2466"},{"id":"ref-for-target-main-size\u2467"}],"title":"9.7. \nResolving Flexible Lengths"},{"refs":[{"id":"ref-for-target-main-size\u2468"},{"id":"ref-for-target-main-size\u2460\u24ea"},{"id":"ref-for-target-main-size\u2460\u2460"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#target-main-size"}, "transferred-size-suggestion": {"dfnID":"transferred-size-suggestion","dfnText":"transferred size suggestion","external":false,"refSections":[{"refs":[{"id":"ref-for-transferred-size-suggestion"},{"id":"ref-for-transferred-size-suggestion\u2460"},{"id":"ref-for-transferred-size-suggestion\u2461"},{"id":"ref-for-transferred-size-suggestion\u2462"}],"title":"4.5. \nAutomatic Minimum Size of Flex Items"}],"url":"#transferred-size-suggestion"}, "valdef-align-content-center": {"dfnID":"valdef-align-content-center","dfnText":"center","external":false,"refSections":[],"url":"#valdef-align-content-center"}, "valdef-align-content-flex-end": {"dfnID":"valdef-align-content-flex-end","dfnText":"flex-end","external":false,"refSections":[],"url":"#valdef-align-content-flex-end"}, "valdef-align-content-flex-start": {"dfnID":"valdef-align-content-flex-start","dfnText":"flex-start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-flex-start"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#valdef-align-content-flex-start"}, "valdef-align-content-space-around": {"dfnID":"valdef-align-content-space-around","dfnText":"space-around","external":false,"refSections":[],"url":"#valdef-align-content-space-around"}, "valdef-align-content-space-between": {"dfnID":"valdef-align-content-space-between","dfnText":"space-between","external":false,"refSections":[],"url":"#valdef-align-content-space-between"}, "valdef-align-content-stretch": {"dfnID":"valdef-align-content-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-stretch"}],"title":"9.4. \nCross Size Determination"}],"url":"#valdef-align-content-stretch"}, "valdef-align-items-auto": {"dfnID":"valdef-align-items-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-items-auto"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-valdef-align-items-auto\u2460"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-valdef-align-items-auto\u2461"},{"id":"ref-for-valdef-align-items-auto\u2462"},{"id":"ref-for-valdef-align-items-auto\u2463"},{"id":"ref-for-valdef-align-items-auto\u2464"},{"id":"ref-for-valdef-align-items-auto\u2465"},{"id":"ref-for-valdef-align-items-auto\u2466"},{"id":"ref-for-valdef-align-items-auto\u2467"},{"id":"ref-for-valdef-align-items-auto\u2468"},{"id":"ref-for-valdef-align-items-auto\u2460\u24ea"},{"id":"ref-for-valdef-align-items-auto\u2460\u2460"},{"id":"ref-for-valdef-align-items-auto\u2460\u2461"},{"id":"ref-for-valdef-align-items-auto\u2460\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#valdef-align-items-auto"}, "valdef-align-items-baseline": {"dfnID":"valdef-align-items-baseline","dfnText":"baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-items-baseline"}],"title":"9.4. \nCross Size Determination"},{"refs":[{"id":"ref-for-valdef-align-items-baseline\u2460"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"}],"url":"#valdef-align-items-baseline"}, "valdef-align-items-center": {"dfnID":"valdef-align-items-center","dfnText":"center","external":false,"refSections":[],"url":"#valdef-align-items-center"}, "valdef-align-items-flex-end": {"dfnID":"valdef-align-items-flex-end","dfnText":"flex-end","external":false,"refSections":[],"url":"#valdef-align-items-flex-end"}, "valdef-align-items-flex-start": {"dfnID":"valdef-align-items-flex-start","dfnText":"flex-start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-items-flex-start"},{"id":"ref-for-valdef-align-items-flex-start\u2460"},{"id":"ref-for-valdef-align-items-flex-start\u2461"}],"title":"10.1. \nSample Flex Fragmentation Algorithm"},{"refs":[{"id":"ref-for-valdef-align-items-flex-start\u2462"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#valdef-align-items-flex-start"}, "valdef-align-items-stretch": {"dfnID":"valdef-align-items-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-items-stretch"}],"title":"5.4. \nItem Reordering: the order property"},{"refs":[{"id":"ref-for-valdef-align-items-stretch\u2460"},{"id":"ref-for-valdef-align-items-stretch\u2461"}],"title":"\nSubstantive Changes and Bugfixes"},{"refs":[{"id":"ref-for-valdef-align-items-stretch\u2462"}],"title":"\nClarifications"}],"url":"#valdef-align-items-stretch"}, "valdef-display-flex": {"dfnID":"valdef-display-flex","dfnText":"flex","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-display-flex"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-valdef-display-flex\u2460"},{"id":"ref-for-valdef-display-flex\u2461"},{"id":"ref-for-valdef-display-flex\u2462"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-valdef-display-flex\u2463"},{"id":"ref-for-valdef-display-flex\u2464"}],"title":"4. \nFlex Items"}],"url":"#valdef-display-flex"}, "valdef-display-inline-flex": {"dfnID":"valdef-display-inline-flex","dfnText":"inline-flex","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-flex"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-valdef-display-inline-flex\u2460"},{"id":"ref-for-valdef-display-inline-flex\u2461"},{"id":"ref-for-valdef-display-inline-flex\u2462"}],"title":"3. \nFlex Containers: the flex and inline-flex display values"},{"refs":[{"id":"ref-for-valdef-display-inline-flex\u2463"},{"id":"ref-for-valdef-display-inline-flex\u2464"}],"title":"4. \nFlex Items"}],"url":"#valdef-display-inline-flex"}, "valdef-flex-basis-auto": {"dfnID":"valdef-flex-basis-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-basis-auto"},{"id":"ref-for-valdef-flex-basis-auto\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-valdef-flex-basis-auto\u2461"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-valdef-flex-basis-auto\u2462"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-valdef-flex-basis-auto\u2463"},{"id":"ref-for-valdef-flex-basis-auto\u2464"},{"id":"ref-for-valdef-flex-basis-auto\u2465"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#valdef-flex-basis-auto"}, "valdef-flex-basis-content": {"dfnID":"valdef-flex-basis-content","dfnText":"content","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-basis-content"},{"id":"ref-for-valdef-flex-basis-content\u2460"}],"title":"7.1. \nThe flex Shorthand"},{"refs":[{"id":"ref-for-valdef-flex-basis-content\u2461"},{"id":"ref-for-valdef-flex-basis-content\u2462"},{"id":"ref-for-valdef-flex-basis-content\u2463"},{"id":"ref-for-valdef-flex-basis-content\u2464"}],"title":"7.2.3. \nThe flex-basis property"},{"refs":[{"id":"ref-for-valdef-flex-basis-content\u2465"},{"id":"ref-for-valdef-flex-basis-content\u2466"},{"id":"ref-for-valdef-flex-basis-content\u2467"},{"id":"ref-for-valdef-flex-basis-content\u2468"}],"title":"9.2. \nLine Length Determination"},{"refs":[{"id":"ref-for-valdef-flex-basis-content\u2460\u24ea"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2460"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2461"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2462"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2463"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2466"}],"title":"\nClarifications"},{"refs":[{"id":"ref-for-valdef-flex-basis-content\u2460\u2464"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2465"},{"id":"ref-for-valdef-flex-basis-content\u2460\u2467"}],"title":"\nSubstantive Changes and Bugfixes"}],"url":"#valdef-flex-basis-content"}, "valdef-flex-direction-column": {"dfnID":"valdef-flex-direction-column","dfnText":"column","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-column"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-valdef-flex-direction-column\u2460"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-valdef-flex-direction-column\u2461"},{"id":"ref-for-valdef-flex-direction-column\u2462"},{"id":"ref-for-valdef-flex-direction-column\u2463"},{"id":"ref-for-valdef-flex-direction-column\u2464"},{"id":"ref-for-valdef-flex-direction-column\u2465"},{"id":"ref-for-valdef-flex-direction-column\u2466"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-direction-column"}, "valdef-flex-direction-column-reverse": {"dfnID":"valdef-flex-direction-column-reverse","dfnText":"column-reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-column-reverse"},{"id":"ref-for-valdef-flex-direction-column-reverse\u2460"},{"id":"ref-for-valdef-flex-direction-column-reverse\u2461"},{"id":"ref-for-valdef-flex-direction-column-reverse\u2462"},{"id":"ref-for-valdef-flex-direction-column-reverse\u2463"},{"id":"ref-for-valdef-flex-direction-column-reverse\u2464"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-direction-column-reverse"}, "valdef-flex-direction-row": {"dfnID":"valdef-flex-direction-row","dfnText":"row","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-row"}],"title":"2. \nFlex Layout Box Model and Terminology"},{"refs":[{"id":"ref-for-valdef-flex-direction-row\u2460"}],"title":"5.1. \nFlex Flow Direction: the flex-direction property"},{"refs":[{"id":"ref-for-valdef-flex-direction-row\u2461"}],"title":"5.3. \nFlex Direction and Wrap: the flex-flow shorthand"},{"refs":[{"id":"ref-for-valdef-flex-direction-row\u2462"}],"title":"9.9.2. \nFlex Container Intrinsic Cross Sizes"},{"refs":[{"id":"ref-for-valdef-flex-direction-row\u2463"},{"id":"ref-for-valdef-flex-direction-row\u2464"},{"id":"ref-for-valdef-flex-direction-row\u2465"},{"id":"ref-for-valdef-flex-direction-row\u2466"},{"id":"ref-for-valdef-flex-direction-row\u2467"},{"id":"ref-for-valdef-flex-direction-row\u2468"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-direction-row"}, "valdef-flex-direction-row-reverse": {"dfnID":"valdef-flex-direction-row-reverse","dfnText":"row-reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-row-reverse"}],"title":"1.1. \nOverview"},{"refs":[{"id":"ref-for-valdef-flex-direction-row-reverse\u2460"},{"id":"ref-for-valdef-flex-direction-row-reverse\u2461"},{"id":"ref-for-valdef-flex-direction-row-reverse\u2462"},{"id":"ref-for-valdef-flex-direction-row-reverse\u2463"},{"id":"ref-for-valdef-flex-direction-row-reverse\u2464"},{"id":"ref-for-valdef-flex-direction-row-reverse\u2465"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-direction-row-reverse"}, "valdef-flex-flex-basis": {"dfnID":"valdef-flex-flex-basis","dfnText":"<'flex-basis'>","external":false,"refSections":[],"url":"#valdef-flex-flex-basis"}, "valdef-flex-flex-grow": {"dfnID":"valdef-flex-flex-grow","dfnText":"<'flex-grow'>","external":false,"refSections":[],"url":"#valdef-flex-flex-grow"}, "valdef-flex-flex-shrink": {"dfnID":"valdef-flex-flex-shrink","dfnText":"<'flex-shrink'>","external":false,"refSections":[],"url":"#valdef-flex-flex-shrink"}, "valdef-flex-grow-number": {"dfnID":"valdef-flex-grow-number","dfnText":"<number>","external":false,"refSections":[],"url":"#valdef-flex-grow-number"}, "valdef-flex-none": {"dfnID":"valdef-flex-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-none"}],"title":"7.1. \nThe flex Shorthand"}],"url":"#valdef-flex-none"}, "valdef-flex-shrink-number": {"dfnID":"valdef-flex-shrink-number","dfnText":"<number>","external":false,"refSections":[],"url":"#valdef-flex-shrink-number"}, "valdef-flex-wrap-nowrap": {"dfnID":"valdef-flex-wrap-nowrap","dfnText":"nowrap","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-wrap-nowrap"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2460"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2461"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2462"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2463"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2464"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2465"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2466"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2467"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2468"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2460\u24ea"},{"id":"ref-for-valdef-flex-wrap-nowrap\u2460\u2460"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-wrap-nowrap"}, "valdef-flex-wrap-wrap": {"dfnID":"valdef-flex-wrap-wrap","dfnText":"wrap","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-wrap-wrap"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-valdef-flex-wrap-wrap\u2460"}],"title":"6. \nFlex Lines"},{"refs":[{"id":"ref-for-valdef-flex-wrap-wrap\u2461"},{"id":"ref-for-valdef-flex-wrap-wrap\u2462"},{"id":"ref-for-valdef-flex-wrap-wrap\u2463"},{"id":"ref-for-valdef-flex-wrap-wrap\u2464"},{"id":"ref-for-valdef-flex-wrap-wrap\u2465"},{"id":"ref-for-valdef-flex-wrap-wrap\u2466"},{"id":"ref-for-valdef-flex-wrap-wrap\u2467"},{"id":"ref-for-valdef-flex-wrap-wrap\u2468"},{"id":"ref-for-valdef-flex-wrap-wrap\u2460\u24ea"},{"id":"ref-for-valdef-flex-wrap-wrap\u2460\u2460"},{"id":"ref-for-valdef-flex-wrap-wrap\u2460\u2461"},{"id":"ref-for-valdef-flex-wrap-wrap\u2460\u2462"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-wrap-wrap"}, "valdef-flex-wrap-wrap-reverse": {"dfnID":"valdef-flex-wrap-wrap-reverse","dfnText":"wrap-reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-wrap-wrap-reverse"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2461"}],"title":"5.2. \nFlex Line Wrapping: the flex-wrap property"},{"refs":[{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2462"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2463"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2464"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2465"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2466"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2467"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2468"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460\u24ea"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460\u2460"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460\u2461"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460\u2462"},{"id":"ref-for-valdef-flex-wrap-wrap-reverse\u2460\u2463"}],"title":"\nAppendix A: Axis Mappings"}],"url":"#valdef-flex-wrap-wrap-reverse"}, "valdef-justify-content-center": {"dfnID":"valdef-justify-content-center","dfnText":"center","external":false,"refSections":[],"url":"#valdef-justify-content-center"}, "valdef-justify-content-flex-end": {"dfnID":"valdef-justify-content-flex-end","dfnText":"flex-end","external":false,"refSections":[],"url":"#valdef-justify-content-flex-end"}, "valdef-justify-content-flex-start": {"dfnID":"valdef-justify-content-flex-start","dfnText":"flex-start","external":false,"refSections":[],"url":"#valdef-justify-content-flex-start"}, "valdef-justify-content-space-around": {"dfnID":"valdef-justify-content-space-around","dfnText":"space-around","external":false,"refSections":[],"url":"#valdef-justify-content-space-around"}, "valdef-justify-content-space-between": {"dfnID":"valdef-justify-content-space-between","dfnText":"space-between","external":false,"refSections":[],"url":"#valdef-justify-content-space-between"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#collapsed-flex-item": {"displayText":"collapsed flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"collapsed flex item","type":"dfn","url":"#collapsed-flex-item"}, "#content-based-minimum-size": {"displayText":"content-based minimum size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"content-based minimum size","type":"dfn","url":"#content-based-minimum-size"}, "#content-size-suggestion": {"displayText":"content size suggestion","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"content size suggestion","type":"dfn","url":"#content-size-suggestion"}, "#cross-axis": {"displayText":"cross axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross axis","type":"dfn","url":"#cross-axis"}, "#cross-axis-baseline": {"displayText":"cross-axis baseline set","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross-axis baseline set","type":"dfn","url":"#cross-axis-baseline"}, "#cross-dimension": {"displayText":"cross dimension","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross dimension","type":"dfn","url":"#cross-dimension"}, "#cross-end": {"displayText":"cross-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross-end","type":"dfn","url":"#cross-end"}, "#cross-size": {"displayText":"cross size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross size","type":"dfn","url":"#cross-size"}, "#cross-size-property": {"displayText":"cross size property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross size property","type":"dfn","url":"#cross-size-property"}, "#cross-start": {"displayText":"cross-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"cross-start","type":"dfn","url":"#cross-start"}, "#definite": {"displayText":"definite","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"definite","type":"dfn","url":"#definite"}, "#flex-base-size": {"displayText":"flex base size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex base size","type":"dfn","url":"#flex-base-size"}, "#flex-container": {"displayText":"flex container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex container","type":"dfn","url":"#flex-container"}, "#flex-factor": {"displayText":"flex factor","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex factor","type":"dfn","url":"#flex-factor"}, "#flex-flex-basis": {"displayText":"flex basis","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex basis","type":"dfn","url":"#flex-flex-basis"}, "#flex-flex-grow-factor": {"displayText":"flex grow factor","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex grow factor","type":"dfn","url":"#flex-flex-grow-factor"}, "#flex-flex-shrink-factor": {"displayText":"flex shrink factor","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex shrink factor","type":"dfn","url":"#flex-flex-shrink-factor"}, "#flex-item": {"displayText":"flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex item","type":"dfn","url":"#flex-item"}, "#flex-layout": {"displayText":"flex layout","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex layout","type":"dfn","url":"#flex-layout"}, "#flex-line": {"displayText":"flex line","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex line","type":"dfn","url":"#flex-line"}, "#flexible": {"displayText":"flexible","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flexible","type":"dfn","url":"#flexible"}, "#fully-inflexible": {"displayText":"fully inflexible","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"fully inflexible","type":"dfn","url":"#fully-inflexible"}, "#hypothetical-cross-size": {"displayText":"hypothetical cross size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"hypothetical cross size","type":"dfn","url":"#hypothetical-cross-size"}, "#hypothetical-main-size": {"displayText":"hypothetical main size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"hypothetical main size","type":"dfn","url":"#hypothetical-main-size"}, "#initial-free-space": {"displayText":"initial free space","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"initial free space","type":"dfn","url":"#initial-free-space"}, "#main-axis": {"displayText":"main axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main axis","type":"dfn","url":"#main-axis"}, "#main-axis-baseline": {"displayText":"main-axis baseline set","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main-axis baseline set","type":"dfn","url":"#main-axis-baseline"}, "#main-dimension": {"displayText":"main dimension","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main dimension","type":"dfn","url":"#main-dimension"}, "#main-end": {"displayText":"main-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main-end","type":"dfn","url":"#main-end"}, "#main-size": {"displayText":"main size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main size","type":"dfn","url":"#main-size"}, "#main-size-property": {"displayText":"main size property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main size property","type":"dfn","url":"#main-size-property"}, "#main-start": {"displayText":"main-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"main-start","type":"dfn","url":"#main-start"}, "#max-main-size": {"displayText":"max main size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"max main size","type":"dfn","url":"#max-main-size"}, "#max-main-size-property": {"displayText":"max main size property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"max main size property","type":"dfn","url":"#max-main-size-property"}, "#min-main-size": {"displayText":"min main size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"min main size","type":"dfn","url":"#min-main-size"}, "#min-main-size-property": {"displayText":"min main size property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"min main size property","type":"dfn","url":"#min-main-size-property"}, "#multi-line-flex-container": {"displayText":"multi-line","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"multi-line","type":"dfn","url":"#multi-line-flex-container"}, "#propdef-align-content": {"displayText":"align-content","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"align-content","type":"property","url":"#propdef-align-content"}, "#propdef-align-items": {"displayText":"align-items","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"align-items","type":"property","url":"#propdef-align-items"}, "#propdef-align-self": {"displayText":"align-self","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"align-self","type":"property","url":"#propdef-align-self"}, "#propdef-flex": {"displayText":"flex","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex","type":"property","url":"#propdef-flex"}, "#propdef-flex-basis": {"displayText":"flex-basis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-basis","type":"property","url":"#propdef-flex-basis"}, "#propdef-flex-direction": {"displayText":"flex-direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-direction","type":"property","url":"#propdef-flex-direction"}, "#propdef-flex-flow": {"displayText":"flex-flow","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-flow","type":"property","url":"#propdef-flex-flow"}, "#propdef-flex-grow": {"displayText":"flex-grow","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-grow","type":"property","url":"#propdef-flex-grow"}, "#propdef-flex-shrink": {"displayText":"flex-shrink","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-shrink","type":"property","url":"#propdef-flex-shrink"}, "#propdef-flex-wrap": {"displayText":"flex-wrap","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-wrap","type":"property","url":"#propdef-flex-wrap"}, "#propdef-justify-content": {"displayText":"justify-content","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"justify-content","type":"property","url":"#propdef-justify-content"}, "#remaining-free-space": {"displayText":"remaining free space","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"remaining free space","type":"dfn","url":"#remaining-free-space"}, "#scaled-flex-shrink-factor": {"displayText":"scaled flex shrink factor","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"scaled flex shrink factor","type":"dfn","url":"#scaled-flex-shrink-factor"}, "#single-line-flex-container": {"displayText":"single-line","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"single-line","type":"dfn","url":"#single-line-flex-container"}, "#specified-size-suggestion": {"displayText":"specified size suggestion","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"specified size suggestion","type":"dfn","url":"#specified-size-suggestion"}, "#stretched": {"displayText":"stretched","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"stretched","type":"dfn","url":"#stretched"}, "#target-main-size": {"displayText":"target main size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"target main size","type":"dfn","url":"#target-main-size"}, "#transferred-size-suggestion": {"displayText":"transferred size suggestion","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"transferred size suggestion","type":"dfn","url":"#transferred-size-suggestion"}, "#valdef-align-content-flex-start": {"displayText":"flex-start","export":true,"for_":["align-content"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-start","type":"value","url":"#valdef-align-content-flex-start"}, "#valdef-align-content-stretch": {"displayText":"stretch","export":true,"for_":["align-content"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"stretch","type":"value","url":"#valdef-align-content-stretch"}, "#valdef-align-items-auto": {"displayText":"auto","export":true,"for_":["align-items","align-self"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"auto","type":"value","url":"#valdef-align-items-auto"}, "#valdef-align-items-baseline": {"displayText":"baseline","export":true,"for_":["align-items","align-self"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"baseline","type":"value","url":"#valdef-align-items-baseline"}, "#valdef-align-items-flex-start": {"displayText":"flex-start","export":true,"for_":["align-items","align-self"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex-start","type":"value","url":"#valdef-align-items-flex-start"}, "#valdef-align-items-stretch": {"displayText":"stretch","export":true,"for_":["align-items","align-self"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"stretch","type":"value","url":"#valdef-align-items-stretch"}, "#valdef-display-flex": {"displayText":"flex","export":true,"for_":["display"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"flex","type":"value","url":"#valdef-display-flex"}, "#valdef-display-inline-flex": {"displayText":"inline-flex","export":true,"for_":["display"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"inline-flex","type":"value","url":"#valdef-display-inline-flex"}, "#valdef-flex-basis-auto": {"displayText":"auto","export":true,"for_":["flex-basis"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"auto","type":"value","url":"#valdef-flex-basis-auto"}, "#valdef-flex-basis-content": {"displayText":"content","export":true,"for_":["flex-basis"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"content","type":"value","url":"#valdef-flex-basis-content"}, "#valdef-flex-direction-column": {"displayText":"column","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"column","type":"value","url":"#valdef-flex-direction-column"}, "#valdef-flex-direction-column-reverse": {"displayText":"column-reverse","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"column-reverse","type":"value","url":"#valdef-flex-direction-column-reverse"}, "#valdef-flex-direction-row": {"displayText":"row","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"row","type":"value","url":"#valdef-flex-direction-row"}, "#valdef-flex-direction-row-reverse": {"displayText":"row-reverse","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"row-reverse","type":"value","url":"#valdef-flex-direction-row-reverse"}, "#valdef-flex-none": {"displayText":"none","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"none","type":"value","url":"#valdef-flex-none"}, "#valdef-flex-wrap-nowrap": {"displayText":"nowrap","export":true,"for_":["flex-wrap"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"nowrap","type":"value","url":"#valdef-flex-wrap-nowrap"}, "#valdef-flex-wrap-wrap": {"displayText":"wrap","export":true,"for_":["flex-wrap"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"wrap","type":"value","url":"#valdef-flex-wrap-wrap"}, "#valdef-flex-wrap-wrap-reverse": {"displayText":"wrap-reverse","export":true,"for_":["flex-wrap"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"local","text":"wrap-reverse","type":"value","url":"#valdef-flex-wrap-wrap-reverse"}, "https://drafts.csswg.org/css-align-3/#alignment-baseline": {"displayText":"alignment baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"alignment baseline","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#alignment-baseline"}, "https://drafts.csswg.org/css-align-3/#baseline-set": {"displayText":"baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"baseline set","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#baseline-set"}, "https://drafts.csswg.org/css-align-3/#generate-baselines": {"displayText":"generate baselines","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"generate baselines","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#generate-baselines"}, "https://drafts.csswg.org/css-align-3/#last-baseline-alignment": {"displayText":"last-baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"last-baseline alignment","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#last-baseline-alignment"}, "https://drafts.csswg.org/css-align-3/#propdef-justify-self": {"displayText":"justify-self","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"justify-self","type":"property","url":"https://drafts.csswg.org/css-align-3/#propdef-justify-self"}, "https://drafts.csswg.org/css-align-3/#shared-alignment-context": {"displayText":"alignment context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"alignment context","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#shared-alignment-context"}, "https://drafts.csswg.org/css-align-3/#synthesize-baseline": {"displayText":"synthesize baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"synthesize baseline","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#synthesize-baseline"}, "https://drafts.csswg.org/css-align-3/#valdef-self-position-start": {"displayText":"start","export":true,"for_":["<self-position>","<content-position>","justify-self","align-self","justify-content","align-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"start","type":"value","url":"https://drafts.csswg.org/css-align-3/#valdef-self-position-start"}, "https://drafts.csswg.org/css-box-4/#content-edge": {"displayText":"content edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"content edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#content-edge"}, "https://drafts.csswg.org/css-box-4/#margin-edge": {"displayText":"margin edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#margin-edge"}, "https://drafts.csswg.org/css-break-3/#propdef-break-after": {"displayText":"break-after","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-after","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-after"}, "https://drafts.csswg.org/css-break-3/#propdef-break-before": {"displayText":"break-before","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-before","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "https://drafts.csswg.org/css-break-3/#propdef-break-inside": {"displayText":"break-inside","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-inside","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "https://drafts.csswg.org/css-break-4/#fragmentation-container": {"displayText":"fragmentation container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation container","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-container"}, "https://drafts.csswg.org/css-break-4/#fragmentation-context": {"displayText":"fragmentation context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation context","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#legacy-name-alias": {"displayText":"legacy name alias","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"legacy name alias","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#legacy-name-alias"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-cascade-5/#valdef-all-initial": {"displayText":"initial","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"initial","type":"value","url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-initial"}, "https://drafts.csswg.org/css-display-4/#anonymous": {"displayText":"anonymous","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"anonymous","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "https://drafts.csswg.org/css-display-4/#block-box": {"displayText":"block box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-box"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "https://drafts.csswg.org/css-display-4/#block-level-box": {"displayText":"block-level box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level-box"}, "https://drafts.csswg.org/css-display-4/#blockify": {"displayText":"blockify","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"blockify","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#blockify"}, "https://drafts.csswg.org/css-display-4/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "https://drafts.csswg.org/css-display-4/#css-text-sequence": {"displayText":"text sequence","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"text sequence","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#css-text-sequence"}, "https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context": {"displayText":"establishes an independent formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"establishes an independent formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context"}, "https://drafts.csswg.org/css-display-4/#flow-layout": {"displayText":"flow layout","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"flow layout","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#flow-layout"}, "https://drafts.csswg.org/css-display-4/#formatting-context": {"displayText":"formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#formatting-context"}, "https://drafts.csswg.org/css-display-4/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"in-flow","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "https://drafts.csswg.org/css-display-4/#inline-level": {"displayText":"inline-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "https://drafts.csswg.org/css-display-4/#order-modified-document-order": {"displayText":"order-modified document order","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"order-modified document order","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#order-modified-document-order"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#propdef-order": {"displayText":"order","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"order","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-order"}, "https://drafts.csswg.org/css-display-4/#propdef-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "https://drafts.csswg.org/css-display-4/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "https://drafts.csswg.org/css-display-4/#text-nodes": {"displayText":"text node","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"text node","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#text-nodes"}, "https://drafts.csswg.org/css-images-3/#specified-size": {"displayText":"specified size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"specified size","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#specified-size"}, "https://drafts.csswg.org/css-inline-3/#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"vertical-align","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "https://drafts.csswg.org/css-overflow-3/#non-scrollable-overflow-value": {"displayText":"non-scrollable overflow value","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"non-scrollable overflow value","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#non-scrollable-overflow-value"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow": {"displayText":"overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "https://drafts.csswg.org/css-overflow-3/#scroll-container": {"displayText":"scroll container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scroll container","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "https://drafts.csswg.org/css-overflow-3/#scrollport": {"displayText":"scrollport","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollport","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollport"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible": {"displayText":"visible","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "https://drafts.csswg.org/css-position-3/#propdef-bottom": {"displayText":"bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"bottom","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "https://drafts.csswg.org/css-position-3/#propdef-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"left","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "https://drafts.csswg.org/css-position-3/#propdef-position": {"displayText":"position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"position","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "https://drafts.csswg.org/css-position-3/#propdef-right": {"displayText":"right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"right","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "https://drafts.csswg.org/css-position-3/#propdef-top": {"displayText":"top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"top","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "https://drafts.csswg.org/css-position-3/#static-position": {"displayText":"static position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"static position","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#static-position"}, "https://drafts.csswg.org/css-position-3/#static-position-rectangle": {"displayText":"static-position rectangle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"static-position rectangle","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#static-position-rectangle"}, "https://drafts.csswg.org/css-position-3/#valdef-position-relative": {"displayText":"relative","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"relative","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-position-relative"}, "https://drafts.csswg.org/css-position-3/#valdef-position-static": {"displayText":"static","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"static","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-position-static"}, "https://drafts.csswg.org/css-pseudo-4/#first-formatted-line": {"displayText":"first formatted line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"first formatted line","type":"dfn","url":"https://drafts.csswg.org/css-pseudo-4/#first-formatted-line"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter": {"displayText":"::first-letter","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-letter","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line": {"displayText":"::first-line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-line","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "https://drafts.csswg.org/css-sizing-3/#automatic-block-size": {"displayText":"automatic block size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"automatic block size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#automatic-block-size"}, "https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size": {"displayText":"automatic minimum size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"automatic minimum size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"}, "https://drafts.csswg.org/css-sizing-3/#automatic-size": {"displayText":"automatic size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"automatic size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#automatic-size"}, "https://drafts.csswg.org/css-sizing-3/#available": {"displayText":"available space","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"available space","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#available"}, "https://drafts.csswg.org/css-sizing-3/#behave-as-auto": {"displayText":"behave as auto","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"behave as auto","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#behave-as-auto"}, "https://drafts.csswg.org/css-sizing-3/#definite": {"displayText":"definite","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"definite","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#definite"}, "https://drafts.csswg.org/css-sizing-3/#height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#height"}, "https://drafts.csswg.org/css-sizing-3/#indefinite": {"displayText":"indefinite","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"indefinite","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#indefinite"}, "https://drafts.csswg.org/css-sizing-3/#inner-size": {"displayText":"inner size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"inner size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#inner-size"}, "https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution": {"displayText":"intrinsic size contribution","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"intrinsic size contribution","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution"}, "https://drafts.csswg.org/css-sizing-3/#intrinsic-sizing": {"displayText":"intrinsic sizing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"intrinsic sizing","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#intrinsic-sizing"}, "https://drafts.csswg.org/css-sizing-3/#max-content": {"displayText":"max-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "https://drafts.csswg.org/css-sizing-3/#max-content-constraint": {"displayText":"max-content constraint","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content constraint","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content-constraint"}, "https://drafts.csswg.org/css-sizing-3/#max-content-contribution": {"displayText":"max-content contribution","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content contribution","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content-contribution"}, "https://drafts.csswg.org/css-sizing-3/#max-width": {"displayText":"maximum size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"maximum size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-width"}, "https://drafts.csswg.org/css-sizing-3/#min-content": {"displayText":"min-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "https://drafts.csswg.org/css-sizing-3/#min-content-constraint": {"displayText":"min-content constraint","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content constraint","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-constraint"}, "https://drafts.csswg.org/css-sizing-3/#min-content-contribution": {"displayText":"min-content contribution","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content contribution","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-contribution"}, "https://drafts.csswg.org/css-sizing-3/#min-width": {"displayText":"minimum size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"minimum size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-width"}, "https://drafts.csswg.org/css-sizing-3/#outer-size": {"displayText":"outer size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"outer size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#outer-size"}, "https://drafts.csswg.org/css-sizing-3/#preferred-size": {"displayText":"preferred size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"preferred size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#preferred-size"}, "https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing": {"displayText":"box-sizing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"box-sizing","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-sizing-3/#valdef-width-auto": {"displayText":"auto","export":true,"for_":["width","height","min-width","min-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content": {"displayText":"max-content","export":true,"for_":["width","min-width","max-width","height","min-height","max-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content","type":"value","url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content"}, "https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content": {"displayText":"min-content","export":true,"for_":["width","min-width","max-width","height","min-height","max-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content","type":"value","url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"}, "https://drafts.csswg.org/css-sizing-3/#width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#width"}, "https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio": {"displayText":"preferred aspect ratio","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-sizing","spec":"css-sizing-4","status":"current","text":"preferred aspect ratio","type":"dfn","url":"https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio"}, "https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio": {"displayText":"aspect-ratio","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-sizing","spec":"css-sizing-4","status":"current","text":"aspect-ratio","type":"property","url":"https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio"}, "https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content": {"displayText":"fit-content","export":true,"for_":["width","height","inline-size","block-size","min-width","min-height","min-inline-size","min-block-size","max-width","max-height","max-inline-size","max-block-size"],"level":"4","normative":true,"shortname":"css-sizing","spec":"css-sizing-4","status":"current","text":"fit-content","type":"value","url":"https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content"}, "https://drafts.csswg.org/css-text-4/#propdef-white-space": {"displayText":"white-space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"white-space","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "https://drafts.csswg.org/css-text-4/#white-space": {"displayText":"document white space characters","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"document white space characters","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#white-space"}, "https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration": {"displayText":"text-decoration","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"text-decoration","type":"property","url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-bracketed-range-notation": {"displayText":"CSS bracketed range notation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css bracketed range notation","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-bracketed-range-notation"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<number>","type":"type","url":"https://drafts.csswg.org/css-values-4/#number-value"}, "https://drafts.csswg.org/css-values-4/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length-percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "https://drafts.csswg.org/css-writing-modes-3/#css-end": {"displayText":"end","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#css-end"}, "https://drafts.csswg.org/css-writing-modes-3/#css-start": {"displayText":"start","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#css-start"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#block-axis": {"displayText":"block axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block axis","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-axis"}, "https://drafts.csswg.org/css-writing-modes-4/#block-end": {"displayText":"block-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block-end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "https://drafts.csswg.org/css-writing-modes-4/#block-size": {"displayText":"block size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block size","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-size"}, "https://drafts.csswg.org/css-writing-modes-4/#block-start": {"displayText":"block-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block-start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-start"}, "https://drafts.csswg.org/css-writing-modes-4/#css-end": {"displayText":"endmost","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"endmost","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#css-end"}, "https://drafts.csswg.org/css-writing-modes-4/#css-start": {"displayText":"startmost","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"startmost","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#css-start"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-axis": {"displayText":"inline axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline axis","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-axis"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-end": {"displayText":"inline-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-end"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-size": {"displayText":"inline size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline size","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-size"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-start": {"displayText":"inline-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr": {"displayText":"ltr","export":true,"for_":["direction"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"ltr","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl": {"displayText":"rtl","export":true,"for_":["direction"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"rtl","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb": {"displayText":"horizontal-tb","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"horizontal-tb","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl": {"displayText":"vertical-rl","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"vertical-rl","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-rl"}, "https://drafts.csswg.org/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "https://drafts.csswg.org/css2/#propdef-page-break-after": {"displayText":"page-break-after","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-after","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "https://drafts.csswg.org/css2/#propdef-page-break-before": {"displayText":"page-break-before","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-before","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "https://drafts.csswg.org/css2/#propdef-z-index": {"displayText":"z-index","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"z-index","type":"property","url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "https://drafts.csswg.org/css2/#valdef-table-layout-auto": {"displayText":"auto","export":true,"for_":["table-layout"],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css2/#valdef-table-layout-auto"}, "https://drafts.csswg.org/css2/#valdef-z-index-auto": {"displayText":"auto","export":true,"for_":["z-index"],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css2/#valdef-z-index-auto"}, "https://drafts.csswg.org/cssom-1/#resolved-value": {"displayText":"resolved value","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"resolved value","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#resolved-value"}, "https://www.w3.org/TR/css-flexbox-1/#cross-size": {"displayText":"cross-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"snapshot","text":"cross-size","type":"dfn","url":"https://www.w3.org/TR/css-flexbox-1/#cross-size"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const refHintKey = link.getAttribute("data-refhint-key"); let key = url; if(refHintKey) { key = refHintKey + "_" + url; } const ref = refsData[key]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-wpt */ "use strict"; { let wptData = { "paths": ["/css/css-flexbox/"], }; document.addEventListener("DOMContentLoaded", async ()=>{ if(wptData.paths.length == 0) return; const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge"; const runs = await (await fetch(runsUrl)).json(); let testResults = []; for(const pathPrefix of wptData.paths) { const pathResults = await (await fetch("https://wpt.fyi/api/search", { method:"POST", headers:{ "Content-Type":"application/json", }, body: JSON.stringify({ "run_ids": runs.map(x=>x.id), "query": {"path": pathPrefix}, }) })).json(); testResults = testResults.concat(pathResults.results); } const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0})); const resultsFromPath = new Map(testResults.map(result=>{ const testPath = result.test; const passes = result.legacy_status.map(x=>[x.passes, x.total]); return [testPath, passes]; })); const seenTests = new Set(); document.querySelectorAll(".wpt-name").forEach(nameEl=>{ const passData = resultsFromPath.get("/" + nameEl.getAttribute("title")); if(!passData) { console.log("Couldn't find test in results:", nameEl); return } const numTests = passData[0][1]; if(numTests > 1) { nameEl.insertAdjacentElement("beforeend", mk.small({}, ` (${numTests} tests)`)); } if(passData == undefined) return; const resultsEl = mk.span({"class":"wpt-results"}, ...passData.map((p,i) => mk.span( { "title": `${browsers[i].name} ${p[0]}/${p[1]}`, "class": "wpt-result", "style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`, })), ); nameEl.insertAdjacentElement("afterend", resultsEl); // Only update the summary pass/total count if we haven't seen this // test before, to support authors listing the same test multiple times // in a spec. if (!seenTests.has(nameEl.getAttribute("title"))) { seenTests.add(nameEl.getAttribute("title")); passData.forEach((p,i) => { browsers[i].passes += p[0]; browsers[i].total += p[1]; }); } }); const overview = document.querySelector(".wpt-overview"); if(overview) { overview.appendChild(mk.ul({}, ...browsers.map(formatWptResult))); document.head.appendChild(mk.style({}, `.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;} .wpt-overview li { padding: .25em 1em; color: black; text-align: center; } .wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; } .wpt-overview .browser { font-weight: bold; } .wpt-overview .passes-none { background: #e57373; } .wpt-overview .passes-hardly { background: #ffb74d; } .wpt-overview .passes-a-few { background: #ffd54f; } .wpt-overview .passes-half { background: #fff176; } .wpt-overview .passes-lots { background: #dce775; } .wpt-overview .passes-most { background: #aed581; } .wpt-overview .passes-all { background: #81c784; }`)); } }); function formatWptResult({name, version, passes, total}) { const passRate = passes/total; let passClass = ""; if(passRate == 0) passClass = "passes-none"; else if(passRate < .2) passClass = "passes-hardly"; else if(passRate < .4) passClass = "passes-a-few"; else if(passRate < .6) passClass = "passes-half"; else if(passRate < .8) passClass = "passes-lots"; else if(passRate < 1) passClass = "passes-most"; else passClass = "passes-all"; name = name[0].toUpperCase() + name.slice(1); const shortVersion = /^\d+/.exec(version); const icon = [] if(name == "Chrome") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/chrome_64x64.png"})); if(name == "Edge") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/edge_64x64.png"})); if(name == "Safari") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/safari_64x64.png"})); if(name == "Firefox") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/firefox_64x64.png"})); return mk.li({"class":passClass}, mk.nobr({'class':'browser'}, ...icon, ` ${name} ${shortVersion}`), mk.br(), mk.nobr({'class':'pass-rate'}, `${passes}/${total}`) ); } } </script>