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 Box Alignment Module Level 3</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-align-3/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="92032ab38b3b9daa3dd047b670cbfc1e5a3389f0" 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> .issue th:first-child { text-align: left !important; } [rowspan] > img { float: right; } [rowspan] { vertical-align: middle; } table small { display: block; } table.align-details { width: 100%; } .align-details th { font: inherit; font-style: italic; white-space: nowrap; width: 1em; vertical-align: baseline; } .align-details td { vertical-align: baseline; } </style> <style> .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; } </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-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </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 Box Alignment Module Level 3</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2025-02-04">4 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-align/">https://drafts.csswg.org/css-align/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-align-3">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="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="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-align-3/Overview.bs">GitHub Editor</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> This module contains the features of <a href="https://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-inline-3" title="CSS Inline Layout Module Level 3">[CSS-INLINE-3]</a>.) <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-align” in the title, like this: “[css-align] …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-align%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"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>[ first | last ]? baseline <li>the <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position"><overflow-position></a> keywords <li>the scrollable-area safety trigger into <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe">safe</a> mode when no <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position①"><overflow-position></a> is specified <li>the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy">legacy</a> keyword for <a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items">justify-items</a> <li>the effect of the <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties">box alignment properties</a> on absolutely-positioned boxes with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto">auto</a> offsets </ul> “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. </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="#placement">1.1 Module Interactions</a> <li><a href="#values">1.2 Value Definitions</a> <li><a href="#partial">1.3 Partial Implementations</a> </ol> <li><a href="#overview">2 Overview of Alignment Properties</a> <li><a href="#terms">3 Alignment Terminology</a> <li> <a href="#alignment-values">4 Alignment Keywords</a> <ol class="toc"> <li><a href="#positional-values">4.1 Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <li><a href="#baseline-values">4.2 Baseline Alignment: the baseline keyword and first/last modifiers</a> <li><a href="#distribution-values">4.3 Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <li> <a href="#overflow-values">4.4 Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a> <ol class="toc"> <li> <a href="#auto-safety">4.4.1 Automatic Overflow Alignment Safety</a> <ol class="toc"> <li><a href="#auto-safety-scroll">4.4.1.1 Content Distribution for Scroll Containers</a> <li><a href="#auto-safety-position">4.4.1.2 Self-Alignment for Absolutely Positioned Boxes</a> <li><a href="#auto-safety-default">4.4.1.3 All Other Alignment</a> </ol> </ol> </ol> <li> <a href="#content-distribution">5 Content Distribution: Aligning a Box’s Contents Within Itself</a> <ol class="toc"> <li> <a href="#align-justify-content">5.1 The justify-content and align-content Properties</a> <ol class="toc"> <li><a href="#distribution-block">5.1.1 Block Containers (Including Table Cells)</a> <li><a href="#distribution-multicol">5.1.2 Multicol Containers</a> <li><a href="#distribution-flex">5.1.3 Flex Containers</a> <li><a href="#distribution-grid">5.1.4 Grid Containers</a> </ol> <li><a href="#place-content">5.2 Content-Distribution Shorthand: the place-content property</a> <li><a href="#overflow-scroll-position">5.3 Overflow and Scroll Positions</a> <li><a href="#baseline-align-content">5.4 Baseline Content-Alignment</a> </ol> <li> <a href="#self-alignment">6 Self-Alignment: Aligning the Box Within Its Parent</a> <ol class="toc"> <li> <a href="#justify-self-property">6.1 Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <ol class="toc"> <li><a href="#justify-block">6.1.1 Block-Level Boxes</a> <li><a href="#justify-abspos">6.1.2 Absolutely-Positioned Boxes</a> <li><a href="#justify-cell">6.1.3 Table Cells</a> <li><a href="#justify-flex">6.1.4 Flex Items</a> <li><a href="#justify-grid">6.1.5 Grid Items</a> </ol> <li> <a href="#align-self-property">6.2 Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <ol class="toc"> <li><a href="#align-block">6.2.1 Block-Level Boxes</a> <li><a href="#align-abspos">6.2.2 Absolutely-Positioned Boxes</a> <li><a href="#align-cell">6.2.3 Table Cells</a> <li><a href="#align-flex">6.2.4 Flex Items</a> <li><a href="#align-grid">6.2.5 Grid Items</a> </ol> <li><a href="#place-self-property">6.3 Self-Alignment Shorthand: the place-self property</a> <li><a href="#baseline-align-self">6.4 Baseline Self-Alignment</a> <li><a href="#abspos-sizing">6.5 Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> </ol> <li> <a href="#default-alignment">7 Default Alignment</a> <ol class="toc"> <li><a href="#justify-items-property">7.1 Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <li><a href="#align-items-property">7.2 Block-Axis (or Cross-Axis) Alignment: the align-items property</a> <li><a href="#place-items-property">7.3 Self-Alignment Shorthand: the place-items property</a> </ol> <li> <a href="#gaps">8 Gaps Between Boxes</a> <ol class="toc"> <li><a href="#column-row-gap">8.1 Row and Column Gutters: the row-gap and column-gap properties</a> <li><a href="#gap-shorthand">8.2 Gap Shorthand: the gap property</a> <li><a href="#gap-percent">8.3 Percentages In gap Properties</a> <li><a href="#gap-legacy">8.4 Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a> </ol> <li> <a href="#baseline-rules">9 Baseline Alignment Details</a> <ol class="toc"> <li><a href="#baseline-export">9.1 Determining the Baselines of a Box</a> <li><a href="#baseline-terms">9.2 Baseline Alignment Grouping</a> <li><a href="#align-by-baseline">9.3 Aligning Boxes by Baseline</a> </ol> <li><a href="#staticpos-rect"> Appendix A: Static Position Terminology</a> <li><a href="#changes">10 Changes</a> <li><a href="#privacy">11 Privacy Considerations</a> <li><a href="#security">12 Security Considerations</a> <li><a href="#acknowledgments"> Acknowledgments</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> CSS Levels 1 and 2 allowed for the alignment of text via <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> and the alignment of blocks by balancing auto margins. However, except in table cells, vertical alignment was not possible. As CSS adds further capabilities, the ability to align boxes in various dimensions becomes more critical. This module attempts to create a cohesive and common box alignment model to share among all of CSS. Note: The alignment of text and inline-level content is defined in <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-inline-3" title="CSS Inline Layout Module Level 3">[CSS-INLINE-3]</a>. Note: This specification is not intended to change any of the behavior defined in <a href="https://www.w3.org/TR/CSS2/">CSS2.1</a> when the properties defined here are set to their initial values. If implementors or anyone else notices a discrepancy, please report this to the CSSWG as an error. This section (above) is not normative. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module adds some new alignment capabilities to the block layout model described in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html">chapters 9</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html">10</a>, <a href="#justify-block">redefines how overconstrained block-level box margins are resolved</a>, and defines the interaction of these new alignment properties with the alignment of table cell content using <a class="property css" data-link-type="property">vertical-align</a>, as defined in [CSS2] <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">chapter 17</a>. The interaction of these properties with Grid Layout <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> and Flexible Box Layout <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> is defined in their respective modules. The property definitions here supersede those in [CSS-FLEXBOX-1] (which have a smaller, earlier subset of permissible values). No properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements. <h3 class="heading settled" data-level="1.2" id="values">1.2. 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. <h3 class="heading settled" data-level="1.3" id="partial">1.3. Partial Implementations<a class="self-link" href="#partial"></a></h3> Since it is expected that support for the features in this module will be deployed in stages corresponding to the various layout models affected, it is hereby clarified that the <a href="https://www.w3.org/TR/CSS/#partial">rules for partial implementations</a> that require treating as invalid any unsupported feature apply to any alignment keyword which is not supported across all layout modules to which it applies for layout models in which the implementation supports the property in general. For example, if an implementation supports <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self">align-self</a> in <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> and <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>, then it must treat <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a> as invalid unless it is supported in both grid and flex containers. However if that same implementation does not support align-self for block-level elements at all, then a lack of implementation of align-self: start does not trigger this requirement to treat it as invalid. <h2 class="heading settled" data-level="2" id="overview">2. Overview of Alignment Properties<a class="self-link" href="#overview"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="box-alignment-properties">box alignment properties</dfn> in CSS are a set of 6 properties that control alignment of boxes within other boxes. They can be described along two axises: <ul> <li>which dimension they apply to (<a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis">main</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline</a> vs. <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis">cross</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block</a>), and <li>whether they control the position of the box within its parent, or the box’s content within itself. </ul> Note: This specification uses the terms “justify” and “align” to distinguish between alignment in the main/inline and cross/block dimensions, respectively. The choice is somewhat arbitrary, but having the two terms allows for a consistent naming scheme that works across all of CSS’s layout models (including <a href="https://drafts.csswg.org/css-flexbox-1/#box-model"><cite>CSS Flexbox 1</cite> § 2 Flex Layout Box Model and Terminology</a>) The following table summarizes the <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties①">box alignment properties</a> and the display types they can apply to. <table class="data"> <colgroup span="1"> <colgroup span="2"> <colgroup span="1"> <thead> <tr> <th>Common <th>Axis <th>Aligns <th>Applies to <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a> <td>main/inline <td rowspan="2"> <img alt height="106" src="images/content-example.svg" width="106"> content within element (effectively adjusts padding) <td rowspan="2"><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</a> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content">align-content</a> <td>cross/block <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self</a> <td>inline <td rowspan="2"> <img alt height="106" src="images/self-example.svg" width="106"> element within parent (effectively adjusts margins) <td>block-level boxes, absolutely-positioned boxes, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item">grid items</a> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self③">align-self</a> <td>cross/block <td>absolutely-positioned boxes, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item①">grid items</a> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items①">justify-items</a> <td>inline <td rowspan="2"> <img alt height="106" src="images/items-example.svg" width="106"> items inside box (controls child items’ justify-self: auto) <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container①">block containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items">align-items</a> <td>cross/block <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid containers</a> </table> Note: The *-items properties don’t affect the element itself. When set on a container, they specify the interpretation of any *-self: auto used on children of the container element. <h2 class="heading settled" data-level="3" id="terms">3. Alignment Terminology<a class="self-link" href="#terms"></a></h2> Since this module defines alignment properties for all layout modes in CSS, some abstract terminology is introduced: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-subject">alignment subject</dfn> <dd> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject">alignment subject</a> is the thing or things being aligned by the property. For <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①">justify-self</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self④">align-self</a>, the alignment subject is the margin box of the box the property is set on, and assumes 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> of that box. For <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>, the alignment subject is defined by the layout mode and refers to some aspect of its contents; it also assumes the writing mode of the box the property is set on. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-container">alignment container</dfn> <dd> The <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container">alignment container</a> is the rectangle that the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③">alignment subject</a> is aligned within. This is defined by the layout mode, but is usually the alignment subject’s containing block, and assumes 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> of the box establishing the containing block. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="fallback-alignment">fallback alignment</dfn> <dd> Some alignments can only be fulfilled in certain situations or are limited in how much space they can consume; for example, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between">space-between</a> can only operate when there is more than one <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤">alignment subject</a>, and baseline alignment, once fulfilled, might not be enough to absorb all the excess space. In these cases a fallback alignment takes effect (as defined below) to fully consume the excess space. </dl> <h2 class="heading settled" data-level="4" id="alignment-values">4. Alignment Keywords<a class="self-link" href="#alignment-values"></a></h2> All of the alignment properties use a common set of keyword values, which are defined in this section. Keywords fall into three categories: <dl> <dt><a href="#positional-values">positional alignment</a> <dd>These keywords define alignment as an absolute position within the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①">alignment container</a>. <dt><a href="#baseline-values">baseline alignment</a> <dd>These keywords define alignment as a relationship among the baselines of multiple <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥">alignment subjects</a> within an <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context">alignment context</a>. <dt><a href="#distribution-values">distributed alignment</a> <dd>These keywords define alignment as a distribution of space among <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦">alignment subjects</a>. </dl> <h3 class="heading settled" data-level="4.1" id="positional-values">4.1. Positional Alignment: the <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①">start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start">self-start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end">self-end</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start">flex-start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-end" id="ref-for-valdef-self-position-flex-end">flex-end</a>, <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left">left</a>, and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right">right</a> keywords<a class="self-link" href="#positional-values"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="positional-alignment">positional alignment</dfn> keywords specify a position for an <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑧">alignment subject</a> with respect to its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②">alignment container</a>. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>, justify-self, align-self, justify-content, align-content" data-dfn-type="value" data-export id="valdef-self-position-center">center</dfn> (<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>) <dd>Centers the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑨">alignment subject</a> within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③">alignment container</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>, justify-self, align-self, justify-content, align-content" data-dfn-type="value" data-export id="valdef-self-position-start">start</dfn> (<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>) <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⓪">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④">alignment container</a>’s start edge in the appropriate axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>, justify-self, align-self, justify-content, align-content" data-dfn-type="value" data-export id="valdef-self-position-end">end</dfn> (<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>) <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①①">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑤">alignment container</a>’s end edge in the appropriate axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, justify-self, align-self" data-dfn-type="value" data-export id="valdef-self-position-self-start">self-start</dfn> (<a href="#self-alignment">self</a>) <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①②">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑥">alignment container</a> corresponding to the alignment subject’s start side in the appropriate axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, justify-self, align-self" data-dfn-type="value" data-export id="valdef-self-position-self-end">self-end</dfn> (<a href="#self-alignment">self</a>) <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①④">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑦">alignment container</a> corresponding to the alignment subject’s end side in the appropriate axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>, justify-self, align-self, justify-content, align-content" data-dfn-type="value" data-export id="valdef-self-position-flex-start">flex-start</dfn> (<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>) <dd> Only used in flex layout. <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑥">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑧">alignment container</a> corresponding to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex container</a>’s main-start or cross-start side, as appropriate. When used outside of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context">flex formatting context</a>, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②">start</a>. That is, on boxes that are not <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①">flex items</a> (or pretending to be flex items, such as when determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position">static position</a> of an absolutely-positioned box that is a child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex container</a>), this value behaves as start when used in the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties">self-alignment properties</a>, and on boxes that are not flex containers, this value behaves as start when used in the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties">content-distribution properties</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>, justify-self, align-self, justify-content, align-content" data-dfn-type="value" data-export id="valdef-self-position-flex-end">flex-end</dfn> (<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>) <dd> Only used in flex layout. Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑦">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑨">alignment container</a> corresponding to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex container</a>’s main-end or cross-end side, as appropriate. When used outside of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context①">flex formatting context</a>, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①">end</a>. That is, on boxes that are not <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item③">flex items</a> (or pretending to be flex items, such as when determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position①">static position</a> of an absolutely-positioned box that is a child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑥">flex container</a>), this value behaves as end when used in the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties①">self-alignment properties</a>, and on boxes that are not flex containers, this value behaves as end when used in the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties①">content-distribution properties</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content, justify-self, justify-items" data-dfn-type="value" data-export id="valdef-justify-content-left">left</dfn> (only justify-*) <dd> Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑧">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⓪">alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-left">line-left</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical-left" id="ref-for-physical-left">physical left</a> edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑤">start</a>. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox. <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content, justify-self, justify-items" data-dfn-type="value" data-export id="valdef-justify-content-right">right</dfn> (only justify-*) <dd> Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑨">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①①">alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-right">line-right</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical-right" id="ref-for-physical-right">physical right</a> edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑥">start</a>. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox. </dl> Two grammar terms are used to denote certain subsets of these values: <dl> <dt><a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position"><self-position></a> <dd> This set is used by <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②">justify-self</a> and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑤">align-self</a> to align the box within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①②">alignment container</a>, and also by <a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items②">justify-items</a> and <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items①">align-items</a> (to specify default values for justify-self and align-self). <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-self-position"><self-position></dfn> = center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> 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 </pre> <dt><a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position"><content-position></a> <dd> This set is used by <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> to align the box’s contents within itself. <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-content-position"><content-position></dfn> = center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> 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 </pre> </dl> Note: <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left①">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right①">right</a> are excluded from <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position①"><self-position></a> and <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position①"><content-position></a>, despite being valid <a data-link-type="dfn" href="#positional-alignment" id="ref-for-positional-alignment">positional alignment</a> values for <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-justify-self" id="ref-for-propdef-justify-self④">justify-self</a>/<a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items③">justify-items</a>, because they are not allowed in the align-* properties. They are instead explicitly included in the justify-* properties’ grammars. <aside class="example" id="example-862b737b"> <a class="self-link" href="#example-862b737b"></a> The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑦">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end④">end</a> keywords are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a>: they use 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> to determine which side to align to. <figure> <img alt="Inline-axis 'start' alignment: Horizontal Latin and Chinese are left-aligned, while Arabic and Hebrew are right-aligned." height="125" src="images/start-inline-tb.svg" style="background: white; padding: 8px;" title="inline-axis 'start' alignment in various writing systems" width="199"> <img alt="Inline-axis 'end' alignment: Horizontal Latin and Chinese are right-aligned, while Arabic and Hebrew are left-aligned." height="125" src="images/end-inline-tb.svg" style="background: white; padding: 8px;" title="inline-axis 'end' alignment in various writing systems" width="199"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑧">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑤">end</a> in 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> (<a href="#flexbox-exception">typically†</a> justify-*) </figcaption> </figure> The <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left②">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right②">right</a> keywords are absolute (not <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a>). <figure> <img alt="Inline-axis 'left' alignment: Horizontal text is left-aligned, regardless of writing system." height="125" src="images/left-inline-tb.svg" style="background: white; padding: 8px;" title="'left' alignment in various writing systems" width="175"> <img alt="Inline-axis 'right' alignment: Horizontal text is right-aligned, regardless of writing system." height="125" src="images/right-inline-tb.svg" style="background: white; padding: 8px;" title="'right' alignment in various writing systems" width="176"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left③">left</a> vs <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right③">right</a> </figcaption> </figure> The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑨">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑥">end</a> keywords have meaning in both the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block</a> axes: start always orients to the start of the text (top left for left-to-right/top-to-bottom languages like English) while end always orients to the end of the text. <figure> <img alt="Block-axis 'start' alignment: Horizontal text is top-aligned in the vertical axis." height="125" src="images/start-block-tb.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);" title="block-axis 'start' alignment in various writing systems" width="183"> <img alt="Block-axis 'bottom' alignment: Horizontal text is bottom-aligned in the vertical axis." height="125" src="images/end-block-tb.svg" style="background: white; padding: 8px; padding-top: calc(8px + 23px);" title="block-axis 'end' alignment in various writing systems" width="183"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①①">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑧">end</a> in 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> (<a href="#flexbox-exception">typically†</a> align-*) </figcaption> </figure> The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①②">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑨">end</a> keywords use 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> of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①③">alignment container</a>, to help keep things consistent. But if alignment using the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②⓪">alignment subject</a>’s writing mode is needed, the <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start①">self-start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end①">self-end</a> keywords can be used. <figure> <img alt="Inline-axis 'start' alignment in an LTR container: Alignment uses the context’s start direction, so the (RTL) Arabic and Hebrew items are left-aligned alongside the (LTR) Latin and Chinese." height="193" src="images/self-v-context-start-tb.svg" style="background: white; padding: 8px;" title="inline-axis 'start' alignment with LTR context" width="204"> <img alt="Inline-axis 'self-start' alignment in an LTR container: Horizontal Latin and Chinese items are right-aligned, while Arabic and Hebrew items are left-aligned." height="193" src="images/self-v-context-self-start-tb.svg" style="background: white; padding: 8px;" title="inline-axis 'self-start' alignment with LTR context" width="229"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①③">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start②">self-start</a> on the individual items </figcaption> </figure> </aside> <aside class="example" id="example-472854ee"> <a class="self-link" href="#example-472854ee"></a> The behavior of the alignment keywords is analogous in <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>: <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①④">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①⓪">end</a> are relative to the start/end of the text in the relevant axis. The <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left④">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right④">right</a> keywords are interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-left" id="ref-for-line-left">line-left</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-right" id="ref-for-line-right">line-right</a>, relative to the “left” and “right” sides of LTR/RTL text. <figure> <img alt="Inline-axis 'start' alignment in vertical-rl writing: Vertical Latin and Chinese are top-aligned, while Arabic and Hebrew are bottom-aligned." height="200" src="images/start-inline-rl.svg" style="background: white; padding: 8px;" title="inline-axis 'start' alignment in various writing systems" width="125"> <img alt="Inline-axis 'end' alignment in vertical-rl writing: Vertical Latin and Chinese are top-aligned, while Arabic and Hebrew are bottom-aligned." height="200" src="images/end-inline-rl.svg" style="background: white; padding: 8px;" title="inline-axis 'end' alignment in various writing systems" width="125"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑤">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①①">end</a> in 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> (<a href="#flexbox-exception">typically†</a> justify-*) </figcaption> </figure> <figure> <img alt="Inline-axis 'left' alignment in vertical-rl writing: Vertical text is top-aligned, regardless of writing system." height="174" src="images/left-inline-rl.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);" title="'left' alignment in various writing systems" width="126"> <img alt="Inline-axis 'right' alignment in vertical-rl writing: Vertical text is bottom-aligned, regardless of writing system." height="180" src="images/right-inline-rl.svg" style="background: white; padding: 8px; padding-top: calc(5px + 23px); padding-bottom: 5px;" title="'right' alignment in various writing systems" width="125"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑤">left</a> vs <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑤">right</a> </figcaption> </figure> <figure> <img alt="Block-axis 'start' alignment in vertical-rl writing: Vertical text is top-aligned in the vertical axis." height="183" src="images/start-block-rl.svg" style="background: white; padding: 8px;" title="block-axis 'start' alignment in various writing systems" width="123"> <img alt="Block-axis 'bottom' alignment in vertical-rl writing: Vertical text is bottom-aligned in the vertical axis." height="183" src="images/end-block-rl.svg" style="background: white; padding: 8px;" title="block-axis 'end' alignment in various writing systems" width="125"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑥">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①②">end</a> in 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> (<a href="#flexbox-exception">typically†</a> align-*) </figcaption> </figure> <figure> <img alt="Inline-axis 'start' alignment in a vertical-rl LTR container: Alignment uses the context’s start direction, so the (RTL) Arabic and Hebrew items are top-aligned alongside the (LTR) Latin and Chinese." height="210" src="images/self-v-context-start-rl.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 30px);" title="inline-axis 'start' alignment with LTR context" width="162"> <img alt="Inline-axis 'self-start' alignment in a vertical-rl LTR container: Horizontal Latin and Chinese items are top-aligned, while Arabic and Hebrew items are bottom-aligned." height="240" src="images/self-v-context-self-start-rl.svg" style="background: white; padding: 8px;" title="inline-axis 'self-start' alignment with LTR context" width="162"> <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑦">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start③">self-start</a> on the individual items </figcaption> </figure> </aside> <div class="note" id="flexbox-exception" role="note"> <a class="self-link" href="#flexbox-exception"></a> For most layout models (block, table, grid, etc), the justify-* properties always align things in 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>, while the align-* properties always align things in 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>. Flexbox, on the other hand, has justify-* align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis①">main axis</a> and align-* align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis①">cross axis</a>. This depends on the value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction" id="ref-for-propdef-flex-direction">flex-direction</a>: when flex-direction is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row">row</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse">row-reverse</a>, it matches the other layout modes (<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑤">inline axis</a> with justify-*, <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑤">block axis</a> with align-*); when flex-direction is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column">column</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse">column-reverse</a>, it has the opposite correspondence. </div> <a class="self-link" href="#issue-bb5da799"></a> Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows. <h3 class="heading settled" data-level="4.2" id="baseline-values">4.2. Baseline Alignment: the <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline">baseline</a> keyword and <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline">first</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline">last</a> modifiers<a class="self-link" href="#baseline-values"></a></h3> 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>. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-alignment">Baseline alignment</dfn> is a form of positional alignment that aligns multiple <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②①">alignment subjects</a> within a <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①">shared alignment context</a> (such as cells within a row) by matching up their <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline">alignment baselines</a>. If the position of the alignment subjects within a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group">baseline-sharing group</a> is not fully constrained by <a data-link-type="dfn" href="#baseline-alignment" id="ref-for-baseline-alignment">baseline alignment</a> (i.e., they could be shifted within their respective <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①④">alignment containers</a> while maintaining baseline-alignment), they are <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment">fallback-aligned</a> insofar as possible while preserving their baseline alignment. The baseline alignment keywords are represented with the <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position"><baseline-position></a> grammar term: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-baseline-position"><baseline-position></dfn> = [ first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> last ]<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-all" id="ref-for-comb-all">&&</a> baseline </pre> The <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①">first</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline①">last</a> values give a box a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-alignment-preference">baseline alignment preference</dfn>: either “first” or “last”, respectively, defaulting to “first”. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export id="valdef-justify-self-baseline">baseline</dfn> <dd> Computes to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline②">first baseline</a>, defined below. <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export data-lt="first baseline | first" id="valdef-justify-self-first-baseline">first baseline</dfn> <dd> Specifies participation in <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="first-baseline-alignment">first-baseline alignment</dfn>: aligns the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline①">alignment baseline</a> of the box’s <a data-link-type="dfn" href="#first-baseline-set" id="ref-for-first-baseline-set">first baseline set</a> with the corresponding baseline of its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①">baseline-sharing group</a>. See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for more details. The <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①">fallback alignment</a> for <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline③">first baseline</a> is safe self-start (for <a data-link-type="dfn" href="#self-align" id="ref-for-self-align">self-alignment</a>) or safe start (for <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute">content-distribution</a>). <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export data-lt="last baseline | last" id="valdef-justify-self-last-baseline">last baseline</dfn> <dd> Specifies participation in <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="last-baseline-alignment">last-baseline alignment</dfn>: aligns the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline②">alignment baseline</a> of the box’s <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set">last baseline set</a> with the corresponding baseline of its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group②">baseline-sharing group</a>.̣ See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for more details. The <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment②">fallback alignment</a> for <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline②">last baseline</a> is safe self-end (for <a data-link-type="dfn" href="#self-align" id="ref-for-self-align①">self-alignment</a>) or safe end (for <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute①">content-distribution</a>). </dl> When specified for <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a>, these values trigger <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment">baseline content-alignment</a>, shifting the content of the box within its content box, and may also affect the sizing of the box itself. See <a href="#baseline-align-content">§ 5.4 Baseline Content-Alignment</a>. When specified for <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-justify-self" id="ref-for-propdef-justify-self⑤">justify-self</a>, these values trigger <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment">baseline self-alignment</a>, shifting the entire box within its container, which may affect the sizing of its container. See <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>. When <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment①">baseline self-alignment</a> is specified on a box, <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute②">content distribution</a> is performed first, then the resulting box and its contents are self-aligned However, if the box also has <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①">baseline content-alignment</a> in the same axis or if its <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties②">content-distribution property</a> in the same axis is <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal">normal</a>, its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used</a> content-distribution property in that axis is <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑧">start</a> or safe end for a <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference">baseline alignment preference</a> of its baseline self-alignment of “first” or “last”, respectively. <a class="self-link" href="#issue-13b9ed6a"></a>Add example images here. If a box does not belong to a <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context②">shared alignment context</a>, then the <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment③">fallback alignment</a> is used. For example, <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content④">align-content: baseline</a> on a block box falls back to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑨">start</a> alignment. The fallback alignment is also used to align the <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group③">baseline-sharing group</a> within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑤">alignment container</a>. Note: Because they are equivalent, and <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline①">baseline</a> is shorter, the CSSOM serializes <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline④">first baseline</a> as baseline. See <a href="https://drafts.csswg.org/cssom-1/#serializing-css-values"><cite>CSSOM</cite> § 6.7.2 Serializing CSS Values</a>. Note: For the somewhat-related <a class="property css" data-link-type="property">vertical-align</a> property, due to inconsistent design decisions in CSS2.1, <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline③">baseline</a> is not equivalent to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑤">first baseline</a> as an inline-level box’s <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference①">baseline alignment preference</a> depends on <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a>. (E.g., <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a> uses its last baseline by default, while <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a> uses its first baseline by default.) <h3 class="heading settled" data-level="4.3" id="distribution-values">4.3. Distributed Alignment: the <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch">stretch</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between①">space-between</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-around" id="ref-for-valdef-align-content-space-around">space-around</a>, and <a class="css" data-link-type="maybe" href="#valdef-align-content-space-evenly" id="ref-for-valdef-align-content-space-evenly">space-evenly</a> keywords<a class="self-link" href="#distribution-values"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="distributed-alignment">distributed alignment</dfn> values are used by <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> to disperse a container’s extra space among its <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②③">alignment subjects</a>. <figure> <img alt="space-between | space-around | space-evenly | stretch" height="218" src="images/distribute.svg" width="504"> <figcaption>The <a data-link-type="dfn" href="#distributed-alignment" id="ref-for-distributed-alignment">distributed alignment</a> values</figcaption> </figure> When space cannot be distributed in this way, these values behave as their <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑤">fallback alignment</a>. Each distribution value has an associated default fallback alignment. (A future level of this module may allow the fallback alignment to be specified explicitly.) <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-between">space-between</dfn> <dd> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②④">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑥">alignment container</a>. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same. <figure> <img alt="For example, given three items, all excess space is split in two and distributed: one half between the first two and one half between the last two items." height="56" src="images/space-between.svg" width="504"> </figure> The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑧">fallback alignment</a> for this value is safe flex-start. (For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start①">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⓪">start</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-around">space-around</dfn> <dd> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②⑨">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑨">alignment container</a>, with a half-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same, and the spacing before the first and after the last alignment subject is half the size of the other spacing. <figure> <img alt="For example, given three items, all excess space is split into sixths and distributed: one sixth at the start, one at the end, and two sixths (one third) each between the first two and between the last two items." height="56" src="images/space-around.svg" width="504"> </figure> The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑨">fallback alignment</a> for this value is safe center. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-evenly">space-evenly</dfn> <dd> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③③">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⓪">alignment container</a>, with a full-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same. <figure> <img alt="For example, given three items, all excess space is split into fourths and distributed: to the start, to the end, to between the first two, and to between the last two items." height="56" src="images/space-evenly.svg" width="504"> </figure> The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⓪">fallback alignment</a> for this value is safe center. <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-stretch">stretch</dfn> <dd> If the combined size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③⑧">alignment subjects</a> is less than the size of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②①">alignment container</a>, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by <a class="property css" data-link-type="property">max-height</a>/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. <figure> <img alt="For example, given three items, all excess space is split into thirds and distributed: one third to each item." height="56" src="images/space-stretch.svg" width="504"> </figure> The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①①">fallback alignment</a> for this value is <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start②">flex-start</a>. (For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start③">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②①">start</a>.) Note: This `align-content/stretch` definition applies to the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties④">content-distribution properties</a>; the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties②">self-alignment properties</a> <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑥">justify-self</a>/<a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self⑧">align-self</a> have their own <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch">stretch</a> value, which can grow or shrink the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⓪">alignment subject</a> to ensure it exactly fits the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②③">alignment container</a>. </dl> These values are represented with the <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution"><content-distribution></a> grammar term: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-content-distribution"><content-distribution></dfn> = space-between <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> space-around <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> space-evenly <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> stretch </pre> <h3 class="heading settled" data-level="4.4" id="overflow-values">4.4. Overflow Alignment: the <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe①">safe</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe">unsafe</a> keywords and scroll safety limits<a class="self-link" href="#overflow-values"></a></h3> When the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④①">alignment subject</a> is larger than the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②④">alignment container</a>, it will overflow. Some alignment modes, if honored in this situation, may cause data loss: for example, if the contents of a sidebar are centered, when they overflow they may send part of their boxes past the viewport’s start edge, which can’t be scrolled to. <div class="example" id="example-4fa66bd0"> <a class="self-link" href="#example-4fa66bd0"></a> The figure below illustrates the difference in “safe” versus “unsafe” centering, using a column flexbox as an example: <figure> <div style="display:table; margin: 0 auto 1em;"> <div class="cross-auto-figure" style="display:table-cell; padding-right: 70px;"> <div> <div>About</div> <div style="white-space: nowrap;">Authoritarianism</div> <div>Blog</div> </div> </div> <div class="cross-auto-figure" style="display:table-cell; padding-left: 70px;"> <div> <div>About</div> <div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div> <div>Blog</div> </div> </div> </div> <figcaption> An example of "safe" (on the left) vs "unsafe" (on the right) centering, when the centered item is larger than its container. </figcaption> </figure> The items in the figure on the left are centered unless they overflow, in which case all the overflow goes off the end edge, while those in the figure on the right are are all strictly centered, even if the one that is too long to fit overflows on both sides. If the container was placed against the left edge of the page, the “safe” behavior would be more desirable, as the long item would be fully readable, rather than clipped by the left edge of the screen. In other circumstances, the “unsafe” centering behavior might be better, as it correctly centers all the items. </div> To control this situation, an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="overflow-alignment">overflow alignment</dfn> mode can be explicitly specified. “Unsafe” alignment honors the specified alignment mode in overflow situations, even if it causes data loss, while “safe” alignment changes the alignment mode in overflow situations in an attempt to avoid data loss. The default behavior is to contain the alignment subject within the scrollable area, though at the time of writing this safety feature is not yet implemented. <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-overflow-position"><overflow-position></dfn> = unsafe <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> safe</pre> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<overflow-position>" data-dfn-type="value" data-export id="valdef-overflow-position-safe">safe</dfn> <dd> If the size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④②">alignment subject</a> overflows the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑤">alignment container</a>, the alignment subject is instead aligned as if the alignment mode were <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②②">start</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<overflow-position>" data-dfn-type="value" data-export id="valdef-overflow-position-unsafe">unsafe</dfn> <dd> Regardless of the relative sizes of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④④">alignment subject</a> and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑥">alignment container</a>, the given alignment value is honored. <dt>(no value specified) <dd> If the <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment">overflow alignment</a> isn’t explicitly specified, the default overflow alignment is a blend of “safe” and “unsafe”. See <a href="#auto-safety">§ 4.4.1 Automatic Overflow Alignment Safety</a> for details. </dl> <h4 class="heading settled" data-level="4.4.1" id="auto-safety">4.4.1. Automatic Overflow Alignment Safety<a class="self-link" href="#auto-safety"></a></h4> If no <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment②">overflow alignment</a> mode is specified for a property, the default behavior lies somewhere between <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe②">safe</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe①">unsafe</a>, and also varies by layout mode. <h5 class="heading settled" data-level="4.4.1.1" id="auto-safety-scroll">4.4.1.1. Content Distribution for Scroll Containers<a class="self-link" href="#auto-safety-scroll"></a></h5> The default <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment③">overflow alignment</a> behavior for <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute③">content distribution</a> on <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll containers</a> is <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe②">unsafe</a>. Non-<a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①">normal</a> values of the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties⑤">content-distribution properties</a> instead alter the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow area</a> in order to allow access to the overflowing content. See <a href="#overflow-scroll-position">§ 5.3 Overflow and Scroll Positions</a>. <h5 class="heading settled" data-level="4.4.1.2" id="auto-safety-position">4.4.1.2. Self-Alignment for Absolutely Positioned Boxes<a class="self-link" href="#auto-safety-position"></a></h5> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position">absolutely positioned</a> <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑤">alignment subjects</a> whose relevant <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties③">self-alignment property</a> is not <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal">normal</a>, the default <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment④">overflow alignment</a> behavior is as follows: <div class="algorithm" data-algorithm="default overflow self-alignment for abspos"> <ol> <li data-md> Let the <var>default overflow rect</var> be the bounding rectangle of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑥">alignment subject’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block">inset-modified containing block</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#original-containing-block" id="ref-for-original-containing-block">original containing block</a>. <li data-md> If the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑦">alignment subject</a> overflows its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#inset-modified-containing-block" id="ref-for-inset-modified-containing-block①">inset-modified containing block</a> (its normal <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑦">alignment container</a>), but does not overflow <var>default overflow rect</var> align as specified (<a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe③">unsafe</a>). <li data-md> If the size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑧">alignment subject</a> fits within the <var>default overflow rect</var>, but its specified alignment would cause it to overflow the <var>default overflow rect</var>, it is instead shifted the minimum amount to stay within the <var>default overflow rect</var> while honoring the alignment as much as possible (i.e., flush with the edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#original-containing-block" id="ref-for-original-containing-block①">original containing block</a> it was trying to overflow over). <li data-md> If the size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑨">alignment subject</a> overflows the <var>default overflow rect</var>, it is instead start-aligned within the <var>default overflow rect</var> (similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe③">safe</a>). </ol> </div> (For <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-position" id="ref-for-absolute-position①">absolutely-positioned</a> <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⓪">alignment subjects</a> that fail the above condition, see <a href="#auto-safety-default">§ 4.4.1.3 All Other Alignment</a>.) <h5 class="heading settled" data-level="4.4.1.3" id="auto-safety-default">4.4.1.3. All Other Alignment<a class="self-link" href="#auto-safety-default"></a></h5> For all other elements: <ol> <li data-md> If the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤①">alignment subject</a> overflows its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑧">alignment container</a>, align as specified (<a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe④">unsafe</a>). <li data-md> If the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤②">alignment subject</a> would overflow the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region①">scrollable overflow area</a> of its nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll container</a>, (thus extending into the “unscrollable” region), then its overflow in that direction is limited by biasing any remaining overflow to the opposite side. </ol> <a class="self-link" href="#issue-6c9376ad"></a> It may not be Web-compatible to implement the “smart” default behavior (though we hope so, and believe it to be likely), so UAs should pass any feedback on this point to the WG. UAs that have not implemented the “smart” default behavior must behave as <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe④">safe</a> for <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑥">align-content</a> on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container②">block containers</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe⑤">unsafe</a> otherwise. <h2 class="heading settled" data-level="5" id="content-distribution">5. Content Distribution: Aligning a Box’s Contents Within Itself<a class="self-link" href="#content-distribution"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="content distribution | content-distribution" id="content-distribute">Content distribution</dfn> controls alignment of the box’s content within its content box. It is specified by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-distribution-properties">content-distribution properties</dfn> <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑦">align-content</a> and <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑤">justify-content</a> (and their <a class="property css" data-link-type="property" href="#propdef-place-content" id="ref-for-propdef-place-content">place-content</a> shorthand). <div class="figure"> <img alt="Diagram showing that the alignment of the content within the element is affected." height="212" src="images/content-example.svg" width="212"> </div> <h3 class="heading settled" data-level="5.1" id="align-justify-content">5.1. 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-content" id="ref-for-propdef-align-content⑧">align-content</a> Properties<a class="self-link" href="#align-justify-content"></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">normal <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="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position①"><baseline-position></a> | <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution①"><content-distribution></a> | <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position②"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position②"><content-position></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>block containers, multicol containers, flex containers, and grid containers <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(s) <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="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">normal <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="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution②"><content-distribution></a> | <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position③"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> [ <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position③"><content-position></a> | left | right ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>multicol containers, flex containers, and grid containers <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(s) <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> Aligns the contents of the box as a whole (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤③">alignment subject</a>) within the box itself (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑨">alignment container</a>): along the inline/row/main axis of the box (for <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑦">justify-content</a>) or the block/column/cross axis of the box (for <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content⑨">align-content</a>). Values other than <dfn class="dfn-paneled css" data-dfn-for="justify-content, align-content" data-dfn-type="value" data-export id="valdef-justify-content-normal">normal</dfn> are defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above. For all layout modes, the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤④">alignment subject</a> and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⓪">alignment container</a> both assume 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> of the box the *-content property is set on. <h4 class="heading settled" data-level="5.1.1" id="distribution-block">5.1.1. Block Containers (Including Table Cells)<a class="self-link" href="#distribution-block"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③①">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container③">block container</a>’s content box. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑤">Alignment Subject(s)</a> <td> The entire contents of the block, as a unit. <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⓪">align-content</a> Axis <td> 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>. If a <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution③"><content-distribution></a> is specified its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①②">fallback alignment</a> is used instead. If no <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position④"><overflow-position></a> is specified, and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container④">block container</a> is not a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container②">scroll container</a>, then alignment is safe. <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑧">justify-content</a> Axis <td> Does not apply to and has no effect on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑤">block containers</a>. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal②">normal</a> Behavior <td> All values other than <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal③">normal</a> force the block container to <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">establish an independent formatting context</a>. For table cells, the behavior of <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①①">align-content: normal</a> depends on the computed value of <a class="property css" data-link-type="property">vertical-align</a>: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-top" id="ref-for-valdef-baseline-shift-top">top</a> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②③">start</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-bottom" id="ref-for-valdef-baseline-shift-bottom">bottom</a> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①③">end</a>; otherwise <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-middle" id="ref-for-valdef-alignment-baseline-middle">middle</a> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center①">center</a>, and all other values make it behave as <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline④">baseline</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal④">normal</a> otherwise behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②④">start</a>. </table> <h4 class="heading settled" data-level="5.1.2" id="distribution-multicol">5.1.2. Multicol Containers<a class="self-link" href="#distribution-multicol"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③②">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column container</a>’s content box. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑥">Alignment Subject(s)</a> <td> The column boxes, with any spacing inserted between column boxes added to the relevant column gaps. <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①②">align-content</a> Axis <td> 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>, treating the column boxes (and any column-spanning elements), as a singular unit. If a <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution④"><content-distribution></a> is specified its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①③">fallback alignment</a> is used instead. <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑨">justify-content</a> Axis <td> 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>. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑤">normal</a> Behavior <td> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑥">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch①">stretch</a>; both are defined as described in the column-sizing rules of <a data-link-type="biblio" href="#biblio-css-multicol-1" title="CSS Multi-column Layout Module Level 1">[CSS-MULTICOL-1]</a>. In the case of multi-column containers with a non-<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-2/#valdef-column-width-auto" id="ref-for-valdef-column-width-auto">auto</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-multicol-2/#propdef-column-width" id="ref-for-propdef-column-width">column-width</a>, <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⓪">justify-content</a> values other than <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑦">normal</a> or <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch②">stretch</a> cause the columns to take their specified column-width rather than stretching to fill the container. The column boxes are then aligned as specified by justify-content. </table> <h4 class="heading settled" data-level="5.1.3" id="distribution-flex">5.1.3. Flex Containers<a class="self-link" href="#distribution-flex"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③③">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑧">flex container</a>’s content box. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑦">Alignment Subject(s)</a> <td> For <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①②">justify-content</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑤">flex items</a> in each <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line">flex line</a>. For <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①③">align-content</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line①">flex lines</a>. Note, this only has an effect on <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container" id="ref-for-multi-line-flex-container">multi-line flex containers</a>. <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①④">align-content</a> Axis <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis②">cross axis</a>. <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①③">justify-content</a> Axis <td> The <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①④">justify-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis②">main axis</a>, but since stretching in the main axis is controlled by <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex">flex</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch③">stretch</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start④">flex-start</a>. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑧">normal</a> Behavior <td> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑨">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch④">stretch</a>. </table> See <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> for details. <h4 class="heading settled" data-level="5.1.4" id="distribution-grid">5.1.4. Grid Containers<a class="self-link" href="#distribution-grid"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③④">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid container</a>’s content box. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑧">Alignment Subject(s)</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-track" id="ref-for-grid-track">grid tracks</a> in the appropriate axis, with any spacing inserted between tracks added to the relevant <a data-link-type="dfn" href="#gutter" id="ref-for-gutter">gutters</a>, and treating <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#collapsed-gutter" id="ref-for-collapsed-gutter">collapsed gutters</a> as a single opportunity for space insertion. <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⑤">align-content</a> Axis <td> 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>, aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-row" id="ref-for-grid-row">grid rows</a>. <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑤">justify-content</a> Axis <td> 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>, aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-column" id="ref-for-grid-column">grid columns</a>. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①⓪">normal</a> Behavior <td> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①①">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch⑤">stretch</a>. </table> See <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> for details. <h3 class="heading settled" data-level="5.2" id="place-content">5.2. Content-Distribution Shorthand: the <a class="property css" data-link-type="property" href="#propdef-place-content" id="ref-for-propdef-place-content①">place-content</a> property<a class="self-link" href="#place-content"></a></h3> <table class="def propdef" data-link-for-hint="place-content"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-content">place-content</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-align-content" id="ref-for-propdef-align-content①⑥"><'align-content'></a> <a class="production css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑥"><'justify-content'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>block containers, flex containers, and grid containers <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>see individual properties <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> This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> sets both the <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⑦">align-content</a> and <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑦">justify-content</a> properties in one declaration. The first value is assigned to align-content. The second value is assigned to justify-content; if omitted, it is copied from the first value, unless that value is a <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position②"><baseline-position></a> in which case it is defaulted to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑤">start</a>. <h3 class="heading settled" data-level="5.3" id="overflow-scroll-position">5.3. Overflow and Scroll Positions<a class="self-link" href="#overflow-scroll-position"></a></h3> When the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties⑥">content-distribution properties</a> are set on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a> with an overflowing <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑨">alignment subject</a>, rather than shifting the layout positions of its content, they instead change its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position">initial scroll position</a> so that the initially-visible content of the scroll container satisfies the <a href="#alignment-values">expected alignment</a> of the alignment subject and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑤">alignment container</a>. However, the <a href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target-with-place-content">scroll-initial-target</a> property, when present, overrides the content-distribution properties in determining the initial scroll position. Note: The presence of scrollbars can change the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑤">scroll container’s</a> content box, and thus the size of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑥">alignment container</a> and/or <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥①">alignment subject</a>. <div class="example" id="example-aa19f42a"><a class="self-link" href="#example-aa19f42a"></a> For example, if a scrollable flex container is set to <a class="css" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑨">justify-content: flex-end</a> (or justify-content: flex-start with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow" id="ref-for-propdef-flex-flow">flex-flow: row-reverse</a>), it will be initially displayed scrolled all the way to the main-end edge of its content, and its content will appear to overflow its main-start edge. </div> <figure> <img height="404" src="images/scroll-align-padding.jpg" width="658"> <figcaption> Issue: Replace this image with a proper SVG. </figcaption> </figure> None of this changes how scroll coordinates are assigned: the origin is still where it would be in a <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑥">start</a>-aligned container, it just might be initially positioned outside the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>. Note: The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥②">alignment subject</a> is not necessarily identical to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region②">scrollable overflow area</a>: content overflowing the alignment subject, such as an absolutely-positioned or out-of-flow element, grows the scrollable overflow area but not the alignment subject, thus an <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①④">end</a>-aligned <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑥">scroll container</a> might not be initially scrolled all the way to the bottom. <figure> <img alt height="618" src="images/scroll-align-overflow.jpg" width="1034"> <figcaption> Overflow is not part of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑤">alignment subject</a>, even for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑦">scroll container</a>. Replace this image too. </figcaption> </figure> <h3 class="heading settled" data-level="5.4" id="baseline-align-content">5.4. Baseline Content-Alignment<a class="self-link" href="#baseline-align-content"></a></h3> The content of boxes participating in row-like layout contexts (<a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context③">shared alignment contexts</a>) can be baseline-aligned to each other. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="baseline content-alignment|first-baseline content-alignment|last-baseline content-alignment" id="baseline-content-alignment">Baseline content-alignment</dfn> effectively increases the padding on the box to align the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline③">alignment baseline</a> of its contents with that of other baseline-aligned boxes in its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group④">baseline-sharing group</a>. <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment②">Baseline content-alignment</a> can only apply if the <a class="property css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content①⑨">align-content</a> axis is parallel with the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑨">block axis</a> (i.e. it does not apply to “column” <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑨">flex containers</a>); otherwise the <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①④">fallback alignment</a> is used. The set of boxes that participate in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment③">baseline content-alignment</a> depends on the layout model: <dl> <dt>Table Cells: <dd> A (<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced">non-replaced</a>) <a data-link-type="dfn">table cell</a> participates in first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment④">baseline content-alignment</a> in its startmost/endmost row if its inline axis is parallel to that of the table itself and its computed <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="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑥">first baseline</a> (<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline③">last baseline</a>). Note: <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑤">Baseline content-alignment</a> of cells sharing a column is not supported; however this may be added in a future level if there is sufficient demand and implementer interest. <dt>Flex Items: <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced①">non-replaced</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑥">flex item</a> participates in first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑥">baseline content-alignment</a> in its flex line if its computed <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="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑦">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline④">last baseline</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑧">inline axis</a> is parallel to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis④">main axis</a>. <dt>Grid Items: <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced②">non-replaced</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item②">grid item</a> participates in first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑦">baseline content-alignment</a> in its startmost/endmost row or column (whichever is parallel to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑨">inline axis</a>) and if its computed <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="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑧">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑤">last baseline</a>. </dl> Additionally, in order to participate in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑧">baseline content-alignment</a> it must also have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="coordinated-self-alignment-preference">coordinated self-alignment preference</dfn>, to guarantee that the box lines up the relevant edge with other boxes in its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑤">baseline-sharing group</a>. That is, the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start">start</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end">end</a>) <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge">margin edge</a> must be intended to align—and actually align—to the corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#box-box-edge" id="ref-for-box-box-edge">edge</a> of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a> when its <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference②">baseline alignment preference</a> is “first” (“last”). It otherwise takes its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑤">fallback alignment</a>. <details class="note"> <summary>When is a self-alignment preference coordinated?</summary> A box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start①">start</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①">margin edge</a> is aligned to the corresponding edge of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①">containing block</a> and it has a <a data-link-type="dfn" href="#coordinated-self-alignment-preference" id="ref-for-coordinated-self-alignment-preference">coordinated self-alignment preference</a> for a “first” <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference③">baseline alignment preference</a> when, in the relevant axis: <ul> <li data-md> There are no auto <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin" id="ref-for-margin">margins</a> and the relevant <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties④">self-alignment property</a> either is or aligns identically to <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start④">self-start</a>; or <li data-md> There is only an auto <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end①">end</a>-edge <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin" id="ref-for-margin①">margin</a>, which absorbs any positive free space and disables the effects of any <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑤">self-alignment property</a>, and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-box" id="ref-for-margin-box">margin box</a> does not overflow its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block②">containing block</a> under circumstances that would cause it to effectively end-align instead (such as having a containing block with an opposite <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑦">writing mode</a>). </ul> A box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end②">end</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge②">margin edge</a> is aligned to the corresponding edge of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block④">containing block</a> and it has a <a data-link-type="dfn" href="#coordinated-self-alignment-preference" id="ref-for-coordinated-self-alignment-preference①">coordinated self-alignment preference</a> for a “last” <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference④">baseline alignment preference</a> when, in the relevant axis: <ul> <li data-md> There are no auto <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin" id="ref-for-margin②">margins</a> and the relevant <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑥">self-alignment property</a> either is or aligns identically to <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end②">self-end</a> and its self-alignment is what would result from an <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe⑥">unsafe</a> <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment⑤">overflow alignment</a>; or <li data-md> There is only an auto <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start②">start</a>-edge <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin" id="ref-for-margin③">margin</a>, which absorbs any positive free space and disables the effects of any <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑦">self-alignment property</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-box" id="ref-for-margin-box①">margin box</a> does not overflow its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑤">containing block</a> under circumstances that would cause it to effectively start-align instead. </ul> </details> See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for additional details. <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑨">Baseline content-alignment</a> can increase the intrinsic size of the box. <h2 class="heading settled" data-level="6" id="self-alignment">6. Self-Alignment: Aligning the Box Within Its Parent<a class="self-link" href="#self-alignment"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="self-align">Self-alignment</dfn> controls alignment of the box within its containing block. It is specified by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="self-alignment-properties">self-alignment properties</dfn> <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-justify-self" id="ref-for-propdef-justify-self⑦">justify-self</a> (and their <a class="property css" data-link-type="property" href="#propdef-place-self" id="ref-for-propdef-place-self">place-self</a> shorthand). <div class="figure"> <img alt="Diagram showing that the alignment of the element within its containing block is affected." height="212" src="images/self-example.svg" width="212"> </div> <h3 class="heading settled" data-level="6.1" id="justify-self-property">6.1. Inline-Axis (or Main-Axis) Alignment: the <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑧">justify-self</a> property<a class="self-link" href="#justify-self-property"></a></h3> <table class="def propdef" data-link-for-hint="justify-self"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-self">justify-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> normal | stretch | <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position③"><baseline-position></a> | <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑤"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> [ <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position②"><self-position></a> | left | right ] <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>block-level boxes, absolutely-positioned boxes, and grid items <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(s) <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> Justifies the box (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑥">alignment subject</a>) within its containing block (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑦">alignment container</a>) along the inline/row/main axis of the alignment container: the box’s outer edges are aligned within its alignment container <a href="#alignment-values">as described by its alignment value</a>. Values have the following meanings: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-auto">auto</dfn> <dd data-md> Behaves as <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal①">normal</a> if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed <a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items④">justify-items</a> value of the parent box (minus any <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy①">legacy</a> keywords) otherwise (including when determining the static position of an absolutely positioned box). <dt data-md><dfn class="dfn-paneled css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-normal">normal</dfn> <dd data-md> Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-stretch">stretch</dfn> <dd data-md> When the box’s <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-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 to the axis) is <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 its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⓪">alignment container</a> 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. Unless otherwise specified, this value falls back to <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start⑤">flex-start</a> generally, and to <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start⑤">self-start</a> or <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end③">self-end</a> if the box has also specified <a data-link-type="dfn" href="#first-baseline-set" id="ref-for-first-baseline-set①">first baseline</a> or <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set①">last baseline</a> <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①⓪">baseline content-alignment</a> (respectively) in the same axis. Note: The <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch①">stretch</a> keyword can cause elements to shrink, to fit their container. <dt data-md><a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position④"><baseline-position></a> <dd data-md> Indicates <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment④">baseline self-alignment</a>, as defined in <a href="#baseline-values">§ 4.2 Baseline Alignment: the baseline keyword and first/last modifiers</a>, <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>, and <a href="#baseline-rules">§ 9 Baseline Alignment Details</a>. <dt data-md><a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑥"><overflow-position></a>? <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position③"><self-position></a> <dd data-md> Defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above. </dl> Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch②">stretch</a> cause 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> 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> to be treated as <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>. Note: auto margins, because they effectively adjust the size of the margin area, take precedence over <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑨">justify-self</a>. <h4 class="heading settled" data-level="6.1.1" id="justify-block">6.1.1. Block-Level Boxes<a class="self-link" href="#justify-block"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⓪">justify-self</a> Axis <td> The block’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑥">containing block’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①⓪">inline axis</a>, generally. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block">static-position containing block</a>’s inline axis when determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position②">static position</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④①">Alignment Container</a> <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑦">containing block</a>, except that for block-level elements that establish a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a> and are placed next to a float, the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④②">alignment container</a> is reduced by the space taken up by the float, assuming 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> of the containing block. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑦">Alignment Subject</a> <td> The block’s margin box, assuming 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> of the block. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal②">normal</a> Behavior <td> The box lays out according to the default rules for block layout (see <a href="https://drafts.csswg.org/css2//visudet#Computing_widths_and_margins">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification § visudet#Computing_widths_and_margins</a>). <tr> <th>Other Details <td> In terms of CSS2.1 block-level formatting <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">section 10.3.3</a> are ignored in favor of alignment as specified here and the used value of the margin properties are therefore not adjusted to correct for the over-constraint. This property does not apply to floats. </table> <div class="example" id="example-cd8dae8e"><a class="self-link" href="#example-cd8dae8e"></a> The effect of these rules is that an auto-sized block-level table, for example, can be aligned while still having side margins. If the table’s max-content size is narrower than its containing block, then it is shrink-wrapped to that size and aligned as specified. If the table’s max-content size is wider, then it fills its containing block, and the margins provide appropriate spacing from the containing block edges. </div> <h4 class="heading settled" data-level="6.1.2" id="justify-abspos">6.1.2. Absolutely-Positioned Boxes<a class="self-link" href="#justify-abspos"></a></h4> This section describes the effect of <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①①">justify-self</a> on how the margin box of an absolutely-positioned box is positioned with respect to its (absolute-positioning) containing block. <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①②">justify-self</a> Axis <td> The block’s containing block’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①②">inline axis</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④③">Alignment Container</a> <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block⑨">containing block</a>, as modified by the inset properties (<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>/<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>/<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>/<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>), assuming 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> of the containing block. If both inset properties in the relevant axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①">auto</a>, then use the box’s <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle">static-position rectangle</a> (i.e. set both insets to the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position③">static position</a>) and assume the writing mode of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block①">static-position containing block</a>. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑧">Alignment Subject</a> <td> The box’s margin box, assuming 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> of the box. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal③">normal</a> Behavior <td> <ul> <li data-md> For replaced absolutely-positioned boxes, the <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal④">normal</a> keyword behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑦">start</a>. <li data-md> For all other absolutely-positioned boxes, <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑤">normal</a> behaves as stretch. Additionally, if neither inset in this axis is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto②">auto</a>, but <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>, for <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode①">vertical writing modes</a>) is <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>, auto margins are treated as zero. (In non-<a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑥">normal</a> cases, auto margins are prioritized over the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑧">self-alignment properties</a>, as usual.) </ul> Note: This somewhat bizarre behavior is required for compatibility with the behavior specified in CSS 2.1. <tr> <th>Other Details <td> In terms of CSS2.1 formatting <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">section 10.3.7</a> are ignored in favor of alignment as specified here, and the used value of the inset properties are not adjusted to correct for the over-constraint. Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch③">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑦">normal</a> cause <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a> to use <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size">fit-content sizing</a> for calculating <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> sizes in the affected axis. Note that <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch④">stretch</a> does cause replaced absolutely-positioned boxes to fill their containing block just as non-replaced ones do. Note: If only one inset property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto③">auto</a>, the computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2 section 10.3.7</a> fully determine its size and position, and <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①③">justify-self</a> has no effect. (If both are auto, then the box is statically-positioned, see above, and can be aligned within the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①">static-position rectangle</a>.) </table> <h4 class="heading settled" data-level="6.1.3" id="justify-cell">6.1.3. Table Cells<a class="self-link" href="#justify-cell"></a></h4> This property does not apply to table cells, because their position and size is fully constrained by table layout. <h4 class="heading settled" data-level="6.1.4" id="justify-flex">6.1.4. Flex Items<a class="self-link" href="#justify-flex"></a></h4> This property does not apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑦">flex items</a>, because there is more than one item in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis⑤">main axis</a>. See <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex①">flex</a> for stretching and <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content②①">justify-content</a> for main-axis alignment. <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> <h4 class="heading settled" data-level="6.1.5" id="justify-grid">6.1.5. Grid Items<a class="self-link" href="#justify-grid"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①④">justify-self</a> Axis <td> The grid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①③">inline axis</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④④">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item③">grid item’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area">grid area</a>, assuming 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> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid container</a>. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑨">Alignment Subject</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item④">grid item’s</a> margin box, assuming 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> of the grid item. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑧">normal</a> Behavior <td> Sizes as either <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑤">stretch</a> (typical <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced③">non-replaced elements</a>) or <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑧">start</a> (typical <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element">replaced elements</a>); see <a href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">Grid Item Sizing</a> in <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a>. The resulting box is then start-aligned. </table> See <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> for details. <h3 class="heading settled" data-level="6.2" id="align-self-property">6.2. Block-Axis (or Cross-Axis) Alignment: the <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⓪">align-self</a> property<a class="self-link" href="#align-self-property"></a></h3> <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> normal | stretch | <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑤"><baseline-position></a> | <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑦"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position④"><self-position></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>flex items, grid items, and absolutely-positioned boxes <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(s) <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> Aligns the box (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦⓪">alignment subject</a>) within its containing block (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑤">alignment container</a>) along the block/column/cross axis of the alignment container: the box’s outer edges are aligned within its alignment container <a href="#alignment-values">as described by its alignment value</a>. Values have the following meanings: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-auto">auto</dfn> <dd data-md> Behaves as <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal">normal</a> if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed <a class="property css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items②">align-items</a> value of the parent box (minus any <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy②">legacy</a> keywords) otherwise (including when determining the static position of an absolutely positioned box). <dt data-md><dfn class="dfn-paneled css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-normal">normal</dfn> <dd data-md> Represents the “default” alignment for the layout mode, as defined below. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-stretch">stretch</dfn> <dd data-md> As defined for <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑤">justify-self</a> in <a href="#justify-self-property">§ 6.1 Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>. <dt data-md><a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑥"><baseline-position></a> <dd data-md> Indicates <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑤">baseline self-alignment</a>, as defined in <a href="#baseline-values">§ 4.2 Baseline Alignment: the baseline keyword and first/last modifiers</a>, <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>, and <a href="#baseline-rules">§ 9 Baseline Alignment Details</a>. <dt data-md><a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑧"><overflow-position></a>? <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑤"><self-position></a> <dd data-md> Defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above. </dl> Note: auto margins, because they effectively adjust the size of the margin area, take precedence over <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①①">align-self</a>. <h4 class="heading settled" data-level="6.2.1" id="align-block">6.2.1. Block-Level Boxes<a class="self-link" href="#align-block"></a></h4> The <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①②">align-self</a> property does not apply to block-level boxes (including floats), because there is more than one item in 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>. <h4 class="heading settled" data-level="6.2.2" id="align-abspos">6.2.2. Absolutely-Positioned Boxes<a class="self-link" href="#align-abspos"></a></h4> This section describes the effect of <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①③">align-self</a> on how the margin box of an absolutely-positioned box is positioned with respect to its (absolute-positioning) containing block. <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①④">align-self</a> Axis <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①①">containing block’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①①">block axis</a>, generally. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block②">static-position containing block</a>’s block axis when determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position④">static position</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑧">Alignment Container</a> <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①②">containing block</a>, as modified by the inset properties (<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>/<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>/<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>/<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>), assuming 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> of the containing block. If both inset properties in the relevant axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑤">auto</a>, then use the box’s <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle②">static-position rectangle</a> (i.e. set both insets to the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑤">static position</a>) and assume the writing mode of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block③">static-position containing block</a>. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦①">Alignment Subject</a> <td> The box’s margin box, assuming 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> of the box. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal①">normal</a> Behavior <td> <ul> <li data-md> For replaced absolutely-positioned boxes, the <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal②">normal</a> keyword behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑨">start</a>. <li data-md> For all other absolutely-positioned boxes, <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal③">normal</a> behaves as stretch. Additionally, if neither inset in this axis is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑥">auto</a>, but <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>, for <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode②">vertical writing modes</a>) is <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>, auto margins are treated as zero. (In non-<a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal④">normal</a> cases, auto margins are prioritized over the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑨">self-alignment properties</a>, as usual.) </ul> Note: This somewhat bizarre behavior is required for compatibility with the behavior specified in CSS 2.1. <tr> <th>Other Details <td> In terms of CSS2.1 formatting <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, the rules for "over-constrained" computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">section 10.6.4</a> are ignored in favor of alignment as specified here and the used value of the inset properties are not adjusted to correct for the over-constraint. Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑥">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑨">normal</a> cause <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a> to use <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size①">fit-content sizing</a> for calculating <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> sizes in the affected axis. Note that <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑦">stretch</a> does cause replaced absolutely-positioned boxes to fill their containing block just as non-replaced ones do. Note: If only one inset property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑦">auto</a>, the computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">CSS2 section 10.6.4</a> fully determine its size and position, and <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑤">align-self</a> has no effect. (If both are auto, then the box is statically-positioned, see above, and can be aligned within the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle③">static-position rectangle</a>.) </table> <h4 class="heading settled" data-level="6.2.3" id="align-cell">6.2.3. Table Cells<a class="self-link" href="#align-cell"></a></h4> This property does not apply to table cells, because their position and size is fully constrained by table layout. <h4 class="heading settled" data-level="6.2.4" id="align-flex">6.2.4. Flex Items<a class="self-link" href="#align-flex"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑥">align-self</a> Axis <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⓪">flex container’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis③">cross axis</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑨">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line②">flex line</a> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑧">flex item</a> is in, assuming 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> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①①">flex container</a>. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦②">Alignment Subject</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑨">flex item’s</a> margin box, assuming 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> of the flex item. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal⑤">normal</a> Behavior <td> Behaves as <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch①">stretch</a>. </table> See <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> for details. <h4 class="heading settled" data-level="6.2.5" id="align-grid">6.2.5. Grid Items<a class="self-link" href="#align-grid"></a></h4> <table class="data align-details"> <tbody> <tr> <th><a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self①⑦">align-self</a> Axis <td> The grid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①③">block axis</a>. <tr> <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑤⓪">Alignment Container</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑥">grid item’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area①">grid area</a>, assuming 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> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid container</a>. <tr> <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦③">Alignment Subject</a> <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑦">grid item’s</a> margin box, assuming 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> of the grid item. <tr> <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal⑥">normal</a> Behavior <td> Sizes as either <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑧">stretch</a> (typical <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#non-replaced" id="ref-for-non-replaced④">non-replaced elements</a>) or <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start③⓪">start</a> (typical <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element①">replaced elements</a>); see <a href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">Grid Item Sizing</a> in <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a>. The resulting box is then start-aligned. </table> See <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> for details. <h3 class="heading settled" data-level="6.3" id="place-self-property">6.3. Self-Alignment Shorthand: the <a class="property css" data-link-type="property" href="#propdef-place-self" id="ref-for-propdef-place-self①">place-self</a> property<a class="self-link" href="#place-self-property"></a></h3> <table class="def propdef" data-link-for-hint="place-self"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-self">place-self</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-align-self" id="ref-for-propdef-align-self①⑧"><'align-self'></a> <a class="production css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑥"><'justify-self'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</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>block-level boxes, absolutely-positioned boxes, and grid items <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>see individual properties <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> This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand property</a> sets both the <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-justify-self" id="ref-for-propdef-justify-self①⑦">justify-self</a> properties in a single declaration. The first value is assigned to align-self. The second value is assigned to justify-self; if omitted, it is copied from the first value. <h3 class="heading settled" data-level="6.4" id="baseline-align-self">6.4. Baseline Self-Alignment<a class="self-link" href="#baseline-align-self"></a></h3> Boxes participating in row-like layout contexts (<a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context④">shared alignment contexts</a>) can be baseline-aligned to each other. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="baseline self-alignment|first-baseline self-alignment|last-baseline self-alignment" id="baseline-self-alignment">Baseline self-alignment</dfn> effectively increases the margins on the box to align its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline④">alignment baseline</a> with that of other baseline-aligned boxes in its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑥">baseline-sharing group</a>. The set of boxes that participate in <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑥">baseline self-alignment</a> depends on the layout model: <dl> <dt>Flex Items: <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①①">flex item</a> participates in first/last <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑦">baseline self-alignment</a> in its flex line if its computed <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-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑨">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑥">last baseline</a>. See <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> for details. <dt>Grid Items: <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑨">grid item</a> participates in first/last <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑧">baseline self-alignment</a> in its startmost/endmost row or column if its <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="#propdef-justify-self" id="ref-for-propdef-justify-self①⑨">justify-self</a> property (respectively) computes to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①⓪">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑦">last baseline</a>. </dl> See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for exact details. <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑨">Baseline self-alignment</a> can increase the intrinsic size contribution of the box. <h3 class="heading settled" data-level="6.5" id="abspos-sizing">6.5. Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets<a class="self-link" href="#abspos-sizing"></a></h3> For absolutely-positioned boxes whose inline-axis offsets are both <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑨">auto</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> for calculating 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> is also affected by alignment. Note: In <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available①">available space</a> is keyed off of the <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> property of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block④">static-position containing block</a>. (See <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a>.) Fundamentally these rules set one of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①⓪">auto</a> insets (by default, the start-edge inset) to the corresponding edge of the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle④">static-position rectangle</a> and the other to the corresponding edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①④">containing block</a> (i.e. set the inset to zero). Just as the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties①⓪">self-alignment properties</a> replace the containing block’s direction lookup for placement, they also replace this lookup for sizing, as specified here. Thus, when interpreting the rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a>, wherever the <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> property of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block⑤">static-position containing block</a> is referenced, instead reference the value of the <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="#propdef-justify-self" id="ref-for-propdef-justify-self②⓪">justify-self</a> property (whichever is defined to apply to the relevant axis), treating left-equivalent alignment as defined 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> and right-equivalent alignment as defined 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>. Treat <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal①⓪">normal</a> as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start③①">start</a> and any <a data-link-type="dfn" href="#distributed-alignment" id="ref-for-distributed-alignment①">distributed alignment</a> value as its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑥">fallback alignment</a>. In the case of <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center②">center</a> alignment, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available space</a> for the box is double the distance between the center of the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑤">static-position rectangle</a> and the closest edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑥">containing block</a> in the relevant axis. <figure> <img alt="Start alignment sizes into the space between the start edge of the static-position rectangle and the end edge of the containing block. End alignment sizes into the space between the end edge of the static-position rectangle and the start edge of the containing block. Center alignment sizes into the space between the two edges of the static-position rectangle." height="330" src="images/place-content-abspos.svg" width="480"> <figcaption> Instead of always sizing within the available space between 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> <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑥">static position</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑦">containing block</a> edge as specified in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, an absolutely-positioned element with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①①">auto</a> insets will be sized with reference to the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑥">static-position rectangle</a>’s edge(s) most appropriate to its specified <a data-link-type="dfn" href="#self-align" id="ref-for-self-align②">self-alignment</a>. </figcaption> </figure> <div class="example" id="example-d884518f"><a class="self-link" href="#example-d884518f"></a> For example, when the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑧">containing block</a>’s <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> is <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> and its own <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②①">justify-self</a> is <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①⑤">end</a>, apply the rules for direction: rtl; when direction is <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> and <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content②②">justify-content</a> is <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between②">space-between</a>, apply the rules for direction: rtl; etc. For the case of <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center③">center</a> (or its equivalent), set both sides to match the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑦">static position</a>. The absolutely-positioned box is then sized into the resulting space (floored at zero). </div> Note: The <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-justify-self" id="ref-for-propdef-justify-self②②">justify-self</a> properties can also modify additional aspects of sizing: for example, justify-self: stretch will replace “shrink-to-fit” (<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size②">fit-content</a>) sizing into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available③">available space</a> with <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-size" id="ref-for-stretch-fit-size">stretch-fit sizing</a> (consuming all of the available space). This is an independent effect from the available space adjustment here. Note: This only affect how <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑤">available space</a> is calculated for sizing the absolutely-positioned box; its alignment is as specified in previous sections. <h2 class="heading settled" data-level="7" id="default-alignment">7. Default Alignment<a class="self-link" href="#default-alignment"></a></h2> 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-justify-items" id="ref-for-propdef-justify-items⑤">justify-items</a> properties (and their <a class="property css" data-link-type="property" href="#propdef-place-items" id="ref-for-propdef-place-items">place-items</a> shorthand) set the default <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-justify-self" id="ref-for-propdef-justify-self②④">justify-self</a> behavior of the element’s child boxes. <div class="figure"> <img alt="Diagram showing that the alignment of grid items within the element is affected." height="212" src="images/items-example.svg" width="212"> </div> <h3 class="heading settled" data-level="7.1" id="justify-items-property">7.1. Inline-Axis (or Main-Axis) Alignment: the <a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑥">justify-items</a> property<a class="self-link" href="#justify-items-property"></a></h3> <table class="def propdef" data-link-for-hint="justify-items"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-items">justify-items</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> stretch | <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑦"><baseline-position></a> | <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑨"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> [ <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑥"><self-position></a> | left | right ] | legacy | legacy <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> [ left | right | center ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>legacy <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</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(s), except for <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy③">legacy</a> (see prose) <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> This property specifies the default <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⑤">justify-self</a> for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="justify-items" data-dfn-type="value" data-export id="valdef-justify-items-legacy">legacy</dfn> <dd> This keyword causes the value to effectively inherit into descendants. If the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy④">legacy</a> keyword appears on its own (without an accompanying <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑥">left</a>, <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑥">right</a>, or <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center④">center</a> keyword): if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#inherited-value" id="ref-for-inherited-value">inherited value</a> of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal. When justify-self:auto references the value of <a class="property css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑦">justify-items</a>, only the alignment keyword, not the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy⑥">legacy</a> keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <code><center></code> element and <code>align</code> attribute. </dl> Other values have no special handling and are merely referenced by <a class="property css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⑥">justify-self</a>. <h3 class="heading settled" data-level="7.2" id="align-items-property">7.2. Block-Axis (or 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> property<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">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> stretch | <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑧"><baseline-position></a> | [ <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position①⓪"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑦"><self-position></a> ] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</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(s) <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> This property specifies the default <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑥">align-self</a> for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have no special handling and are merely referenced by <a class="property css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑦">align-self</a>. <h3 class="heading settled" data-level="7.3" id="place-items-property">7.3. Self-Alignment Shorthand: the <a class="property css" data-link-type="property" href="#propdef-place-items" id="ref-for-propdef-place-items①">place-items</a> property<a class="self-link" href="#place-items-property"></a></h3> <table class="def propdef" data-link-for-hint="place-items"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-items">place-items</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-align-items" id="ref-for-propdef-align-items⑤"><'align-items'></a> <a class="production css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑧"><'justify-items'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</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><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</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>see individual properties <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> This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property②">shorthand property</a> sets both 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-justify-items" id="ref-for-propdef-justify-items⑨">justify-items</a> properties in a single declaration. The first value is assigned to align-items. The second value is assigned to justify-items; if omitted, it is copied from the first value. <h2 class="heading settled" data-level="8" id="gaps">8. Gaps Between Boxes<a class="self-link" href="#gaps"></a></h2> While <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> can be used to specify visual spacing around individual boxes, it’s sometimes more convenient to globally specify spacing between adjacent boxes within a given layout context, particularly when the spacing is different between boxes as opposed to between the first/last box and the container’s edge. The <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap">gap</a> property, and its <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap">row-gap</a> and <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap">column-gap</a> sub-properties, provide this functionality for <a href="http://www.w3.org/TR/css3-multicol/">multi-column</a>, <a href="http://www.w3.org/TR/css-flexbox/">flex</a>, and <a href="http://www.w3.org/TR/css-grid/">grid layout</a>. <h3 class="heading settled" data-level="8.1" id="column-row-gap">8.1. Row and Column Gutters: the <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap①">row-gap</a> and <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap①">column-gap</a> properties<a class="self-link" href="#column-row-gap"></a></h3> <table class="def propdef" data-link-for-hint="row-gap"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-gap">row-gap</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-gap">column-gap</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">normal <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="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>normal <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid 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>see <a href="#gap-percent">§ 8.3 Percentages In gap Properties</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword, else 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> These properties specify fixed-length <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="gutter" id="gutter">gutters</dfn> between items in the container, adding space between them—in a manner similar to the <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between③">space-between</a> keyword of the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties⑧">content-distribution properties</a>, but of a fixed size instead of as a fraction of remaining space. The <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap②">column-gap</a> property specifies spacing between “columns”, separating boxes in the container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①④">inline axis</a> similar to inline-axis margin; while <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap②">row-gap</a> indicates spacing between “rows”, separating boxes in the container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①④">block axis</a>. Values have the following meanings: <dl> <dt data-md><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 [0,∞]></a> <dd data-md> Specifies a gap between “rows” or “columns”, as defined by the layout modes to which it applies; see subsections below for details. Negative values are invalid. For percentages, see <a href="#gap-percent">§ 8.3 Percentages In gap Properties</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="row-gap, column-gap, gap" data-dfn-type="value" data-export id="valdef-row-gap-normal">normal</dfn> <dd data-md> The <a class="css" data-link-type="maybe" href="#valdef-row-gap-normal" id="ref-for-valdef-row-gap-normal">normal</a> represents a used value of 1em on <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column containers</a>, and a used value of 0px in all other contexts. </dl> Gutters effect a minimum spacing between items: additional spacing may be added by <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-content" id="ref-for-propdef-align-content②③">align-content</a>. Such additional space effectively increases the size of these <a data-link-type="dfn" href="#gutter" id="ref-for-gutter①">gutters</a>. The exact handling of these properties varies by layout container: <dl> <dt id="gap-multicol"><a class="self-link" href="#gap-multicol"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a> <dd> <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap③">column-gap</a> specifies the <a data-link-type="dfn" href="#gutter" id="ref-for-gutter②">gutter</a> between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#column-box" id="ref-for-column-box">column boxes</a>. See <a data-link-type="biblio" href="#biblio-css-multicol-1" title="CSS Multi-column Layout Module Level 1">[CSS-MULTICOL-1]</a> for details on how this affects the layout of multicol elements. <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap③">row-gap</a> is introduced in <a data-link-type="biblio" href="#biblio-css-multicol-2" title="CSS Multi-column Layout Module Level 2">[CSS-MULTICOL-2]</a>. <dt id="gap-flex"><a class="self-link" href="#gap-flex"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①③">flex containers</a> <dd> When applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis⑦">main axis</a> (e.g. <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap④">column-gap</a> in a row <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①④">flex container</a>), indicates minimum spacing between items (as if an additional fixed-size margin were inserted between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①②">flex items</a> in a single line). When applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis④">cross axis</a> (e.g. <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap④">row-gap</a> in a row <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑤">flex container</a>), indicates minimum spacing between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line③">flex lines</a>. <dt id="gap-grid"><a class="self-link" href="#gap-grid"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑦">grid containers</a> <dd> The <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑤">row-gap</a> and <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑤">column-gap</a> properties, when specified on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑧">grid container</a>, define the <a data-link-type="dfn" href="#gutter" id="ref-for-gutter③">gutters</a> between <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-row" id="ref-for-grid-row①">grid rows</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-column" id="ref-for-grid-column①">grid columns</a>, respectively. See <a href="https://drafts.csswg.org/css-grid-1/#gutters"><cite>CSS Grid Layout 1</cite> § 10.1 Gutters: the row-gap, column-gap, and gap properties</a> for precise details. </dl> Note: Table boxes do not use the <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①">gap</a> properties to specify separation between their cells. Instead, they use the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> property, which has slightly different functionality: it inherits, and it also specifies the additional spacing between the outermost cells and the border of the table (similar to <a class="css" data-link-type="maybe" href="#valdef-align-content-space-evenly" id="ref-for-valdef-align-content-space-evenly①">space-evenly</a> rather than <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between④">space-between</a>). <h3 class="heading settled" data-level="8.2" id="gap-shorthand">8.2. Gap Shorthand: the <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap②">gap</a> property<a class="self-link" href="#gap-shorthand"></a></h3> <table class="def propdef" data-link-for-hint="gap"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-gap">gap</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-row-gap" id="ref-for-propdef-row-gap⑥"><'row-gap'></a> <a class="production css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑥"><'column-gap'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</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><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑥">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid 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>refer to corresponding dimension of the content area <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/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> This property is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property③">shorthand</a> that sets <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑦">row-gap</a> and <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑦">column-gap</a> in one declaration. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>. <div class="example" id="example-06510943"> <a class="self-link" href="#example-06510943"></a> <figure> <img alt="A diagram showing how margins and padding add to the visible gutter size" height="616" src="images/gutters-gaps.svg" width="500"> </figure> Note: The <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap③">gap</a> property is only one component of the visible “gutter” or “alley” created between boxes. Margins, padding, or the use of distributed alignment may increase the visible separation between boxes beyond what is specified in gap. </div> <h3 class="heading settled" data-level="8.3" id="gap-percent">8.3. Percentages In <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap⑤">gap</a> Properties<a class="self-link" href="#gap-percent"></a></h3> In general, gaps introduced by the <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap⑥">gap</a> properties are intended to act like an empty item/track/etc with the gap’s size; in other words, an author should be able to reproduce the effects of gap by just inserting additional empty items/tracks/etc into the container. <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap⑧">gap</a> always resolves percentages against the corresponding size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#content-box" id="ref-for-content-box">content box</a> of the element. When this size is definite, the behavior is well-defined and consistent across layout modes. But since different layout modes treat <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size" id="ref-for-cyclic-percentage-size">cyclic percentage sizes</a> for items/tracks/etc differently, gap does as well: <dl> <dt data-md>In Grid Layout <dd data-md> <a href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">As in the min size properties and margins/paddings</a> <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size" id="ref-for-cyclic-percentage-size①">cyclic percentage sizes</a> resolve against zero for determining intrinsic size contributions, but resolve against the box’s content box when laying out the box’s contents. <dt data-md>In Flex Layout <dd data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size" id="ref-for-cyclic-percentage-size②">Cyclic percentage sizes</a> resolve against zero in all cases. </dl> <h3 class="heading settled" data-level="8.4" id="gap-legacy">8.4. Legacy Gap Properties: the <a class="property css" data-link-type="property" href="#propdef-grid-row-gap" id="ref-for-propdef-grid-row-gap">grid-row-gap</a>, <a class="property css" data-link-type="property" href="#propdef-grid-column-gap" id="ref-for-propdef-grid-column-gap">grid-column-gap</a>, and <a class="property css" data-link-type="property" href="#propdef-grid-gap" id="ref-for-propdef-grid-gap">grid-gap</a> properties<a class="self-link" href="#gap-legacy"></a></h3> The Grid Layout module was originally written with its own set of <a data-link-type="dfn" href="#gutter" id="ref-for-gutter④">gutter</a> properties, before all such properties were unified into the existing <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑨">row-gap</a>/<a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑨">column-gap</a> naming. For compatibility with legacy content, these grid-prefixed names must be supported as follows: <ul> <li data-md> <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-row-gap">grid-row-gap</dfn> as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#legacy-name-alias" id="ref-for-legacy-name-alias">legacy name alias</a> of the <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap①⓪">row-gap</a> property <li data-md> <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-column-gap">grid-column-gap</dfn> as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#legacy-name-alias" id="ref-for-legacy-name-alias①">legacy name alias</a> of the <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap①⓪">column-gap</a> property <li data-md> <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-gap">grid-gap</dfn> as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#legacy-name-alias" id="ref-for-legacy-name-alias②">legacy name alias</a> of the <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①⓪">gap</a> property </ul> <h2 class="heading settled" data-level="9" id="baseline-rules">9. Baseline Alignment Details<a class="self-link" href="#baseline-rules"></a></h2> Boxes in a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑦">baseline-sharing group</a> are aligned to each other using their <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑤">alignment baselines</a>. For example, in horizontal writing modes, specifying <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②④">align-content: baseline</a> on table cells in the same row will align the baselines of their <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-3/#first-formatted-line0" id="ref-for-first-formatted-line0">first formatted lines</a>. This section defines exactly how baseline alignment is performed in consideration of the myriad baselines and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②②">writing modes</a> that exist in internationalized modern CSS. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-set">baseline set</dfn> is a set of baselines (alphabetic, central, etc.) associated with a common baseline table. Typically, a typesetting tradition will use only one of these, but different writing systems use different baselines, and mixing writing systems can result in using more than one within a single line. Refer to <a href="https://drafts.csswg.org/css-writing-modes-3/#intro-baselines"><cite>CSS Writing Modes 3</cite> § 4.1 Introduction to Baselines</a> for more information on baselines and writing modes. <h3 class="heading settled" data-level="9.1" id="baseline-export">9.1. Determining the Baselines of a Box<a class="self-link" href="#baseline-export"></a></h3> Each box, for a given axis, has potentially a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="first baseline set|first baselines" id="first-baseline-set">first baseline set</dfn> (and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="last baseline set|last baselines" id="last-baseline-set">last baseline set</dfn>) that nominally corresponds to the <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set">baseline set</a> of the first/last line of text within the box. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-baseline">alignment baseline</dfn>, which is the baseline used to align the box in its <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑤">alignment context</a>, is one of the baselines in its baseline set, usually the dominant baseline associated with the shared alignment context. (See the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline">dominant-baseline</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline">alignment-baseline</a> properties in <a data-link-type="biblio" href="#biblio-css-inline-3" title="CSS Inline Layout Module Level 3">[CSS-INLINE-3]</a>.) The first and last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set②">baseline sets</a> of a box are determined differently based on the layout model, as follows: <dl> <dt>line box <dd> The first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set③">baseline set</a> of a line box is <a data-link-type="dfn" href="#generate-baselines" id="ref-for-generate-baselines">generated</a> from the dominant baseline and the font settings of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a>. <dt>block containers <dd> The first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set④">baseline set</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑥">block container</a> is taken from the first/last in-flow line box in the block container or the first/last in-flow block-level child in the block container that contributes a set of first/last baselines, whichever comes first/last. If there is no such line box or child, then the block container has no baseline set. However, for legacy reasons if its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-baseline-source" id="ref-for-propdef-baseline-source">baseline-source</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-inline-3/#valdef-baseline-source-auto" id="ref-for-valdef-baseline-source-auto">auto</a> (the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#initial-value" id="ref-for-initial-value">initial value</a>) a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level" id="ref-for-inline-level">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑦">block container</a> that is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑧">scroll container</a> always has a <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set②">last baseline set</a>, whose baselines all correspond to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge③">margin edge</a>. <dt>multi-column containers <dd> The first <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set⑥">baseline set</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑤">multi-column container</a> is the first baseline set of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#column" id="ref-for-column">column</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-2/#multi-column-spanner" id="ref-for-multi-column-spanner">multi-column spanner</a> with the highest (<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a>–most) baseline corresponding to the multi-column container’s <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑥">alignment baseline</a>. If there is no such line box or child, then the multi-column container has no first baseline set. The last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set⑨">baseline set</a> is analogous, but uses the last baseline set and lowest (<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end①">block-end</a>–most) baseline. <dt>tables <dd> The first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①①">baseline set</a> of a table box is the first/last baseline set of its first/last row. When finding the first/last baseline set of an inline-block, any baselines contributed by table boxes must be skipped. (This quirk is a legacy behavior from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>.) <dt>table rows <dd> If any cells in the row participate in <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①①">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑧">last baseline</a> alignment along 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>, the first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①③">baseline set</a> of the row is <a data-link-type="dfn" href="#generate-baselines" id="ref-for-generate-baselines①">generated</a> from their shared <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑦">alignment baseline</a> and the row’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-4/#first-available-font" id="ref-for-first-available-font">first available font</a>, after alignment has been performed. Otherwise, the first/last baseline set of the row is <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline">synthesized</a> from the lowest and highest content edges of the cells in the row. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt>flex containers <dd> See <a href="https://www.w3.org/TR/css3-flexbox/#flex-baselines">Flex Baselines</a> in <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>. <dt>grid containers <dd> See <a href="https://www.w3.org/TR/css3-grid-layout/#grid-baselines">Grid Baselines</a> in <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a>. </dl> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="generate|generated" id="generate-baselines">generate baselines</dfn> for a box from a single baseline, use the baseline table from the font settings and <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-4/#first-available-font" id="ref-for-first-available-font①">first available font</a> of that box, and align that baseline set to the given single baseline. If a box that participates in <a data-link-type="dfn" href="#baseline-alignment" id="ref-for-baseline-alignment②">baseline alignment</a> has no <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①⑤">baseline set</a>, then its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑧">alignment baseline</a> is <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline①">synthesized</a> according to 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. To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="synthesize|synthesized" data-lt="synthesize baseline|synthesized baseline" id="synthesize-baseline">synthesize baselines</dfn> from a rectangle (or two parallel lines), synthesize the alphabetic baseline from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under">line-under</a> line, and the central baseline by averaging the positions of the two edges or lines. See <a href="https://drafts.csswg.org/css-inline-3/#baseline-synthesis"><cite>CSS Inline Layout 3</cite> § A Synthesizing Alignment Metrics</a> for rules on synthesizing additional baselines. Note: The edges used to <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline②">synthesize</a> baselines from a box depend on their <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#formatting-context" id="ref-for-formatting-context①">formatting context</a>: inline-level boxes synthesize from their margin edges <a data-link-type="biblio" href="#biblio-css-inline-3" title="CSS Inline Layout Module Level 3">[CSS-INLINE-3]</a>, table cells synthesize from their content edges <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, and grid and flex items synthesize from their border edges <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>. In general, 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> of the box, shape, or other object being aligned is used to determine the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under①">line-under</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-over" id="ref-for-line-over">line-over</a> edges for synthesis. However, when that writing mode’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a> is parallel to the axis of the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑦">alignment context</a>, an axis-compatible writing mode must be assumed: <ul> <li data-md> If the box establishing the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑧">alignment context</a> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction①">block flow direction</a> that is orthogonal to the axis of the alignment context, use its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②⑥">writing mode</a>. <li data-md> Otherwise: <ul> <li data-md> If the box’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②⑦">writing mode</a> is vertical, assume <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>. <li data-md> If the box’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②⑧">writing mode</a> is horizontal, assume <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a> if <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> is <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> and <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> if direction is <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>. </ul> </ul> For the purposes of finding the baselines of a box, it and all its in-flow descendants with a scrolling mechanism (see 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) must be considered as if scrolled to their initial scroll position. Additionally, if the position of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑨">scroll container</a>’s first/last baseline is outside its border edge, that baseline’s position is clamped to the border edge. <h3 class="heading settled" data-level="9.2" id="baseline-terms">9.2. Baseline Alignment Grouping<a class="self-link" href="#baseline-terms"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-sharing-group">baseline-sharing group</dfn> is composed of boxes that participate in baseline alignment together. This is possible only if they both: <ul> <li>Share an <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①⓪">alignment context</a> along an axis perpendicular to the axis they’re being baseline-aligned in. (For example, grid items with <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑧">align-self: baseline</a> are baseline-aligning along the grid’s block axis, and therefore participate with other items in their row.) <li>Have <a data-link-type="dfn" href="#compatible-baseline-alignment-preferences" id="ref-for-compatible-baseline-alignment-preferences">compatible baseline alignment preferences</a> (i.e., the baselines that want to align are on the same side of the alignment context). </ul> Note: Boxes participating in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①①">baseline content-alignment</a> and boxes participating in <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment①⓪">baseline self-alignment</a> can be part of the same <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑧">baseline-sharing group</a>, and can thus align to each other. The difference between the two methods is in where extra space is inserted to perform the alignment (inside or outside the box’s own border). Boxes share an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="shared alignment context|alignment context" id="shared-alignment-context">alignment context</dfn>, along a particular axis, and established by a particular box, when they are: <ul> <li>table cells in the same row, along the table’s row (inline) axis, established by the row box <li>grid items in the same row, along the grid’s row (inline) axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⓪">grid container</a> <li>grid items in the same column, along the grid’s column (block) axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①①">grid container</a> <li>flex items in the same flex line, along the flex container’s main axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑦">flex container</a> </ul> Note: Conceptually, the inline-level boxes in a line box also share a self-alignment context and participate in a baseline-sharing group; however they only baseline-align in response to the <a class="property css" data-link-type="property">vertical-align</a> property, not any of the properties defined in this module. See <a data-link-type="biblio" href="#biblio-css-inline-3" title="CSS Inline Layout Module Level 3">[CSS-INLINE-3]</a>. If a box spans multiple <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①①">shared alignment contexts</a>, then it participates in first/last baseline alignment within its start-most/end-most shared alignment context along that axis. For example, a table cell spanning three rows participates in <a data-link-type="dfn" href="#first-baseline-alignment" id="ref-for-first-baseline-alignment">first-baseline alignment</a> with the table cells in the first row that it spans, or alternatively in <a data-link-type="dfn" href="#last-baseline-alignment" id="ref-for-last-baseline-alignment">last-baseline alignment</a> with the table cells in the last row that it spans. The <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference⑤">baseline alignment preferences</a> of two boxes in a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑨">baseline-sharing group</a> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="compatible baseline alignment preferences" data-noexport id="compatible-baseline-alignment-preferences">compatible</dfn> if they have: <ul> <li data-md> the same <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction②">block flow direction</a> and same <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference⑥">baseline alignment preference</a> <li data-md> opposite <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction③">block flow direction</a> and opposite <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference⑦">baseline alignment preference</a> </ul> <h3 class="heading settled" data-level="9.3" id="align-by-baseline">9.3. Aligning Boxes by Baseline<a class="self-link" href="#align-by-baseline"></a></h3> Given a set of <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦④">alignment subjects</a> and their baselines that all belong to a single <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①⓪">baseline-sharing group</a>, the alignment subjects are baseline-aligned as follows: <ol> <li data-md> Generate the <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①①">baseline-sharing group</a>’s baseline table from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-4/#first-available-font" id="ref-for-first-available-font②">first available font</a> of the group’s <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①③">alignment context</a> and overlay also the mirror of this baseline table by aligning their central baselines. These are the baseline “grids” to which the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦⑥">alignment subjects</a> will align. <li data-md> Align each <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦⑦">alignment subject</a> by its specified <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑨">alignment baseline</a> to the group’s baseline table or its mirror, whichever matches the alignment subject’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-orientation" id="ref-for-line-orientation">line orientation</a>. Unless otherwise specified (e.g. via the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline①">alignment-baseline</a> property), the alignment baseline is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline" id="ref-for-dominant-baseline">dominant baseline</a> of the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①④">alignment context</a>. <li data-md> Position the aligned <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①②">baseline-sharing group</a> within the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑤①">alignment container</a> according to its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑦">fallback alignment</a>. The fallback alignment of a baseline-sharing group is the fallback alignment of its items as resolved to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical-direction" id="ref-for-physical-direction">physical directions</a>. <li data-md> For first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①②">baseline content-alignment</a>, then add the minimum necessary extra space between the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑤②">alignment container’s</a> start/end content edge and the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦⑨">alignment subject’s</a> edge to align the start/end margin edges of all the alignment containers in the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①⑤">alignment context</a> while maintaining baseline alignment within the <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①④">baseline-sharing group</a>. </ol> <h2 class="heading settled" id="staticpos-rect"> Appendix A: Static Position Terminology<a class="self-link" href="#staticpos-rect"></a></h2> When both <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties">inset properties</a> in a given axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①②">auto</a> on an <a href="https://www.w3.org/TR/CSS2/visuren.html#absolutely-positioned">absolutely positioned box</a>, CSS2 uses its <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position⑧">static position</a> to resolve its size and position. See <a href="https://drafts.csswg.org/css2//visudet#abs-non-replaced-width">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification § visudet#abs-non-replaced-width</a>. The <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties②">box alignment properties</a> modify these calculations, just as they do the sizing and positioning calculations in other layout modes. These modifications refer to a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="static-position-rectangle">static-position rectangle</dfn>, whose edges represent the static position of the box from each side of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①⑨">containing block</a>. The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑦">static-position rectangle</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position①⓪">static positions</a> to which it corresponds are defined by the layout model of its “hypothetical box”: <dl> <dt>Block Layout <dd> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position①①">static positions</a> of 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> are defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Chapter 10. The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑧">static-position rectangle</a> is a zero-thickness rectangle spanning between the inline-axis sides of the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block⑥">static-position containing block</a> (see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>); and positioned at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start①">block-start</a> static position (see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">CSS2§10.6.4</a>). <dt>Inline Layout <dd> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position①③">static positions</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level-box" id="ref-for-inline-level-box">inline-level box</a> are defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Chapter 10. The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑨">static-position rectangle</a> is a zero-thickness rectangle spanning between the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-over" id="ref-for-line-over①">line-over</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under②">line-under</a> sides of the <a data-link-type="dfn">line box</a> that would have contained its “hypothetical box” (see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>); and positioned at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start①">inline-start</a> static position. <dt>Flex Layout <dd> The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①⓪">static-position rectangle</a> of the child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑧">flex container</a> corresponds to 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. See <a href="https://drafts.csswg.org/css-flexbox-1/#abspos-items"><cite>CSS Flexbox 1</cite> § 4.1 Absolutely-Positioned Flex Children</a>. <dt>Grid Layout <dd> By default, the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①①">static-position rectangle</a> of the child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①②">grid container</a> corresponds to 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 grid container. However, if that grid container also establishes the box’s actual <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block②⓪">containing block</a>, then the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area②">grid area</a> specified by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-placement-property" id="ref-for-grid-placement-property">grid-placement properties</a> establishes its static-position rectangle instead. See the <a href="https://www.w3.org/TR/css-grid-1/#static-position">static position of a grid container child</a> in <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a>. </dl> <h2 class="heading settled" data-level="10" id="changes">10. Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2023/WD-css-align-3-20230217/">17 February 2023 Working Draft</a> include: <ul> <li>Remove the sentence that states that row-gap does not apply in multicol. Added a statement that row-gap is introduced for multicol in CSS-MULTICOL-2 (<a href="https://github.com/w3c/csswg-drafts/issues/11539#issuecomment-2628431667">Issue 11539</a>) <li>Make all the space-* keywords fallback to <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe⑤">safe</a> overflow. (<a href="https://github.com/w3c/csswg-drafts/issues/10154">Issue 10154</a>) <li>Only apply the special margin-edge baseline rule for <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①⓪">scroll container</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑧">block containers</a> when <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-baseline-source" id="ref-for-propdef-baseline-source①">baseline-source</a> is its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#initial-value" id="ref-for-initial-value①">initial value</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/8214">Issue 8214</a>) <li>Made <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑨">block containers</a> default to <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe⑥">safe</a> alignment. (<a href="https://github.com/w3c/csswg-drafts/issues/8992">Issue 8992</a>) <li>Define the <a class="property css" data-link-type="property" href="#propdef-grid-gap" id="ref-for-propdef-grid-gap①">grid-gap</a> properties as <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> of the <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①①">gap</a> properties. (<a href="https://github.com/w3c/csswg-drafts/issues/8014">Issue 8014</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/">24 December 2021 Working Draft</a> include: <ul> <li>Define the baselines of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑦">multi-column container</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7856">Issue 7856</a>, <a href="https://github.com/w3c/csswg-drafts/issues/7639">Issue 7639</a>) <li>Use 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> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position-containing-block" id="ref-for-static-position-containing-block⑦">static-position containing block</a> when determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#static-position" id="ref-for-static-position①⑤">static position</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7599">Issue 7599</a>, <a href="https://github.com/w3c/csswg-drafts/issues/7612">Issue 7612</a>; <a href="https://github.com/w3c/csswg-drafts/commit/29e253d0344d4a2bec47305a70cbcbfde669af7b">Changes</a>) <li>Remove definition of special behavior for including padding in <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow" id="ref-for-scrollable-overflow">scrollable overflow</a> for non-<a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①②">normal</a> alignments since this is now defined unconditionally in <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/129#issuecomment-1113489051">Issue 129</a>) <li> Minor clarifications: <ul> <li data-md> Define <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment②⓪">fallback alignment</a> of a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①⑤">baseline-sharing group</a> as the shared fallback alignment of its individual items. <li data-md> Annotate <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 definitions using <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>. </ul> </ul> Changes since the <a href="https://www.w3.org/TR/2020/WD-css-align-3-20200421/">21 April 2020 Working Draft</a> include: <ul> <li>Allowed reordering of [ first | last ] and <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline⑤">baseline</a> components of <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑨"><baseline-position></a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5235">Issue 5235</a>) <li>Make <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment②②">fallback alignment</a> of <a class="css" data-link-type="maybe" href="#valdef-align-content-space-around" id="ref-for-valdef-align-content-space-around①">space-around</a> and <a class="css" data-link-type="maybe" href="#valdef-align-content-space-evenly" id="ref-for-valdef-align-content-space-evenly②">space-evenly</a> include <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe⑦">safe</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5088">Issue 5088</a>) <li>Various corrections to normal alignment and percentage gaps to match respective layout specs. <li>Corrections to special legacy handling of the <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set③">last baseline set</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①①">scroll containers</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/3611">Issue 3611</a>) <li>Clarify that a box with no <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①⑥">baseline set</a> synthesizes its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline①①">alignment baseline</a> as needed. (<a href="https://github.com/w3c/csswg-drafts/issues/3611">Issue 3611</a>) <li>Clarified that only non-replaced boxes are affected by <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute④">content distribution</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4545">Issue 4545</a>) <li>Clarified when a box has a <a data-link-type="dfn" href="#coordinated-self-alignment-preference" id="ref-for-coordinated-self-alignment-preference②">coordinated self-alignment preference</a> that enables <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①③">baseline content-alignment</a>, particularly with respect to auto <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin" id="ref-for-margin④">margins</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5923">Issue 5923</a>) <li>Better define how baseline self-alignment and content-alignment interact. (<a href="https://github.com/w3c/csswg-drafts/issues/6389">Issue 6389</a>) <li>Clarify how baseline-sharing groups determine their fallback alignment. (<a href="https://github.com/w3c/csswg-drafts/issues/7645">Issue 7645</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-align-3-20181206/">6 December 2018 Working Draft</a> include: <ul> <li>Improved the center self-alignment of absolutely-positioned elements. <a href="https://github.com/w3c/csswg-drafts/issues/4659">Issue 4659</a> <li>Fixed inconsistent fallback of baseline alignment in mixed writing modes. <a href="https://github.com/w3c/csswg-drafts/issues/3454">Issue 3454</a> <li>Minor editorial fixes and clarifications. </ul> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-align-3-20180830/">30 August 2018 Working Draft</a> consist of some minor clarifications. Changes since the <a href="https://www.w3.org/TR/2018/WD-css-align-3-20180423/">23 April 2018 Working Draft</a> include: <ul> <li>Better definition of how the alignment properties interact with absolutely-positioned boxes with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①③">auto</a> offsets. See <a href="#justify-abspos">§ 6.1.2 Absolutely-Positioned Boxes</a>, <a href="#align-abspos">§ 6.2.2 Absolutely-Positioned Boxes</a>, <a href="#abspos-sizing">§ 6.5 Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>, and <a href="#staticpos-rect">Appendix A: Static Position Terminology</a>. <li>More detailed definition of how the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties⑨">content-distribution properties</a> work on <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="#overflow-scroll-position">§ 5.3 Overflow and Scroll Positions</a>. <li>Noted CSS2’s special rules about the baselines of inline-block <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①③">scroll containers</a>. <li>Defined that percentage gaps compute against zero when calculating intrinsic sizes, and resolve during layout. (<a href="https://github.com/w3c/csswg-drafts/issues/509">Issue 509</a>) <li>Miscellaneous minor clarifications. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170906/">6 September 2017 Working Draft</a> include: <ul> <li>Added more illustrations! Many thanks to Melanie Richards for working through a difficult diagramming problem. <li>Fixed errors in property definition table of <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①②">gap</a> shorthand. <li>Defining percentage gaps to resolve to zero when the containing block’s size depends on the gaps. (<a href="https://github.com/w3c/csswg-drafts/issues/509">Issue 509</a>, <a href="https://github.com/w3c/csswg-drafts/issues/2297">Issue 2297</a>) <li>Fixed errors in handling left and right in the grammars. <li>Fixed discrepancy in space-align fallback alignment. (<a href="https://github.com/w3c/csswg-drafts/issues/2316">Issue 2316</a>) <li>Tightened up handling of baseline alignment in cases where the box edges don’t align. (<a href="https://github.com/w3c/csswg-drafts/issues/1556">Issue 1556</a>, <a href="https://github.com/w3c/csswg-drafts/issues/1611">Issue 1611</a>) <li>Miscellaneous clarifications. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170720/#changes">20 July 2017 Working Draft</a> include: <ul> <li>Added the <a class="property css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap①①">row-gap</a> and <a class="property css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap①①">column-gap</a> properties and <a class="property css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①③">gap</a> shorthand, applying them to both <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-layout" id="ref-for-grid-layout">grid layout</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-layout" id="ref-for-flex-layout">flex layout</a> to replace the grid-specific <a class="property css" data-link-type="property" href="#propdef-grid-row-gap" id="ref-for-propdef-grid-row-gap①">grid-row-gap</a>/<a class="property css" data-link-type="property" href="#propdef-grid-column-gap" id="ref-for-propdef-grid-column-gap①">grid-column-gap</a>/<a class="property css" data-link-type="property" href="#propdef-grid-gap" id="ref-for-propdef-grid-gap②">grid-gap</a> properties. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170515/">15 May 2017 Working Draft</a> include: <ul> <li>Dropped the <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑦">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑦">right</a> keywords from <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>. They may be re-introduced in a later level if there is demand. (<a href="https://github.com/w3c/csswg-drafts/issues/1403">Issue 1403</a>) <li>Assigned <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①⑥">end</a> fallback alignment to <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch②">stretch</a> cases when combined with <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑨">last baseline</a> content-alignment. <li>Disabled baseline alignment across cells in a table column, due to implementation complexity. <li>A large number of minor corrections and clarifications <a href="https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+label%3Acss-align-3+author%3Adbaron">reported by David Baron</a>. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170407/">7 April 2017 Working Draft</a> include: <ul> <li>Adding a section to clarify handling of partial implementations. (<a href="https://github.com/w3c/csswg-drafts/issues/1167">Issue 1167</a>) <li>Dropped <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position①⓪"><baseline-position></a> value of <a class="property css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content②④">justify-content</a> since it can’t do anything anyway. (<a href="https://github.com/w3c/csswg-drafts/issues/1184">Issue 1184</a>) <li>Deferred ability to specify fallback alignments to Level 4. (<a href="https://github.com/w3c/csswg-drafts/issues/1002#issuecomment-295143297">Issue 1002</a>) <li>Fixed position of <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position①①"><overflow-position></a> wrt <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position④"><content-position></a>. (<a href="https://github.com/w3c/csswg-drafts/issues/1001">Issue 1001</a>) <li>Fixed rules for handling baseline-aligned boxes being aligned along their block axis. (<a href="https://github.com/w3c/csswg-drafts/issues/1038">Issue 1038</a>) <li>Renamed <a class="css" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items①①">justify-items: auto</a> to justify-items: legacy. (<a href="https://github.com/w3c/csswg-drafts/issues/1318">Issue 1318</a>) <li>Clamped baselines of scrollable boxes to the border edge, rather than margin edge. (<a href="https://github.com/w3c/csswg-drafts/issues/766">Issue 766</a>) </ul> <h2 class="heading settled" data-level="11" id="privacy">11. Privacy Considerations<a class="self-link" href="#privacy"></a></h2> As a simple layout spec, this introduces no new privacy considerations. <h2 class="heading settled" data-level="12" id="security">12. Security Considerations<a class="self-link" href="#security"></a></h2> As a simple layout spec, this introduces no new security considerations. <h2 class="no-num heading settled" id="acknowledgments"> Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> Special thanks goes to David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky, and the participants in the CSSWG’s March 2008 F2F alignment discussions for their contributions to the alignment model described herein, and to Melanie Richards for her illustrations of the various <a href="#alignment-values">alignment keywords</a>. </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 § 5.1 <li><a href="#propdef-align-items">align-items</a>, in § 7.2 <li><a href="#alignment-baseline">alignment baseline</a>, in § 9.1 <li><a href="#alignment-container">alignment container</a>, in § 3 <li><a href="#shared-alignment-context">alignment context</a>, in § 9.2 <li><a href="#alignment-subject">alignment subject</a>, in § 3 <li><a href="#propdef-align-self">align-self</a>, in § 6.2 <li> auto <ul> <li><a href="#valdef-align-self-auto">value for align-self</a>, in § 6.2 <li><a href="#valdef-justify-self-auto">value for justify-self</a>, in § 6.1 </ul> <li><a href="#valdef-justify-self-baseline">baseline</a>, in § 4.2 <li><a href="#baseline-alignment">Baseline alignment</a>, in § 4.2 <li><a href="#baseline-alignment-preference">baseline alignment preference</a>, in § 4.2 <li><a href="#baseline-content-alignment">baseline content-alignment</a>, in § 5.4 <li><a href="#typedef-baseline-position"><baseline-position></a>, in § 4.2 <li><a href="#baseline-self-alignment">baseline self-alignment</a>, in § 6.4 <li><a href="#baseline-set">baseline set</a>, in § 9 <li><a href="#baseline-sharing-group">baseline-sharing group</a>, in § 9.2 <li><a href="#box-alignment-properties">box alignment properties</a>, in § 2 <li><a href="#valdef-self-position-center">center</a>, in § 4.1 <li><a href="#propdef-column-gap">column-gap</a>, in § 8.1 <li><a href="#compatible-baseline-alignment-preferences">compatible baseline alignment preferences</a>, in § 9.2 <li><a href="#typedef-content-distribution"><content-distribution></a>, in § 4.3 <li><a href="#content-distribute">content distribution</a>, in § 5 <li><a href="#content-distribute">content-distribution</a>, in § 5 <li><a href="#content-distribution-properties">content-distribution properties</a>, in § 5 <li><a href="#typedef-content-position"><content-position></a>, in § 4.1 <li><a href="#coordinated-self-alignment-preference">coordinated self-alignment preference</a>, in § 5.4 <li><a href="#distributed-alignment">distributed alignment</a>, in § 4.3 <li><a href="#valdef-self-position-end">end</a>, in § 4.1 <li><a href="#fallback-alignment">fallback alignment</a>, in § 3 <li><a href="#valdef-justify-self-first-baseline">first</a>, in § 4.2 <li><a href="#valdef-justify-self-first-baseline">first baseline</a>, in § 4.2 <li><a href="#first-baseline-alignment">first-baseline alignment</a>, in § 4.2 <li><a href="#baseline-content-alignment">first-baseline content-alignment</a>, in § 5.4 <li><a href="#first-baseline-set">first baselines</a>, in § 9.1 <li><a href="#baseline-self-alignment">first-baseline self-alignment</a>, in § 6.4 <li><a href="#first-baseline-set">first baseline set</a>, in § 9.1 <li><a href="#valdef-self-position-flex-end">flex-end</a>, in § 4.1 <li><a href="#valdef-self-position-flex-start">flex-start</a>, in § 4.1 <li><a href="#propdef-gap">gap</a>, in § 8.2 <li><a href="#generate-baselines">generate</a>, in § 9.1 <li><a href="#generate-baselines">generate baselines</a>, in § 9.1 <li><a href="#generate-baselines">generated</a>, in § 9.1 <li><a href="#propdef-grid-column-gap">grid-column-gap</a>, in § 8.4 <li><a href="#propdef-grid-gap">grid-gap</a>, in § 8.4 <li><a href="#propdef-grid-row-gap">grid-row-gap</a>, in § 8.4 <li><a href="#gutter">gutter</a>, in § 8.1 <li><a href="#propdef-justify-content">justify-content</a>, in § 5.1 <li><a href="#propdef-justify-items">justify-items</a>, in § 7.1 <li><a href="#propdef-justify-self">justify-self</a>, in § 6.1 <li><a href="#valdef-justify-self-last-baseline">last</a>, in § 4.2 <li><a href="#valdef-justify-self-last-baseline">last baseline</a>, in § 4.2 <li><a href="#last-baseline-alignment">last-baseline alignment</a>, in § 4.2 <li><a href="#baseline-content-alignment">last-baseline content-alignment</a>, in § 5.4 <li><a href="#last-baseline-set">last baselines</a>, in § 9.1 <li><a href="#baseline-self-alignment">last-baseline self-alignment</a>, in § 6.4 <li><a href="#last-baseline-set">last baseline set</a>, in § 9.1 <li><a href="#valdef-justify-content-left">left</a>, in § 4.1 <li><a href="#valdef-justify-items-legacy">legacy</a>, in § 7.1 <li> normal <ul> <li><a href="#valdef-align-self-normal">value for align-self</a>, in § 6.2 <li><a href="#valdef-justify-content-normal">value for justify-content, align-content</a>, in § 5.1 <li><a href="#valdef-justify-self-normal">value for justify-self</a>, in § 6.1 <li><a href="#valdef-row-gap-normal">value for row-gap, column-gap, gap</a>, in § 8.1 </ul> <li><a href="#overflow-alignment">overflow alignment</a>, in § 4.4 <li><a href="#typedef-overflow-position"><overflow-position></a>, in § 4.4 <li><a href="#propdef-place-content">place-content</a>, in § 5.2 <li><a href="#propdef-place-items">place-items</a>, in § 7.3 <li><a href="#propdef-place-self">place-self</a>, in § 6.3 <li><a href="#positional-alignment">positional alignment</a>, in § 4.1 <li><a href="#valdef-justify-content-right">right</a>, in § 4.1 <li><a href="#propdef-row-gap">row-gap</a>, in § 8.1 <li><a href="#valdef-overflow-position-safe">safe</a>, in § 4.4 <li><a href="#self-align">Self-alignment</a>, in § 6 <li><a href="#self-alignment-properties">self-alignment properties</a>, in § 6 <li><a href="#valdef-self-position-self-end">self-end</a>, in § 4.1 <li><a href="#typedef-self-position"><self-position></a>, in § 4.1 <li><a href="#valdef-self-position-self-start">self-start</a>, in § 4.1 <li><a href="#shared-alignment-context">shared alignment context</a>, in § 9.2 <li><a href="#valdef-align-content-space-around">space-around</a>, in § 4.3 <li><a href="#valdef-align-content-space-between">space-between</a>, in § 4.3 <li><a href="#valdef-align-content-space-evenly">space-evenly</a>, in § 4.3 <li><a href="#valdef-self-position-start">start</a>, in § 4.1 <li><a href="#static-position-rectangle">static-position rectangle</a>, in § Unnumbered section <li> stretch <ul> <li><a href="#valdef-align-content-stretch">value for align-content, justify-content, <content-distribution></a>, in § 4.3 <li><a href="#valdef-align-self-stretch">value for align-self</a>, in § 6.2 <li><a href="#valdef-justify-self-stretch">value for justify-self</a>, in § 6.1 </ul> <li><a href="#synthesize-baseline">synthesize</a>, in § 9.1 <li><a href="#synthesize-baseline">synthesize baseline</a>, in § 9.1 <li><a href="#synthesize-baseline">synthesized</a>, in § 9.1 <li><a href="#synthesize-baseline">synthesized baseline</a>, in § 9.1 <li><a href="#valdef-overflow-position-unsafe">unsafe</a>, in § 4.4 </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-BOX-4]</a> defines the following terms: <ul> <li>box edge <li>content box <li>content edge <li>margin <li>margin box <li>margin edge <li>padding </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>inherited value <li>initial value <li>legacy name alias <li>shorthand <li>shorthand property <li>used value </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>display </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>block container <li>block formatting context <li>block-level <li>block-level box <li>containing block <li>establish an independent formatting context <li>formatting context <li>inline-block <li>inline-level <li>inline-level box <li>inline-table <li>non-replaced <li>non-replaced element <li>replaced element </ul> <li> <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms: <ul> <li>column <li>column-reverse <li>cross axis <li>flex <li>flex container <li>flex formatting context <li>flex item <li>flex layout <li>flex line <li>flex-direction <li>flex-flow <li>main axis <li>main-axis <li>multi-line flex container <li>row <li>row-reverse </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>first available font </ul> <li> <a data-link-type="biblio">[CSS-GRID-1]</a> defines the following terms: <ul> <li>collapsed gutter </ul> <li> <a data-link-type="biblio">[CSS-GRID-2]</a> defines the following terms: <ul> <li>grid area <li>grid column <li>grid container <li>grid item <li>grid layout <li>grid row <li>grid track <li>grid-placement property </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>alignment-baseline <li>auto <li>baseline-source <li>bottom <li>dominant-baseline <li>middle <li>root inline box <li>top </ul> <li> <a data-link-type="biblio">[CSS-LOGICAL-1]</a> defines the following terms: <ul> <li>inset properties </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-1]</a> defines the following terms: <ul> <li>column box <li>multi-column container </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-2]</a> defines the following terms: <ul> <li>auto <li>column-width <li>multi-column spanner </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>initial scroll position <li>overflow <li>scroll container <li>scrollable overflow <li>scrollable overflow area <li>scrollport </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>absolutely position <li>absolutely-positioned <li>auto <li>bottom <li>inset-modified containing block <li>left <li>original containing block <li>right <li>static position <li>static-position containing block <li>top </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>available space <li>cyclic percentage size <li>fit-content size <li>height <li>stretch-fit size <li>width </ul> <li> <a data-link-type="biblio">[CSS-SIZING-4]</a> defines the following terms: <ul> <li>fit-content </ul> <li> <a data-link-type="biblio">[CSS-TABLES-3]</a> defines the following terms: <ul> <li>border-spacing <li>columns </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>&& <li><length-percentage> <li>? <li>CSS bracketed range notation <li>CSS-wide keywords <li>| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction <li>dominant baseline <li>end <li>start </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>block flow direction <li>block-end <li>block-start <li>flow-relative <li>horizontal-tb <li>inline axis <li>inline size <li>inline-axis <li>inline-end <li>inline-start <li>line orientation <li>line-left <li>line-over <li>line-right <li>line-under <li>ltr <li>physical direction <li>physical left <li>physical right <li>rtl <li>vertical writing mode <li>vertical-lr <li>vertical-rl <li>writing mode </ul> <li> <a data-link-type="biblio">[SELECTORS-3]</a> defines the following terms: <ul> <li>first formatted line </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-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-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-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-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-grid-1">[CSS-GRID-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-grid/"><cite>CSS Grid Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-grid/">https://drafts.csswg.org/css-grid/</a> <dt id="biblio-css-grid-2">[CSS-GRID-2] <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://drafts.csswg.org/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-grid-2/">https://drafts.csswg.org/css-grid-2/</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-logical-1">[CSS-LOGICAL-1] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-logical-1/"><cite>CSS Logical Properties and Values Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1] <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol/"><cite>CSS Multi-column Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-multicol/">https://drafts.csswg.org/css-multicol/</a> <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2] <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol-2/"><cite>CSS Multi-column Layout Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-multicol-2/">https://drafts.csswg.org/css-multicol-2/</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-scroll-snap-2">[CSS-SCROLL-SNAP-2] <dd>Elika Etemad; Tab Atkins Jr.; Adam Argyle. <a href="https://drafts.csswg.org/css-scroll-snap-2/"><cite>CSS Scroll Snap Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-scroll-snap-2/">https://drafts.csswg.org/css-scroll-snap-2/</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-tables-3">[CSS-TABLES-3] <dd>François Remy; Greg Whitworth; David Baron. <a href="https://drafts.csswg.org/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-tables-3/">https://drafts.csswg.org/css-tables-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</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-3">[CSS-WRITING-MODES-3] <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-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-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> <dt id="biblio-selectors-3">[SELECTORS-3] <dd>Tantek Çelik; et al. <a href="https://drafts.csswg.org/selectors-3/"><cite>Selectors Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/selectors-3/">https://drafts.csswg.org/selectors-3/</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-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-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> </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>normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> <td>normal <td>block containers, multicol containers, flex containers, and grid containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) <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>normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] <td>normal <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) <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 | normal | stretch | <baseline-position> | <overflow-position>? <self-position> <td>auto <td>flex items, grid items, and absolutely-positioned boxes <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap①②">column-gap</a> <td>normal | <length-percentage [0,∞]> <td>normal <td>multi-column containers, flex containers, grid containers <td>no <td>see <td>by computed value type <td>per grammar <td>specified keyword, else a computed <length-percentage> value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap①④">gap</a> <td><'row-gap'> <'column-gap'>? <td>see individual properties <td>multi-column containers, flex containers, grid containers <td>no <td>refer to corresponding dimension of the content area <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-justify-content" id="ref-for-propdef-justify-content②⑤">justify-content</a> <td>normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] <td>normal <td>multicol containers, flex containers, and grid containers <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items①③">justify-items</a> <td>normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] <td>legacy <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s), except for legacy (see prose) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⑦">justify-self</a> <td>auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] <td>auto <td>block-level boxes, absolutely-positioned boxes, and grid items <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword(s) <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-content" id="ref-for-propdef-place-content②">place-content</a> <td><'align-content'> <'justify-content'>? <td>normal <td>block containers, flex containers, and grid containers <td>no <td>n/a <td>discrete <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-items" id="ref-for-propdef-place-items②">place-items</a> <td><'align-items'> <'justify-items'>? <td>see individual properties <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-self" id="ref-for-propdef-place-self②">place-self</a> <td><'align-self'> <'justify-self'>? <td>auto <td>block-level boxes, absolutely-positioned boxes, and grid items <td>no <td>n/a <td>discrete <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap①②">row-gap</a> <td>normal | <length-percentage [0,∞]> <td>normal <td>multi-column containers, flex containers, grid containers <td>no <td>see <td>by computed value type <td>per grammar <td>specified keyword, else a computed <length-percentage> value </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"> Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows. <a class="issue-return" href="#issue-bb5da799" title="Jump to section">↵</a></div> <div class="issue">Add example images here. <a class="issue-return" href="#issue-13b9ed6a" title="Jump to section">↵</a></div> <div class="issue"> It may not be Web-compatible to implement the “smart” default behavior (though we hope so, and believe it to be likely), so UAs should pass any feedback on this point to the WG. UAs that have not implemented the “smart” default behavior must behave as <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe">safe</a> for <a class="property css" data-link-type="property" href="#propdef-align-content">align-content</a> on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container">block containers</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe">unsafe</a> otherwise. <a class="issue-return" href="#issue-6c9376ad" title="Jump to section">↵</a></div> <div class="issue"> Replace this image too. <a class="issue-return" href="#issue-f4825563" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="align-justify-content"> <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> <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> <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> </details> <details class="mdn-anno unpositioned" data-anno-for="align-self-property"> <summary>✔MDN</summary> <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="column-row-gap"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap" title="The column-gap CSS property sets the size of the gap (gutter) between an element's columns.">column-gap</a> In all current engines. <div class="support"> Firefox1.5+Safari3+Chrome1+ <hr> Opera11.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile11.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap" title="The row-gap CSS property sets the size of the gap (gutter) between an element's rows.">row-gap</a> In all current engines. <div class="support"> Firefox52+Safari10.1+Chrome47+ <hr> Opera?Edge79+ <hr> Edge (Legacy)16+IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="gap-shorthand"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap" title="The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.">gap</a> In all current engines. <div class="support"> Firefox52+Safari10.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)16+IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="justify-items-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items" title="The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.">justify-items</a> In all current engines. <div class="support"> Firefox20+Safari9+Chrome52+ <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> <details class="mdn-anno unpositioned" data-anno-for="justify-self-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self" title="The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.">justify-self</a> In all current engines. <div class="support"> Firefox45+Safari10.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)16+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet6.0+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="place-content"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-content" title="The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.">place-content</a> In all current engines. <div class="support"> Firefox45+Safari9+Chrome59+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="place-items-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-items" title="The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.">place-items</a> In all current engines. <div class="support"> Firefox45+Safari11+Chrome59+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="place-self-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self" title="The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.">place-self</a> In all current engines. <div class="support"> Firefox45+Safari11+Chrome59+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </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 = { "00439ff7": {"dfnID":"00439ff7","dfnText":"flex line","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-line"},{"id":"ref-for-flex-line\u2460"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-flex-line\u2461"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-flex-line\u2462"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-line"}, "017da30a": {"dfnID":"017da30a","dfnText":"grid column","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-column"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-grid-column\u2460"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-column"}, "047bda42": {"dfnID":"047bda42","dfnText":"inset-modified containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-inset-modified-containing-block"},{"id":"ref-for-inset-modified-containing-block\u2460"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#inset-modified-containing-block"}, "06bc643d": {"dfnID":"06bc643d","dfnText":"rtl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-rtl"},{"id":"ref-for-valdef-direction-rtl\u2460"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-direction-rtl\u2461"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl"}, "09e4de67": {"dfnID":"09e4de67","dfnText":"vertical writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-vertical-writing-mode"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-vertical-writing-mode\u2460"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-vertical-writing-mode\u2461"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode"}, "0bc73d68": {"dfnID":"0bc73d68","dfnText":"formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-formatting-context"},{"id":"ref-for-formatting-context\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-display-4/#formatting-context"}, "0e5cedd7": {"dfnID":"0e5cedd7","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"},{"id":"ref-for-valdef-width-auto\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-valdef-width-auto\u2461"},{"id":"ref-for-valdef-width-auto\u2462"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-width-auto\u2463"},{"id":"ref-for-valdef-width-auto\u2464"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "0e9419b9": {"dfnID":"0e9419b9","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"}],"url":"https://drafts.csswg.org/css-display-3/#propdef-display"}, "1044d688": {"dfnID":"1044d688","dfnText":"grid item","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-item"},{"id":"ref-for-grid-item\u2460"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-grid-item\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-grid-item\u2462"},{"id":"ref-for-grid-item\u2463"},{"id":"ref-for-grid-item\u2464"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-grid-item\u2465"},{"id":"ref-for-grid-item\u2466"},{"id":"ref-for-grid-item\u2467"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-grid-item\u2468"}],"title":"6.4. \nBaseline Self-Alignment"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-item"}, "1137b338": {"dfnID":"1137b338","dfnText":"physical direction","external":true,"refSections":[{"refs":[{"id":"ref-for-physical-direction"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#physical-direction"}, "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"},{"id":"ref-for-available\u2463"},{"id":"ref-for-available\u2464"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"https://drafts.csswg.org/css-sizing-3/#available"}, "1370dad0": {"dfnID":"1370dad0","dfnText":"block-start","external":true,"refSections":[{"refs":[{"id":"ref-for-block-start"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-block-start\u2460"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-start"}, "14fe327c": {"dfnID":"14fe327c","dfnText":"absolutely-positioned","external":true,"refSections":[{"refs":[{"id":"ref-for-absolute-position"},{"id":"ref-for-absolute-position\u2460"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#absolute-position"}, "154375a0": {"dfnID":"154375a0","dfnText":"margin box","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-box"},{"id":"ref-for-margin-box\u2460"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"https://drafts.csswg.org/css-box-4/#margin-box"}, "16b64b43": {"dfnID":"16b64b43","dfnText":"vertical-rl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"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"},{"id":"ref-for-typedef-length-percentage\u2460"},{"id":"ref-for-typedef-length-percentage\u2461"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2462"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "1880be96": {"dfnID":"1880be96","dfnText":"initial scroll position","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-scroll-position"},{"id":"ref-for-initial-scroll-position\u2460"}],"title":"5.3. \nOverflow and Scroll Positions"}],"url":"https://drafts.csswg.org/css-overflow-3/#initial-scroll-position"}, "1907ed1c": {"dfnID":"1907ed1c","dfnText":"first formatted line","external":true,"refSections":[{"refs":[{"id":"ref-for-first-formatted-line0"}],"title":"9. \nBaseline Alignment Details"}],"url":"https://drafts.csswg.org/selectors-3/#first-formatted-line0"}, "1adf69d9": {"dfnID":"1adf69d9","dfnText":"grid row","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-row"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-grid-row\u2460"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-row"}, "24285d87": {"dfnID":"24285d87","dfnText":"flex container","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-container"},{"id":"ref-for-flex-container\u2460"}],"title":"2. \nOverview of Alignment Properties"},{"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"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-flex-container\u2467"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-flex-container\u2468"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-flex-container\u2460\u24ea"},{"id":"ref-for-flex-container\u2460\u2460"}],"title":"6.2.4. Flex 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"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-flex-container\u2460\u2465"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-flex-container\u2460\u2466"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-flex-container\u2460\u2467"},{"id":"ref-for-flex-container\u2460\u2468"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "26cb32e2": {"dfnID":"26cb32e2","dfnText":"main-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-main-axis"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-main-axis\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-main-axis\u2461"},{"id":"ref-for-main-axis\u2462"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-main-axis\u2463"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-main-axis\u2464"},{"id":"ref-for-main-axis\u2465"}],"title":"6.1.4. Flex Items"},{"refs":[{"id":"ref-for-main-axis\u2466"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-flexbox-1/#main-axis"}, "2e45f1bb": {"dfnID":"2e45f1bb","dfnText":"line-left","external":true,"refSections":[{"refs":[{"id":"ref-for-line-left"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-left"}, "3484b110": {"dfnID":"3484b110","dfnText":"collapsed gutter","external":true,"refSections":[{"refs":[{"id":"ref-for-collapsed-gutter"}],"title":"5.1.4. Grid Containers"}],"url":"https://drafts.csswg.org/css-grid-1/#collapsed-gutter"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.2. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "37c3d179": {"dfnID":"37c3d179","dfnText":"block-end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"},{"id":"ref-for-block-end\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"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":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-size"}, "3a74ed0c": {"dfnID":"3a74ed0c","dfnText":"flex-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-flow"}],"title":"5.3. \nOverflow and Scroll Positions"}],"url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow"}, "3f92298d": {"dfnID":"3f92298d","dfnText":"stretch-fit size","external":true,"refSections":[{"refs":[{"id":"ref-for-stretch-fit-size"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"https://drafts.csswg.org/css-sizing-3/#stretch-fit-size"}, "4225558e": {"dfnID":"4225558e","dfnText":"inline-table","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-table"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-table"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "43667deb": {"dfnID":"43667deb","dfnText":"inline axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-inline-axis\u2460"},{"id":"ref-for-inline-axis\u2461"},{"id":"ref-for-inline-axis\u2462"},{"id":"ref-for-inline-axis\u2463"},{"id":"ref-for-inline-axis\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-inline-axis\u2465"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-inline-axis\u2466"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-inline-axis\u2467"},{"id":"ref-for-inline-axis\u2468"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-inline-axis\u2460\u24ea"},{"id":"ref-for-inline-axis\u2460\u2460"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2461"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2462"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2463"},{"id":"ref-for-inline-axis\u2460\u2464"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2465"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"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":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-inline-start\u2460"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "466e1435": {"dfnID":"466e1435","dfnText":"static-position containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-static-position-containing-block"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-static-position-containing-block\u2460"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position-containing-block\u2461"},{"id":"ref-for-static-position-containing-block\u2462"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position-containing-block\u2463"},{"id":"ref-for-static-position-containing-block\u2464"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-static-position-containing-block\u2465"}],"title":"\nAppendix A: Static Position Terminology"},{"refs":[{"id":"ref-for-static-position-containing-block\u2466"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-position-3/#static-position-containing-block"}, "46c6a718": {"dfnID":"46c6a718","dfnText":"content box","external":true,"refSections":[{"refs":[{"id":"ref-for-content-box"}],"title":"8.3. \nPercentages In gap Properties"}],"url":"https://drafts.csswg.org/css-box-4/#content-box"}, "48594205": {"dfnID":"48594205","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-css-start"},{"id":"ref-for-css-start\u2460"},{"id":"ref-for-css-start\u2461"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-start"}, "4dd1920b": {"dfnID":"4dd1920b","dfnText":"line-over","external":true,"refSections":[{"refs":[{"id":"ref-for-line-over"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-line-over\u2460"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-over"}, "51fe9b84": {"dfnID":"51fe9b84","dfnText":"absolutely position","external":true,"refSections":[{"refs":[{"id":"ref-for-absolute-position"},{"id":"ref-for-absolute-position\u2460"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#absolute-position"}, "521eb6d4": {"dfnID":"521eb6d4","dfnText":"multi-column container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-multi-column-container\u2460"},{"id":"ref-for-multi-column-container\u2461"},{"id":"ref-for-multi-column-container\u2462"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-multi-column-container\u2463"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-multi-column-container\u2464"},{"id":"ref-for-multi-column-container\u2465"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-multi-column-container\u2466"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-multicol-1/#multi-column-container"}, "52465bfd": {"dfnID":"52465bfd","dfnText":"physical right","external":true,"refSections":[{"refs":[{"id":"ref-for-physical-right"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#physical-right"}, "52e0a60b": {"dfnID":"52e0a60b","dfnText":"box edge","external":true,"refSections":[{"refs":[{"id":"ref-for-box-box-edge"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"https://drafts.csswg.org/css-box-4/#box-box-edge"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-mult-opt\u2460"},{"id":"ref-for-mult-opt\u2461"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-mult-opt\u2462"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-mult-opt\u2463"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-mult-opt\u2464"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-mult-opt\u2465"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"},{"refs":[{"id":"ref-for-mult-opt\u2466"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-mult-opt\u2467"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-mult-opt\u2468"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"},{"refs":[{"id":"ref-for-mult-opt\u2460\u24ea"}],"title":"8.2. \nGap Shorthand: the gap property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "54aa64f0": {"dfnID":"54aa64f0","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-margin"},{"id":"ref-for-margin\u2460"},{"id":"ref-for-margin\u2461"},{"id":"ref-for-margin\u2462"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-margin\u2463"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-box-4/#margin"}, "54d48ea2": {"dfnID":"54d48ea2","dfnText":"inline-level box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level-box"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level-box"}, "56177fad": {"dfnID":"56177fad","dfnText":"shorthand","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-shorthand-property\u2460"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"},{"refs":[{"id":"ref-for-shorthand-property\u2462"}],"title":"8.2. \nGap Shorthand: the gap property"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "571aeab5": {"dfnID":"571aeab5","dfnText":"static position","external":true,"refSections":[{"refs":[{"id":"ref-for-static-position"},{"id":"ref-for-static-position\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-static-position\u2461"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-static-position\u2462"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position\u2463"},{"id":"ref-for-static-position\u2464"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position\u2465"},{"id":"ref-for-static-position\u2466"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-static-position\u2467"},{"id":"ref-for-static-position\u2468"},{"id":"ref-for-static-position\u2460\u24ea"},{"id":"ref-for-static-position\u2460\u2460"},{"id":"ref-for-static-position\u2460\u2461"},{"id":"ref-for-static-position\u2460\u2462"},{"id":"ref-for-static-position\u2460\u2463"}],"title":"\nAppendix A: Static Position Terminology"},{"refs":[{"id":"ref-for-static-position\u2460\u2464"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-position-3/#static-position"}, "5ba66dbd": {"dfnID":"5ba66dbd","dfnText":"line orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-line-orientation"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-orientation"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"},{"id":"ref-for-propdef-direction\u2460"},{"id":"ref-for-propdef-direction\u2461"},{"id":"ref-for-propdef-direction\u2462"},{"id":"ref-for-propdef-direction\u2463"},{"id":"ref-for-propdef-direction\u2464"},{"id":"ref-for-propdef-direction\u2465"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-propdef-direction\u2466"},{"id":"ref-for-propdef-direction\u2467"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5c09e2bb": {"dfnID":"5c09e2bb","dfnText":"middle","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-alignment-baseline-middle"}],"title":"5.1.1. Block Containers (Including Table Cells)"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-middle"}, "5e077028": {"dfnID":"5e077028","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-top"}],"title":"5.1.1. Block Containers (Including Table Cells)"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-top"}, "5eff29c1": {"dfnID":"5eff29c1","dfnText":"flow-relative","external":true,"refSections":[{"refs":[{"id":"ref-for-flow-relative"},{"id":"ref-for-flow-relative\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#flow-relative"}, "60bbf126": {"dfnID":"60bbf126","dfnText":"scrollport","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollport"}],"title":"5.3. \nOverflow and Scroll Positions"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollport"}, "60cfc1bd": {"dfnID":"60cfc1bd","dfnText":"original containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-original-containing-block"},{"id":"ref-for-original-containing-block\u2460"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#original-containing-block"}, "61111288": {"dfnID":"61111288","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-top-auto"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-valdef-top-auto\u2460"},{"id":"ref-for-valdef-top-auto\u2461"},{"id":"ref-for-valdef-top-auto\u2462"},{"id":"ref-for-valdef-top-auto\u2463"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-top-auto\u2464"},{"id":"ref-for-valdef-top-auto\u2465"},{"id":"ref-for-valdef-top-auto\u2466"},{"id":"ref-for-valdef-top-auto\u2467"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-top-auto\u2468"},{"id":"ref-for-valdef-top-auto\u2460\u24ea"},{"id":"ref-for-valdef-top-auto\u2460\u2460"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-top-auto\u2460\u2461"}],"title":"\nAppendix A: Static Position Terminology"},{"refs":[{"id":"ref-for-valdef-top-auto\u2460\u2462"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-top-auto"}, "6256baca": {"dfnID":"6256baca","dfnText":"physical left","external":true,"refSections":[{"refs":[{"id":"ref-for-physical-left"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#physical-left"}, "66c521a7": {"dfnID":"66c521a7","dfnText":"flex item","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-item"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-flex-item\u2460"},{"id":"ref-for-flex-item\u2461"},{"id":"ref-for-flex-item\u2462"},{"id":"ref-for-flex-item\u2463"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-flex-item\u2464"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-flex-item\u2465"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-flex-item\u2466"}],"title":"6.1.4. Flex Items"},{"refs":[{"id":"ref-for-flex-item\u2467"},{"id":"ref-for-flex-item\u2468"},{"id":"ref-for-flex-item\u2460\u24ea"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-flex-item\u2460\u2460"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-flex-item\u2460\u2461"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"},{"id":"ref-for-propdef-height\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-propdef-height\u2461"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-height\u2462"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6882117f": {"dfnID":"6882117f","dfnText":"border-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-spacing"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "698c13e7": {"dfnID":"698c13e7","dfnText":"baseline-source","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-baseline-source"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-propdef-baseline-source\u2460"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-baseline-source"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-comb-one\u2460\u2463"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"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"},{"id":"ref-for-comb-one\u2461\u2460"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"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"},{"id":"ref-for-comb-one\u2461\u2465"},{"id":"ref-for-comb-one\u2461\u2466"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"},{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"},{"id":"ref-for-comb-one\u2462\u2464"},{"id":"ref-for-comb-one\u2462\u2465"},{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"},{"id":"ref-for-comb-one\u2463\u24ea"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2460"},{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2463"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "6f7798a0": {"dfnID":"6f7798a0","dfnText":"root inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-root-inline-box"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "73a16e8f": {"dfnID":"73a16e8f","dfnText":"flex","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flex"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-propdef-flex\u2460"}],"title":"6.1.4. Flex Items"}],"url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex"}, "73a98e20": {"dfnID":"73a98e20","dfnText":"flex layout","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-layout"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-layout"}, "799c2725": {"dfnID":"799c2725","dfnText":"fit-content","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-fit-content"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content"}, "79b8b44f": {"dfnID":"79b8b44f","dfnText":"grid track","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-track"}],"title":"5.1.4. Grid Containers"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-track"}, "7c1974bb": {"dfnID":"7c1974bb","dfnText":"row","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-row"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row"}, "7d5e9700": {"dfnID":"7d5e9700","dfnText":"cyclic percentage size","external":true,"refSections":[{"refs":[{"id":"ref-for-cyclic-percentage-size"},{"id":"ref-for-cyclic-percentage-size\u2460"},{"id":"ref-for-cyclic-percentage-size\u2461"}],"title":"8.3. \nPercentages In gap Properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size"}, "7f0d729a": {"dfnID":"7f0d729a","dfnText":"ltr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-ltr"},{"id":"ref-for-valdef-direction-ltr\u2460"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-direction-ltr\u2461"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"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"},{"id":"ref-for-margin-edge\u2460"},{"id":"ref-for-margin-edge\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-margin-edge\u2462"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-box-4/#margin-edge"}, "80cc929e": {"dfnID":"80cc929e","dfnText":"line-under","external":true,"refSections":[{"refs":[{"id":"ref-for-line-under"},{"id":"ref-for-line-under\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-line-under\u2461"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-under"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "86923d07": {"dfnID":"86923d07","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-scroll-container\u2460"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-scroll-container\u2461"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-scroll-container\u2462"},{"id":"ref-for-scroll-container\u2463"},{"id":"ref-for-scroll-container\u2464"},{"id":"ref-for-scroll-container\u2465"},{"id":"ref-for-scroll-container\u2466"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-scroll-container\u2467"},{"id":"ref-for-scroll-container\u2468"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-scroll-container\u2460\u24ea"},{"id":"ref-for-scroll-container\u2460\u2460"},{"id":"ref-for-scroll-container\u2460\u2461"},{"id":"ref-for-scroll-container\u2460\u2462"}],"title":"10. \nChanges"}],"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":"9.1. \nDetermining the Baselines of a Box"}],"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":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-propdef-width\u2461"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-width\u2462"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "88dd7551": {"dfnID":"88dd7551","dfnText":"block flow direction","external":true,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"},{"id":"ref-for-block-flow-direction\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-block-flow-direction\u2461"},{"id":"ref-for-block-flow-direction\u2462"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "8ca0c013": {"dfnID":"8ca0c013","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-shorthand-property\u2460"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"},{"refs":[{"id":"ref-for-shorthand-property\u2462"}],"title":"8.2. \nGap Shorthand: the gap property"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "8f96f376": {"dfnID":"8f96f376","dfnText":"inline-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-inline-axis\u2460"},{"id":"ref-for-inline-axis\u2461"},{"id":"ref-for-inline-axis\u2462"},{"id":"ref-for-inline-axis\u2463"},{"id":"ref-for-inline-axis\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-inline-axis\u2465"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-inline-axis\u2466"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-inline-axis\u2467"},{"id":"ref-for-inline-axis\u2468"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-inline-axis\u2460\u24ea"},{"id":"ref-for-inline-axis\u2460\u2460"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2461"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2462"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2463"},{"id":"ref-for-inline-axis\u2460\u2464"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-inline-axis\u2460\u2465"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-axis"}, "97c3887e": {"dfnID":"97c3887e","dfnText":"column box","external":true,"refSections":[{"refs":[{"id":"ref-for-column-box"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-multicol-1/#column-box"}, "98a7a50b": {"dfnID":"98a7a50b","dfnText":"multi-column spanner","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-spanner"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-multicol-2/#multi-column-spanner"}, "99a64665": {"dfnID":"99a64665","dfnText":"scrollable overflow area","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow-region"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-scrollable-overflow-region\u2460"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-scrollable-overflow-region\u2461"},{"id":"ref-for-scrollable-overflow-region\u2462"}],"title":"5.3. \nOverflow and Scroll Positions"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region"}, "9c263d15": {"dfnID":"9c263d15","dfnText":"row-reverse","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-row-reverse"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9ea6bed2": {"dfnID":"9ea6bed2","dfnText":"initial value","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-value"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-initial-value\u2460"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-cascade-5/#initial-value"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-block-container\u2461"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-block-container\u2462"},{"id":"ref-for-block-container\u2463"},{"id":"ref-for-block-container\u2464"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-block-container\u2465"},{"id":"ref-for-block-container\u2466"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-block-container\u2467"},{"id":"ref-for-block-container\u2468"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a27e1637": {"dfnID":"a27e1637","dfnText":"grid layout","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-layout"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-layout"}, "a2eb821e": {"dfnID":"a2eb821e","dfnText":"first available font","external":true,"refSections":[{"refs":[{"id":"ref-for-first-available-font"},{"id":"ref-for-first-available-font\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-first-available-font\u2461"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"https://drafts.csswg.org/css-fonts-4/#first-available-font"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a58a3cd8": {"dfnID":"a58a3cd8","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-bottom\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"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"},{"id":"ref-for-writing-mode\u2460"},{"id":"ref-for-writing-mode\u2461"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-writing-mode\u2462"},{"id":"ref-for-writing-mode\u2463"},{"id":"ref-for-writing-mode\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-writing-mode\u2465"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-writing-mode\u2466"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-writing-mode\u2467"},{"id":"ref-for-writing-mode\u2468"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-writing-mode\u2460\u24ea"},{"id":"ref-for-writing-mode\u2460\u2460"},{"id":"ref-for-writing-mode\u2460\u2461"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-writing-mode\u2460\u2462"},{"id":"ref-for-writing-mode\u2460\u2463"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-writing-mode\u2460\u2464"},{"id":"ref-for-writing-mode\u2460\u2465"},{"id":"ref-for-writing-mode\u2460\u2466"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-writing-mode\u2460\u2467"},{"id":"ref-for-writing-mode\u2460\u2468"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-writing-mode\u2461\u24ea"},{"id":"ref-for-writing-mode\u2461\u2460"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-writing-mode\u2461\u2461"}],"title":"9. \nBaseline Alignment Details"},{"refs":[{"id":"ref-for-writing-mode\u2461\u2462"},{"id":"ref-for-writing-mode\u2461\u2463"},{"id":"ref-for-writing-mode\u2461\u2464"},{"id":"ref-for-writing-mode\u2461\u2465"},{"id":"ref-for-writing-mode\u2461\u2466"},{"id":"ref-for-writing-mode\u2461\u2467"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-writing-mode\u2461\u2468"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "a76cd631": {"dfnID":"a76cd631","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-shift-bottom"}],"title":"5.1.1. Block Containers (Including Table Cells)"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-bottom"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-replaced-element\u2460"}],"title":"6.2.5. Grid Items"}],"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"},{"id":"ref-for-legacy-name-alias\u2460"},{"id":"ref-for-legacy-name-alias\u2461"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-legacy-name-alias\u2462"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-cascade-5/#legacy-name-alias"}, "ad47bbf0": {"dfnID":"ad47bbf0","dfnText":"CSS bracketed range notation","external":true,"refSections":[{"refs":[{"id":"ref-for-css-bracketed-range-notation"}],"title":"10. \nChanges"}],"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"},{"id":"ref-for-css-end\u2460"},{"id":"ref-for-css-end\u2461"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-end"}, "af2181ab": {"dfnID":"af2181ab","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-column-width-auto"}],"title":"5.1.2. Multicol Containers"}],"url":"https://drafts.csswg.org/css-multicol-2/#valdef-column-width-auto"}, "alignment-baseline": {"dfnID":"alignment-baseline","dfnText":"alignment baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-alignment-baseline"},{"id":"ref-for-alignment-baseline\u2460"},{"id":"ref-for-alignment-baseline\u2461"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-alignment-baseline\u2462"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-alignment-baseline\u2463"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-alignment-baseline\u2464"}],"title":"9. \nBaseline Alignment Details"},{"refs":[{"id":"ref-for-alignment-baseline\u2465"},{"id":"ref-for-alignment-baseline\u2466"},{"id":"ref-for-alignment-baseline\u2467"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-alignment-baseline\u2468"},{"id":"ref-for-alignment-baseline\u2460\u24ea"}],"title":"9.3. \nAligning Boxes by Baseline"},{"refs":[{"id":"ref-for-alignment-baseline\u2460\u2460"}],"title":"10. \nChanges"}],"url":"#alignment-baseline"}, "alignment-container": {"dfnID":"alignment-container","dfnText":"alignment container","external":false,"refSections":[{"refs":[{"id":"ref-for-alignment-container"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-alignment-container\u2460"}],"title":"4. \nAlignment Keywords"},{"refs":[{"id":"ref-for-alignment-container\u2461"},{"id":"ref-for-alignment-container\u2462"},{"id":"ref-for-alignment-container\u2463"},{"id":"ref-for-alignment-container\u2464"},{"id":"ref-for-alignment-container\u2465"},{"id":"ref-for-alignment-container\u2466"},{"id":"ref-for-alignment-container\u2467"},{"id":"ref-for-alignment-container\u2468"},{"id":"ref-for-alignment-container\u2460\u24ea"},{"id":"ref-for-alignment-container\u2460\u2460"},{"id":"ref-for-alignment-container\u2460\u2461"},{"id":"ref-for-alignment-container\u2460\u2462"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-alignment-container\u2460\u2463"},{"id":"ref-for-alignment-container\u2460\u2464"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-alignment-container\u2460\u2465"},{"id":"ref-for-alignment-container\u2460\u2466"},{"id":"ref-for-alignment-container\u2460\u2467"},{"id":"ref-for-alignment-container\u2460\u2468"},{"id":"ref-for-alignment-container\u2461\u24ea"},{"id":"ref-for-alignment-container\u2461\u2460"},{"id":"ref-for-alignment-container\u2461\u2461"},{"id":"ref-for-alignment-container\u2461\u2462"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-alignment-container\u2461\u2463"},{"id":"ref-for-alignment-container\u2461\u2464"},{"id":"ref-for-alignment-container\u2461\u2465"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-alignment-container\u2461\u2466"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-container\u2461\u2467"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-alignment-container\u2461\u2468"},{"id":"ref-for-alignment-container\u2462\u24ea"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2460"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2461"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2462"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2463"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2464"},{"id":"ref-for-alignment-container\u2462\u2465"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-alignment-container\u2462\u2466"},{"id":"ref-for-alignment-container\u2462\u2467"},{"id":"ref-for-alignment-container\u2462\u2468"},{"id":"ref-for-alignment-container\u2463\u24ea"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2460"},{"id":"ref-for-alignment-container\u2463\u2461"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2462"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2463"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2464"},{"id":"ref-for-alignment-container\u2463\u2465"},{"id":"ref-for-alignment-container\u2463\u2466"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2467"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-container\u2463\u2468"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-alignment-container\u2464\u24ea"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-alignment-container\u2464\u2460"},{"id":"ref-for-alignment-container\u2464\u2461"},{"id":"ref-for-alignment-container\u2464\u2462"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"#alignment-container"}, "alignment-subject": {"dfnID":"alignment-subject","dfnText":"alignment subject","external":false,"refSections":[{"refs":[{"id":"ref-for-alignment-subject"},{"id":"ref-for-alignment-subject\u2460"},{"id":"ref-for-alignment-subject\u2461"},{"id":"ref-for-alignment-subject\u2462"},{"id":"ref-for-alignment-subject\u2463"},{"id":"ref-for-alignment-subject\u2464"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-alignment-subject\u2465"},{"id":"ref-for-alignment-subject\u2466"}],"title":"4. \nAlignment Keywords"},{"refs":[{"id":"ref-for-alignment-subject\u2467"},{"id":"ref-for-alignment-subject\u2468"},{"id":"ref-for-alignment-subject\u2460\u24ea"},{"id":"ref-for-alignment-subject\u2460\u2460"},{"id":"ref-for-alignment-subject\u2460\u2461"},{"id":"ref-for-alignment-subject\u2460\u2462"},{"id":"ref-for-alignment-subject\u2460\u2463"},{"id":"ref-for-alignment-subject\u2460\u2464"},{"id":"ref-for-alignment-subject\u2460\u2465"},{"id":"ref-for-alignment-subject\u2460\u2466"},{"id":"ref-for-alignment-subject\u2460\u2467"},{"id":"ref-for-alignment-subject\u2460\u2468"},{"id":"ref-for-alignment-subject\u2461\u24ea"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-alignment-subject\u2461\u2460"},{"id":"ref-for-alignment-subject\u2461\u2461"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-alignment-subject\u2461\u2462"},{"id":"ref-for-alignment-subject\u2461\u2463"},{"id":"ref-for-alignment-subject\u2461\u2464"},{"id":"ref-for-alignment-subject\u2461\u2465"},{"id":"ref-for-alignment-subject\u2461\u2466"},{"id":"ref-for-alignment-subject\u2461\u2467"},{"id":"ref-for-alignment-subject\u2461\u2468"},{"id":"ref-for-alignment-subject\u2462\u24ea"},{"id":"ref-for-alignment-subject\u2462\u2460"},{"id":"ref-for-alignment-subject\u2462\u2461"},{"id":"ref-for-alignment-subject\u2462\u2462"},{"id":"ref-for-alignment-subject\u2462\u2463"},{"id":"ref-for-alignment-subject\u2462\u2464"},{"id":"ref-for-alignment-subject\u2462\u2465"},{"id":"ref-for-alignment-subject\u2462\u2466"},{"id":"ref-for-alignment-subject\u2462\u2467"},{"id":"ref-for-alignment-subject\u2462\u2468"},{"id":"ref-for-alignment-subject\u2463\u24ea"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-alignment-subject\u2463\u2460"},{"id":"ref-for-alignment-subject\u2463\u2461"},{"id":"ref-for-alignment-subject\u2463\u2462"},{"id":"ref-for-alignment-subject\u2463\u2463"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-alignment-subject\u2463\u2464"},{"id":"ref-for-alignment-subject\u2463\u2465"},{"id":"ref-for-alignment-subject\u2463\u2466"},{"id":"ref-for-alignment-subject\u2463\u2467"},{"id":"ref-for-alignment-subject\u2463\u2468"},{"id":"ref-for-alignment-subject\u2464\u24ea"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2460"},{"id":"ref-for-alignment-subject\u2464\u2461"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2462"},{"id":"ref-for-alignment-subject\u2464\u2463"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2464"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2465"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2466"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2467"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-alignment-subject\u2464\u2468"},{"id":"ref-for-alignment-subject\u2465\u24ea"},{"id":"ref-for-alignment-subject\u2465\u2460"},{"id":"ref-for-alignment-subject\u2465\u2461"},{"id":"ref-for-alignment-subject\u2465\u2462"},{"id":"ref-for-alignment-subject\u2465\u2463"},{"id":"ref-for-alignment-subject\u2465\u2464"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-alignment-subject\u2465\u2465"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-alignment-subject\u2465\u2466"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-alignment-subject\u2465\u2467"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-subject\u2465\u2468"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-alignment-subject\u2466\u24ea"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-alignment-subject\u2466\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-alignment-subject\u2466\u2461"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-alignment-subject\u2466\u2462"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-alignment-subject\u2466\u2463"},{"id":"ref-for-alignment-subject\u2466\u2464"},{"id":"ref-for-alignment-subject\u2466\u2465"},{"id":"ref-for-alignment-subject\u2466\u2466"},{"id":"ref-for-alignment-subject\u2466\u2467"},{"id":"ref-for-alignment-subject\u2466\u2468"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"#alignment-subject"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-right\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b1a34c0b": {"dfnID":"b1a34c0b","dfnText":"non-replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-non-replaced"},{"id":"ref-for-non-replaced\u2460"},{"id":"ref-for-non-replaced\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-non-replaced\u2462"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-non-replaced\u2463"}],"title":"6.2.5. Grid Items"}],"url":"https://drafts.csswg.org/css-display-4/#non-replaced"}, "b2a71e73": {"dfnID":"b2a71e73","dfnText":"scrollable overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow"}],"title":"10. \nChanges"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow"}, "b4da59cc": {"dfnID":"b4da59cc","dfnText":"horizontal-tb","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb"}, "b5418f3e": {"dfnID":"b5418f3e","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"8. \nGaps Between Boxes"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "b9aaa547": {"dfnID":"b9aaa547","dfnText":"dominant-baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-dominant-baseline"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline"}, "bacc4779": {"dfnID":"bacc4779","dfnText":"column-reverse","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-column-reverse"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse"}, "baseline-alignment": {"dfnID":"baseline-alignment","dfnText":"Baseline alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-alignment"},{"id":"ref-for-baseline-alignment\u2460"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-baseline-alignment\u2461"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"#baseline-alignment"}, "baseline-alignment-preference": {"dfnID":"baseline-alignment-preference","dfnText":"baseline alignment preference","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-alignment-preference"},{"id":"ref-for-baseline-alignment-preference\u2460"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-baseline-alignment-preference\u2461"},{"id":"ref-for-baseline-alignment-preference\u2462"},{"id":"ref-for-baseline-alignment-preference\u2463"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-baseline-alignment-preference\u2464"},{"id":"ref-for-baseline-alignment-preference\u2465"},{"id":"ref-for-baseline-alignment-preference\u2466"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"#baseline-alignment-preference"}, "baseline-content-alignment": {"dfnID":"baseline-content-alignment","dfnText":"Baseline content-alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-content-alignment"},{"id":"ref-for-baseline-content-alignment\u2460"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-baseline-content-alignment\u2461"},{"id":"ref-for-baseline-content-alignment\u2462"},{"id":"ref-for-baseline-content-alignment\u2463"},{"id":"ref-for-baseline-content-alignment\u2464"},{"id":"ref-for-baseline-content-alignment\u2465"},{"id":"ref-for-baseline-content-alignment\u2466"},{"id":"ref-for-baseline-content-alignment\u2467"},{"id":"ref-for-baseline-content-alignment\u2468"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-baseline-content-alignment\u2460\u24ea"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-baseline-content-alignment\u2460\u2460"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-baseline-content-alignment\u2460\u2461"}],"title":"9.3. \nAligning Boxes by Baseline"},{"refs":[{"id":"ref-for-baseline-content-alignment\u2460\u2462"}],"title":"10. \nChanges"}],"url":"#baseline-content-alignment"}, "baseline-self-alignment": {"dfnID":"baseline-self-alignment","dfnText":"Baseline self-alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-self-alignment"},{"id":"ref-for-baseline-self-alignment\u2460"},{"id":"ref-for-baseline-self-alignment\u2461"},{"id":"ref-for-baseline-self-alignment\u2462"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-baseline-self-alignment\u2463"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-baseline-self-alignment\u2464"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-baseline-self-alignment\u2465"},{"id":"ref-for-baseline-self-alignment\u2466"},{"id":"ref-for-baseline-self-alignment\u2467"},{"id":"ref-for-baseline-self-alignment\u2468"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-baseline-self-alignment\u2460\u24ea"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"#baseline-self-alignment"}, "baseline-set": {"dfnID":"baseline-set","dfnText":"baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-set"},{"id":"ref-for-baseline-set\u2460"},{"id":"ref-for-baseline-set\u2461"},{"id":"ref-for-baseline-set\u2462"},{"id":"ref-for-baseline-set\u2463"},{"id":"ref-for-baseline-set\u2464"},{"id":"ref-for-baseline-set\u2465"},{"id":"ref-for-baseline-set\u2466"},{"id":"ref-for-baseline-set\u2467"},{"id":"ref-for-baseline-set\u2468"},{"id":"ref-for-baseline-set\u2460\u24ea"},{"id":"ref-for-baseline-set\u2460\u2460"},{"id":"ref-for-baseline-set\u2460\u2461"},{"id":"ref-for-baseline-set\u2460\u2462"},{"id":"ref-for-baseline-set\u2460\u2463"},{"id":"ref-for-baseline-set\u2460\u2464"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-baseline-set\u2460\u2465"}],"title":"10. \nChanges"}],"url":"#baseline-set"}, "baseline-sharing-group": {"dfnID":"baseline-sharing-group","dfnText":"baseline-sharing group","external":false,"refSections":[{"refs":[{"id":"ref-for-baseline-sharing-group"},{"id":"ref-for-baseline-sharing-group\u2460"},{"id":"ref-for-baseline-sharing-group\u2461"},{"id":"ref-for-baseline-sharing-group\u2462"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2463"},{"id":"ref-for-baseline-sharing-group\u2464"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2465"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2466"}],"title":"9. \nBaseline Alignment Details"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2467"},{"id":"ref-for-baseline-sharing-group\u2468"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2460\u24ea"},{"id":"ref-for-baseline-sharing-group\u2460\u2460"},{"id":"ref-for-baseline-sharing-group\u2460\u2461"},{"id":"ref-for-baseline-sharing-group\u2460\u2462"},{"id":"ref-for-baseline-sharing-group\u2460\u2463"}],"title":"9.3. \nAligning Boxes by Baseline"},{"refs":[{"id":"ref-for-baseline-sharing-group\u2460\u2464"}],"title":"10. \nChanges"}],"url":"#baseline-sharing-group"}, "box-alignment-properties": {"dfnID":"box-alignment-properties","dfnText":"box alignment properties","external":false,"refSections":[{"refs":[{"id":"ref-for-box-alignment-properties\u2460"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-box-alignment-properties\u2461"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"#box-alignment-properties"}, "ca960d4f": {"dfnID":"ca960d4f","dfnText":"block formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-block-formatting-context"}],"title":"6.1.1. Block-Level Boxes"}],"url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "compatible-baseline-alignment-preferences": {"dfnID":"compatible-baseline-alignment-preferences","dfnText":"compatible","external":false,"refSections":[{"refs":[{"id":"ref-for-compatible-baseline-alignment-preferences"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"#compatible-baseline-alignment-preferences"}, "content-distribute": {"dfnID":"content-distribute","dfnText":"Content distribution","external":false,"refSections":[{"refs":[{"id":"ref-for-content-distribute"},{"id":"ref-for-content-distribute\u2460"},{"id":"ref-for-content-distribute\u2461"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-content-distribute\u2462"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-content-distribute\u2463"}],"title":"10. \nChanges"}],"url":"#content-distribute"}, "content-distribution-properties": {"dfnID":"content-distribution-properties","dfnText":"content-distribution properties","external":false,"refSections":[{"refs":[{"id":"ref-for-content-distribution-properties"},{"id":"ref-for-content-distribution-properties\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-content-distribution-properties\u2461"},{"id":"ref-for-content-distribution-properties\u2462"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-content-distribution-properties\u2463"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-content-distribution-properties\u2464"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-content-distribution-properties\u2465"},{"id":"ref-for-content-distribution-properties\u2466"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-content-distribution-properties\u2467"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-content-distribution-properties\u2468"}],"title":"10. \nChanges"}],"url":"#content-distribution-properties"}, "coordinated-self-alignment-preference": {"dfnID":"coordinated-self-alignment-preference","dfnText":"coordinated self-alignment preference","external":false,"refSections":[{"refs":[{"id":"ref-for-coordinated-self-alignment-preference"},{"id":"ref-for-coordinated-self-alignment-preference\u2460"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-coordinated-self-alignment-preference\u2461"}],"title":"10. \nChanges"}],"url":"#coordinated-self-alignment-preference"}, "d24165c7": {"dfnID":"d24165c7","dfnText":"vertical-lr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "d309d3f4": {"dfnID":"d309d3f4","dfnText":"inherited value","external":true,"refSections":[{"refs":[{"id":"ref-for-inherited-value"},{"id":"ref-for-inherited-value\u2460"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"}],"url":"https://drafts.csswg.org/css-cascade-5/#inherited-value"}, "d3f841bc": {"dfnID":"d3f841bc","dfnText":"cross axis","external":true,"refSections":[{"refs":[{"id":"ref-for-cross-axis"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-cross-axis\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-cross-axis\u2461"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-cross-axis\u2462"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-cross-axis\u2463"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-flexbox-1/#cross-axis"}, "d438078b": {"dfnID":"d438078b","dfnText":"column","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-direction-column"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column"}, "d6d433c0": {"dfnID":"d6d433c0","dfnText":"multi-line flex container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-line-flex-container"}],"title":"5.1.3. Flex Containers"}],"url":"https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container"}, "d7fa3e1c": {"dfnID":"d7fa3e1c","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "d8131c14": {"dfnID":"d8131c14","dfnText":"flex formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-formatting-context"},{"id":"ref-for-flex-formatting-context\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context"}, "d9718e89": {"dfnID":"d9718e89","dfnText":"flex-direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flex-direction"},{"id":"ref-for-propdef-flex-direction\u2460"},{"id":"ref-for-propdef-flex-direction\u2461"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-left\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "df8337f1": {"dfnID":"df8337f1","dfnText":"fit-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-fit-content-size"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-fit-content-size\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-fit-content-size\u2461"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"https://drafts.csswg.org/css-sizing-3/#fit-content-size"}, "distributed-alignment": {"dfnID":"distributed-alignment","dfnText":"distributed alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-distributed-alignment"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-distributed-alignment\u2460"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"#distributed-alignment"}, "e04b111e": {"dfnID":"e04b111e","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-baseline-source-auto"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-source-auto"}, "e1483d91": {"dfnID":"e1483d91","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-top\u2460"}],"title":"6.2.2. Absolutely-Positioned Boxes"}],"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":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-block-axis\u2460"},{"id":"ref-for-block-axis\u2461"},{"id":"ref-for-block-axis\u2462"},{"id":"ref-for-block-axis\u2463"},{"id":"ref-for-block-axis\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-block-axis\u2465"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-block-axis\u2466"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-block-axis\u2467"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-block-axis\u2468"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-block-axis\u2460\u24ea"}],"title":"6.2.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-block-axis\u2460\u2460"},{"id":"ref-for-block-axis\u2460\u2461"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-block-axis\u2460\u2462"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-block-axis\u2460\u2463"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-axis"}, "e33664cd": {"dfnID":"e33664cd","dfnText":"inline-block","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-block"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "e3ccce60": {"dfnID":"e3ccce60","dfnText":"grid area","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-area"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-grid-area\u2460"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-grid-area\u2461"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-area"}, "e453a13a": {"dfnID":"e453a13a","dfnText":"alignment-baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-alignment-baseline"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2460"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline"}, "e551b33b": {"dfnID":"e551b33b","dfnText":"columns","external":true,"refSections":[{"refs":[{"id":"ref-for-column"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"https://drafts.csswg.org/css-tables-3/#column"}, "e72eaaaa": {"dfnID":"e72eaaaa","dfnText":"dominant baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-dominant-baseline"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline"}, "e7b3aa1a": {"dfnID":"e7b3aa1a","dfnText":"main axis","external":true,"refSections":[{"refs":[{"id":"ref-for-main-axis"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-main-axis\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-main-axis\u2461"},{"id":"ref-for-main-axis\u2462"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-main-axis\u2463"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-main-axis\u2464"},{"id":"ref-for-main-axis\u2465"}],"title":"6.1.4. Flex Items"},{"refs":[{"id":"ref-for-main-axis\u2466"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"https://drafts.csswg.org/css-flexbox-1/#main-axis"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"},{"id":"ref-for-containing-block\u2460"},{"id":"ref-for-containing-block\u2461"},{"id":"ref-for-containing-block\u2462"},{"id":"ref-for-containing-block\u2463"},{"id":"ref-for-containing-block\u2464"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-containing-block\u2465"},{"id":"ref-for-containing-block\u2466"},{"id":"ref-for-containing-block\u2467"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-containing-block\u2468"},{"id":"ref-for-containing-block\u2460\u24ea"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-containing-block\u2460\u2460"},{"id":"ref-for-containing-block\u2460\u2461"},{"id":"ref-for-containing-block\u2460\u2462"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-containing-block\u2460\u2463"},{"id":"ref-for-containing-block\u2460\u2464"},{"id":"ref-for-containing-block\u2460\u2465"},{"id":"ref-for-containing-block\u2460\u2466"},{"id":"ref-for-containing-block\u2460\u2467"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-containing-block\u2460\u2468"},{"id":"ref-for-containing-block\u2461\u24ea"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "ef47d3e4": {"dfnID":"ef47d3e4","dfnText":"grid-placement property","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-placement-property"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-placement-property"}, "f005b2f6": {"dfnID":"f005b2f6","dfnText":"grid container","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-container"},{"id":"ref-for-grid-container\u2460"},{"id":"ref-for-grid-container\u2461"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-grid-container\u2462"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-grid-container\u2463"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-grid-container\u2464"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-grid-container\u2465"},{"id":"ref-for-grid-container\u2466"},{"id":"ref-for-grid-container\u2467"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-grid-container\u2468"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-grid-container\u2460\u24ea"},{"id":"ref-for-grid-container\u2460\u2460"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-grid-container\u2460\u2461"},{"id":"ref-for-grid-container\u2460\u2462"},{"id":"ref-for-grid-container\u2460\u2463"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-container"}, "f0809abc": {"dfnID":"f0809abc","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-comb-all\u2460"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "f41ab620": {"dfnID":"f41ab620","dfnText":"establish an independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-establish-an-independent-formatting-context"}],"title":"5.1.1. Block Containers (Including Table Cells)"}],"url":"https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context"}, "f4a5f1c1": {"dfnID":"f4a5f1c1","dfnText":"inline-end","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-end"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-end"}, "f616a86d": {"dfnID":"f616a86d","dfnText":"inset properties","external":true,"refSections":[{"refs":[{"id":"ref-for-inset-properties"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-logical-1/#inset-properties"}, "f8cff8d7": {"dfnID":"f8cff8d7","dfnText":"column-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-column-width"},{"id":"ref-for-propdef-column-width\u2460"}],"title":"5.1.2. Multicol Containers"}],"url":"https://drafts.csswg.org/css-multicol-2/#propdef-column-width"}, "f952f01b": {"dfnID":"f952f01b","dfnText":"non-replaced","external":true,"refSections":[{"refs":[{"id":"ref-for-non-replaced"},{"id":"ref-for-non-replaced\u2460"},{"id":"ref-for-non-replaced\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-non-replaced\u2462"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-non-replaced\u2463"}],"title":"6.2.5. Grid Items"}],"url":"https://drafts.csswg.org/css-display-4/#non-replaced"}, "fa646702": {"dfnID":"fa646702","dfnText":"line-right","external":true,"refSections":[{"refs":[{"id":"ref-for-line-right"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-right"}, "fallback-alignment": {"dfnID":"fallback-alignment","dfnText":"fallback alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-fallback-alignment"},{"id":"ref-for-fallback-alignment\u2460"},{"id":"ref-for-fallback-alignment\u2461"},{"id":"ref-for-fallback-alignment\u2462"},{"id":"ref-for-fallback-alignment\u2463"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-fallback-alignment\u2464"},{"id":"ref-for-fallback-alignment\u2465"},{"id":"ref-for-fallback-alignment\u2466"},{"id":"ref-for-fallback-alignment\u2467"},{"id":"ref-for-fallback-alignment\u2468"},{"id":"ref-for-fallback-alignment\u2460\u24ea"},{"id":"ref-for-fallback-alignment\u2460\u2460"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-fallback-alignment\u2460\u2461"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-fallback-alignment\u2460\u2462"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-fallback-alignment\u2460\u2463"},{"id":"ref-for-fallback-alignment\u2460\u2464"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-fallback-alignment\u2460\u2465"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-fallback-alignment\u2460\u2466"},{"id":"ref-for-fallback-alignment\u2460\u2467"},{"id":"ref-for-fallback-alignment\u2460\u2468"}],"title":"9.3. \nAligning Boxes by Baseline"},{"refs":[{"id":"ref-for-fallback-alignment\u2461\u24ea"},{"id":"ref-for-fallback-alignment\u2461\u2460"},{"id":"ref-for-fallback-alignment\u2461\u2461"}],"title":"10. \nChanges"}],"url":"#fallback-alignment"}, "fd9aa8f7": {"dfnID":"fd9aa8f7","dfnText":"block-level box","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level-box"}],"title":"\nAppendix A: Static Position Terminology"}],"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"},{"id":"ref-for-content-edge\u2460"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"https://drafts.csswg.org/css-box-4/#content-edge"}, "first-baseline-alignment": {"dfnID":"first-baseline-alignment","dfnText":"first-baseline alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-first-baseline-alignment"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"#first-baseline-alignment"}, "first-baseline-set": {"dfnID":"first-baseline-set","dfnText":"first baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-first-baseline-set"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-first-baseline-set\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"#first-baseline-set"}, "generate-baselines": {"dfnID":"generate-baselines","dfnText":"generate baselines","external":false,"refSections":[{"refs":[{"id":"ref-for-generate-baselines"},{"id":"ref-for-generate-baselines\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"#generate-baselines"}, "gutter": {"dfnID":"gutter","dfnText":"gutters","external":false,"refSections":[{"refs":[{"id":"ref-for-gutter"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-gutter\u2460"},{"id":"ref-for-gutter\u2461"},{"id":"ref-for-gutter\u2462"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-gutter\u2463"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"}],"url":"#gutter"}, "last-baseline-alignment": {"dfnID":"last-baseline-alignment","dfnText":"last-baseline alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-last-baseline-alignment"}],"title":"9.2. \nBaseline Alignment Grouping"}],"url":"#last-baseline-alignment"}, "last-baseline-set": {"dfnID":"last-baseline-set","dfnText":"last baseline set","external":false,"refSections":[{"refs":[{"id":"ref-for-last-baseline-set"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-last-baseline-set\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-last-baseline-set\u2461"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-last-baseline-set\u2462"}],"title":"10. \nChanges"}],"url":"#last-baseline-set"}, "overflow-alignment": {"dfnID":"overflow-alignment","dfnText":"overflow alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-overflow-alignment"},{"id":"ref-for-overflow-alignment\u2460"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-overflow-alignment\u2461"}],"title":"4.4.1. \nAutomatic Overflow Alignment Safety"},{"refs":[{"id":"ref-for-overflow-alignment\u2462"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-overflow-alignment\u2463"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-overflow-alignment\u2464"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"#overflow-alignment"}, "positional-alignment": {"dfnID":"positional-alignment","dfnText":"positional alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-positional-alignment"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"#positional-alignment"}, "propdef-align-content": {"dfnID":"propdef-align-content","dfnText":"align-content","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-align-content"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-align-content\u2460"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-propdef-align-content\u2461"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-align-content\u2462"},{"id":"ref-for-propdef-align-content\u2463"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-propdef-align-content\u2464"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-propdef-align-content\u2465"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-propdef-align-content\u2466"}],"title":"5. \nContent Distribution: Aligning a Box\u2019s Contents Within Itself"},{"refs":[{"id":"ref-for-propdef-align-content\u2467"},{"id":"ref-for-propdef-align-content\u2468"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u24ea"},{"id":"ref-for-propdef-align-content\u2460\u2460"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2461"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2462"},{"id":"ref-for-propdef-align-content\u2460\u2463"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2464"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2465"},{"id":"ref-for-propdef-align-content\u2460\u2466"},{"id":"ref-for-propdef-align-content\u2460\u2467"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-propdef-align-content\u2460\u2468"},{"id":"ref-for-propdef-align-content\u2461\u24ea"},{"id":"ref-for-propdef-align-content\u2461\u2460"},{"id":"ref-for-propdef-align-content\u2461\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-propdef-align-content\u2461\u2462"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-propdef-align-content\u2461\u2463"}],"title":"9. \nBaseline Alignment Details"},{"refs":[{"id":"ref-for-propdef-align-content\u2461\u2464"}],"title":"10. \nChanges"}],"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":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-align-items\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-align-items\u2461"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-propdef-align-items\u2462"}],"title":"7. \nDefault Alignment"},{"refs":[{"id":"ref-for-propdef-align-items\u2463"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-propdef-align-items\u2464"},{"id":"ref-for-propdef-align-items\u2465"},{"id":"ref-for-propdef-align-items\u2466"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"}],"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.3. \nPartial Implementations"},{"refs":[{"id":"ref-for-propdef-align-self\u2462"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-align-self\u2463"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-propdef-align-self\u2464"},{"id":"ref-for-propdef-align-self\u2465"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-align-self\u2466"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-propdef-align-self\u2467"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-propdef-align-self\u2468"}],"title":"6. \nSelf-Alignment: Aligning the Box Within Its Parent"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u24ea"},{"id":"ref-for-propdef-align-self\u2460\u2460"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2461"}],"title":"6.2.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2462"},{"id":"ref-for-propdef-align-self\u2460\u2463"},{"id":"ref-for-propdef-align-self\u2460\u2464"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2465"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2466"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-propdef-align-self\u2460\u2467"},{"id":"ref-for-propdef-align-self\u2460\u2468"},{"id":"ref-for-propdef-align-self\u2461\u24ea"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2460"},{"id":"ref-for-propdef-align-self\u2461\u2461"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2462"},{"id":"ref-for-propdef-align-self\u2461\u2463"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2464"}],"title":"7. \nDefault Alignment"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2465"},{"id":"ref-for-propdef-align-self\u2461\u2466"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2467"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-propdef-align-self\u2461\u2468"}],"title":"10. \nChanges"}],"url":"#propdef-align-self"}, "propdef-column-gap": {"dfnID":"propdef-column-gap","dfnText":"column-gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-column-gap"}],"title":"8. \nGaps Between Boxes"},{"refs":[{"id":"ref-for-propdef-column-gap\u2460"},{"id":"ref-for-propdef-column-gap\u2461"},{"id":"ref-for-propdef-column-gap\u2462"},{"id":"ref-for-propdef-column-gap\u2463"},{"id":"ref-for-propdef-column-gap\u2464"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-propdef-column-gap\u2465"},{"id":"ref-for-propdef-column-gap\u2466"},{"id":"ref-for-propdef-column-gap\u2467"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-propdef-column-gap\u2468"},{"id":"ref-for-propdef-column-gap\u2460\u24ea"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-column-gap\u2460\u2460"}],"title":"10. \nChanges"}],"url":"#propdef-column-gap"}, "propdef-gap": {"dfnID":"propdef-gap","dfnText":"gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-gap"}],"title":"8. \nGaps Between Boxes"},{"refs":[{"id":"ref-for-propdef-gap\u2460"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-propdef-gap\u2461"},{"id":"ref-for-propdef-gap\u2462"},{"id":"ref-for-propdef-gap\u2463"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-propdef-gap\u2464"},{"id":"ref-for-propdef-gap\u2465"},{"id":"ref-for-propdef-gap\u2466"},{"id":"ref-for-propdef-gap\u2467"},{"id":"ref-for-propdef-gap\u2468"}],"title":"8.3. \nPercentages In gap Properties"},{"refs":[{"id":"ref-for-propdef-gap\u2460\u24ea"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-gap\u2460\u2460"},{"id":"ref-for-propdef-gap\u2460\u2461"},{"id":"ref-for-propdef-gap\u2460\u2462"}],"title":"10. \nChanges"}],"url":"#propdef-gap"}, "propdef-grid-column-gap": {"dfnID":"propdef-grid-column-gap","dfnText":"grid-column-gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-grid-column-gap"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-grid-column-gap\u2460"}],"title":"10. \nChanges"}],"url":"#propdef-grid-column-gap"}, "propdef-grid-gap": {"dfnID":"propdef-grid-gap","dfnText":"grid-gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-grid-gap"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-grid-gap\u2460"},{"id":"ref-for-propdef-grid-gap\u2461"}],"title":"10. \nChanges"}],"url":"#propdef-grid-gap"}, "propdef-grid-row-gap": {"dfnID":"propdef-grid-row-gap","dfnText":"grid-row-gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-grid-row-gap"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-grid-row-gap\u2460"}],"title":"10. \nChanges"}],"url":"#propdef-grid-row-gap"}, "propdef-justify-content": {"dfnID":"propdef-justify-content","dfnText":"justify-content","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-content"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461"},{"id":"ref-for-propdef-justify-content\u2462"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-justify-content\u2463"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-propdef-justify-content\u2464"}],"title":"5. \nContent Distribution: Aligning a Box\u2019s Contents Within Itself"},{"refs":[{"id":"ref-for-propdef-justify-content\u2465"},{"id":"ref-for-propdef-justify-content\u2466"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-propdef-justify-content\u2467"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-propdef-justify-content\u2468"},{"id":"ref-for-propdef-justify-content\u2460\u24ea"},{"id":"ref-for-propdef-justify-content\u2460\u2460"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"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":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460\u2464"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460\u2465"},{"id":"ref-for-propdef-justify-content\u2460\u2466"},{"id":"ref-for-propdef-justify-content\u2460\u2467"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-propdef-justify-content\u2460\u2468"},{"id":"ref-for-propdef-justify-content\u2461\u24ea"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461\u2460"}],"title":"6.1.4. Flex Items"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461\u2461"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461\u2462"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-propdef-justify-content\u2461\u2463"}],"title":"10. \nChanges"}],"url":"#propdef-justify-content"}, "propdef-justify-items": {"dfnID":"propdef-justify-items","dfnText":"justify-items","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-items\u2460"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-justify-items\u2461"},{"id":"ref-for-propdef-justify-items\u2462"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-justify-items\u2463"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-propdef-justify-items\u2464"}],"title":"7. \nDefault Alignment"},{"refs":[{"id":"ref-for-propdef-justify-items\u2465"},{"id":"ref-for-propdef-justify-items\u2466"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-propdef-justify-items\u2467"},{"id":"ref-for-propdef-justify-items\u2468"},{"id":"ref-for-propdef-justify-items\u2460\u24ea"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"},{"refs":[{"id":"ref-for-propdef-justify-items\u2460\u2460"},{"id":"ref-for-propdef-justify-items\u2460\u2461"}],"title":"10. \nChanges"}],"url":"#propdef-justify-items"}, "propdef-justify-self": {"dfnID":"propdef-justify-self","dfnText":"justify-self","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-justify-self"}],"title":"2. \nOverview of Alignment Properties"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-propdef-justify-self\u2461"},{"id":"ref-for-propdef-justify-self\u2462"},{"id":"ref-for-propdef-justify-self\u2463"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-propdef-justify-self\u2464"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-propdef-justify-self\u2465"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-propdef-justify-self\u2466"}],"title":"6. \nSelf-Alignment: Aligning the Box Within Its Parent"},{"refs":[{"id":"ref-for-propdef-justify-self\u2467"},{"id":"ref-for-propdef-justify-self\u2468"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u24ea"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u2460"},{"id":"ref-for-propdef-justify-self\u2460\u2461"},{"id":"ref-for-propdef-justify-self\u2460\u2462"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u2463"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u2464"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u2465"},{"id":"ref-for-propdef-justify-self\u2460\u2466"},{"id":"ref-for-propdef-justify-self\u2460\u2467"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"},{"refs":[{"id":"ref-for-propdef-justify-self\u2460\u2468"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-propdef-justify-self\u2461\u24ea"},{"id":"ref-for-propdef-justify-self\u2461\u2460"},{"id":"ref-for-propdef-justify-self\u2461\u2461"},{"id":"ref-for-propdef-justify-self\u2461\u2462"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-propdef-justify-self\u2461\u2463"}],"title":"7. \nDefault Alignment"},{"refs":[{"id":"ref-for-propdef-justify-self\u2461\u2464"},{"id":"ref-for-propdef-justify-self\u2461\u2465"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"}],"url":"#propdef-justify-self"}, "propdef-place-content": {"dfnID":"propdef-place-content","dfnText":"place-content","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-place-content"}],"title":"5. \nContent Distribution: Aligning a Box\u2019s Contents Within Itself"},{"refs":[{"id":"ref-for-propdef-place-content\u2460"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"}],"url":"#propdef-place-content"}, "propdef-place-items": {"dfnID":"propdef-place-items","dfnText":"place-items","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-place-items"}],"title":"7. \nDefault Alignment"},{"refs":[{"id":"ref-for-propdef-place-items\u2460"}],"title":"7.3. \nSelf-Alignment Shorthand: the place-items property"}],"url":"#propdef-place-items"}, "propdef-place-self": {"dfnID":"propdef-place-self","dfnText":"place-self","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-place-self"}],"title":"6. \nSelf-Alignment: Aligning the Box Within Its Parent"},{"refs":[{"id":"ref-for-propdef-place-self\u2460"}],"title":"6.3. \nSelf-Alignment Shorthand: the place-self property"}],"url":"#propdef-place-self"}, "propdef-row-gap": {"dfnID":"propdef-row-gap","dfnText":"row-gap","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-row-gap"}],"title":"8. \nGaps Between Boxes"},{"refs":[{"id":"ref-for-propdef-row-gap\u2460"},{"id":"ref-for-propdef-row-gap\u2461"},{"id":"ref-for-propdef-row-gap\u2462"},{"id":"ref-for-propdef-row-gap\u2463"},{"id":"ref-for-propdef-row-gap\u2464"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-propdef-row-gap\u2465"},{"id":"ref-for-propdef-row-gap\u2466"},{"id":"ref-for-propdef-row-gap\u2467"}],"title":"8.2. \nGap Shorthand: the gap property"},{"refs":[{"id":"ref-for-propdef-row-gap\u2468"},{"id":"ref-for-propdef-row-gap\u2460\u24ea"}],"title":"8.4. \nLegacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties"},{"refs":[{"id":"ref-for-propdef-row-gap\u2460\u2460"}],"title":"10. \nChanges"}],"url":"#propdef-row-gap"}, "self-align": {"dfnID":"self-align","dfnText":"Self-alignment","external":false,"refSections":[{"refs":[{"id":"ref-for-self-align"},{"id":"ref-for-self-align\u2460"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-self-align\u2461"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"#self-align"}, "self-alignment-properties": {"dfnID":"self-alignment-properties","dfnText":"self-alignment properties","external":false,"refSections":[{"refs":[{"id":"ref-for-self-alignment-properties"},{"id":"ref-for-self-alignment-properties\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-self-alignment-properties\u2461"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-self-alignment-properties\u2462"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-self-alignment-properties\u2463"},{"id":"ref-for-self-alignment-properties\u2464"},{"id":"ref-for-self-alignment-properties\u2465"},{"id":"ref-for-self-alignment-properties\u2466"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-self-alignment-properties\u2467"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-self-alignment-properties\u2468"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-self-alignment-properties\u2460\u24ea"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"#self-alignment-properties"}, "shared-alignment-context": {"dfnID":"shared-alignment-context","dfnText":"alignment context","external":false,"refSections":[{"refs":[{"id":"ref-for-shared-alignment-context"}],"title":"4. \nAlignment Keywords"},{"refs":[{"id":"ref-for-shared-alignment-context\u2460"},{"id":"ref-for-shared-alignment-context\u2461"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-shared-alignment-context\u2462"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-shared-alignment-context\u2463"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-shared-alignment-context\u2464"},{"id":"ref-for-shared-alignment-context\u2465"},{"id":"ref-for-shared-alignment-context\u2466"},{"id":"ref-for-shared-alignment-context\u2467"},{"id":"ref-for-shared-alignment-context\u2468"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-shared-alignment-context\u2460\u24ea"},{"id":"ref-for-shared-alignment-context\u2460\u2460"},{"id":"ref-for-shared-alignment-context\u2460\u2461"}],"title":"9.2. \nBaseline Alignment Grouping"},{"refs":[{"id":"ref-for-shared-alignment-context\u2460\u2462"},{"id":"ref-for-shared-alignment-context\u2460\u2463"},{"id":"ref-for-shared-alignment-context\u2460\u2464"}],"title":"9.3. \nAligning Boxes by Baseline"}],"url":"#shared-alignment-context"}, "static-position-rectangle": {"dfnID":"static-position-rectangle","dfnText":"static-position rectangle","external":false,"refSections":[{"refs":[{"id":"ref-for-static-position-rectangle"},{"id":"ref-for-static-position-rectangle\u2460"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position-rectangle\u2461"},{"id":"ref-for-static-position-rectangle\u2462"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-static-position-rectangle\u2463"},{"id":"ref-for-static-position-rectangle\u2464"},{"id":"ref-for-static-position-rectangle\u2465"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-static-position-rectangle\u2466"},{"id":"ref-for-static-position-rectangle\u2467"},{"id":"ref-for-static-position-rectangle\u2468"},{"id":"ref-for-static-position-rectangle\u2460\u24ea"},{"id":"ref-for-static-position-rectangle\u2460\u2460"},{"id":"ref-for-static-position-rectangle\u2460\u2461"}],"title":"\nAppendix A: Static Position Terminology"}],"url":"#static-position-rectangle"}, "synthesize-baseline": {"dfnID":"synthesize-baseline","dfnText":"synthesize baselines","external":false,"refSections":[{"refs":[{"id":"ref-for-synthesize-baseline"},{"id":"ref-for-synthesize-baseline\u2460"},{"id":"ref-for-synthesize-baseline\u2461"},{"id":"ref-for-synthesize-baseline\u2462"},{"id":"ref-for-synthesize-baseline\u2463"},{"id":"ref-for-synthesize-baseline\u2464"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"#synthesize-baseline"}, "typedef-baseline-position": {"dfnID":"typedef-baseline-position","dfnText":"<baseline-position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-baseline-position"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2460"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2461"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2462"},{"id":"ref-for-typedef-baseline-position\u2463"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2464"},{"id":"ref-for-typedef-baseline-position\u2465"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2466"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2467"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-typedef-baseline-position\u2468"},{"id":"ref-for-typedef-baseline-position\u2460\u24ea"}],"title":"10. \nChanges"}],"url":"#typedef-baseline-position"}, "typedef-content-distribution": {"dfnID":"typedef-content-distribution","dfnText":"<content-distribution>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-content-distribution"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-typedef-content-distribution\u2460"},{"id":"ref-for-typedef-content-distribution\u2461"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-typedef-content-distribution\u2462"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-typedef-content-distribution\u2463"}],"title":"5.1.2. Multicol Containers"}],"url":"#typedef-content-distribution"}, "typedef-content-position": {"dfnID":"typedef-content-position","dfnText":"<content-position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-content-position"},{"id":"ref-for-typedef-content-position\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-typedef-content-position\u2461"},{"id":"ref-for-typedef-content-position\u2462"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-typedef-content-position\u2463"}],"title":"10. \nChanges"}],"url":"#typedef-content-position"}, "typedef-overflow-position": {"dfnID":"typedef-overflow-position","dfnText":"<overflow-position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-overflow-position\u2461"},{"id":"ref-for-typedef-overflow-position\u2462"}],"title":"5.1. \nThe justify-content and align-content Properties"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2463"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2464"},{"id":"ref-for-typedef-overflow-position\u2465"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2466"},{"id":"ref-for-typedef-overflow-position\u2467"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2468"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2460\u24ea"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"},{"refs":[{"id":"ref-for-typedef-overflow-position\u2460\u2460"}],"title":"10. \nChanges"}],"url":"#typedef-overflow-position"}, "typedef-self-position": {"dfnID":"typedef-self-position","dfnText":"<self-position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-self-position"},{"id":"ref-for-typedef-self-position\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-typedef-self-position\u2461"},{"id":"ref-for-typedef-self-position\u2462"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-typedef-self-position\u2463"},{"id":"ref-for-typedef-self-position\u2464"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-typedef-self-position\u2465"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-typedef-self-position\u2466"}],"title":"7.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-items property"}],"url":"#typedef-self-position"}, "valdef-align-content-space-around": {"dfnID":"valdef-align-content-space-around","dfnText":"space-around","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-space-around"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-align-content-space-around\u2460"}],"title":"10. \nChanges"}],"url":"#valdef-align-content-space-around"}, "valdef-align-content-space-between": {"dfnID":"valdef-align-content-space-between","dfnText":"space-between","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-space-between"}],"title":"3. \nAlignment Terminology"},{"refs":[{"id":"ref-for-valdef-align-content-space-between\u2460"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-align-content-space-between\u2461"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-align-content-space-between\u2462"},{"id":"ref-for-valdef-align-content-space-between\u2463"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"#valdef-align-content-space-between"}, "valdef-align-content-space-evenly": {"dfnID":"valdef-align-content-space-evenly","dfnText":"space-evenly","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-space-evenly"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-align-content-space-evenly\u2460"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"},{"refs":[{"id":"ref-for-valdef-align-content-space-evenly\u2461"}],"title":"10. \nChanges"}],"url":"#valdef-align-content-space-evenly"}, "valdef-align-content-stretch": {"dfnID":"valdef-align-content-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-content-stretch"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-align-content-stretch\u2460"},{"id":"ref-for-valdef-align-content-stretch\u2461"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-valdef-align-content-stretch\u2462"},{"id":"ref-for-valdef-align-content-stretch\u2463"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-valdef-align-content-stretch\u2464"}],"title":"5.1.4. Grid Containers"}],"url":"#valdef-align-content-stretch"}, "valdef-align-self-auto": {"dfnID":"valdef-align-self-auto","dfnText":"auto","external":false,"refSections":[],"url":"#valdef-align-self-auto"}, "valdef-align-self-normal": {"dfnID":"valdef-align-self-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-self-normal"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-valdef-align-self-normal\u2460"},{"id":"ref-for-valdef-align-self-normal\u2461"},{"id":"ref-for-valdef-align-self-normal\u2462"},{"id":"ref-for-valdef-align-self-normal\u2463"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-align-self-normal\u2464"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-valdef-align-self-normal\u2465"}],"title":"6.2.5. Grid Items"}],"url":"#valdef-align-self-normal"}, "valdef-align-self-stretch": {"dfnID":"valdef-align-self-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-align-self-stretch"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-valdef-align-self-stretch\u2460"}],"title":"6.2.4. Flex Items"},{"refs":[{"id":"ref-for-valdef-align-self-stretch\u2461"}],"title":"10. \nChanges"}],"url":"#valdef-align-self-stretch"}, "valdef-justify-content-left": {"dfnID":"valdef-justify-content-left","dfnText":"left","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-content-left"},{"id":"ref-for-valdef-justify-content-left\u2460"},{"id":"ref-for-valdef-justify-content-left\u2461"},{"id":"ref-for-valdef-justify-content-left\u2462"},{"id":"ref-for-valdef-justify-content-left\u2463"},{"id":"ref-for-valdef-justify-content-left\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-justify-content-left\u2465"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-valdef-justify-content-left\u2466"}],"title":"10. \nChanges"}],"url":"#valdef-justify-content-left"}, "valdef-justify-content-normal": {"dfnID":"valdef-justify-content-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-content-normal"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2460"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2461"},{"id":"ref-for-valdef-justify-content-normal\u2462"},{"id":"ref-for-valdef-justify-content-normal\u2463"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2464"},{"id":"ref-for-valdef-justify-content-normal\u2465"},{"id":"ref-for-valdef-justify-content-normal\u2466"}],"title":"5.1.2. Multicol Containers"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2467"},{"id":"ref-for-valdef-justify-content-normal\u2468"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2460\u24ea"},{"id":"ref-for-valdef-justify-content-normal\u2460\u2460"}],"title":"5.1.4. Grid Containers"},{"refs":[{"id":"ref-for-valdef-justify-content-normal\u2460\u2461"}],"title":"10. \nChanges"}],"url":"#valdef-justify-content-normal"}, "valdef-justify-content-right": {"dfnID":"valdef-justify-content-right","dfnText":"right","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-content-right"},{"id":"ref-for-valdef-justify-content-right\u2460"},{"id":"ref-for-valdef-justify-content-right\u2461"},{"id":"ref-for-valdef-justify-content-right\u2462"},{"id":"ref-for-valdef-justify-content-right\u2463"},{"id":"ref-for-valdef-justify-content-right\u2464"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-justify-content-right\u2465"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"},{"refs":[{"id":"ref-for-valdef-justify-content-right\u2466"}],"title":"10. \nChanges"}],"url":"#valdef-justify-content-right"}, "valdef-justify-items-legacy": {"dfnID":"valdef-justify-items-legacy","dfnText":"legacy","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-items-legacy\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-valdef-justify-items-legacy\u2461"}],"title":"6.2. \nBlock-Axis (or Cross-Axis) Alignment: the align-self property"},{"refs":[{"id":"ref-for-valdef-justify-items-legacy\u2462"},{"id":"ref-for-valdef-justify-items-legacy\u2463"},{"id":"ref-for-valdef-justify-items-legacy\u2464"},{"id":"ref-for-valdef-justify-items-legacy\u2465"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"}],"url":"#valdef-justify-items-legacy"}, "valdef-justify-self-auto": {"dfnID":"valdef-justify-self-auto","dfnText":"auto","external":false,"refSections":[],"url":"#valdef-justify-self-auto"}, "valdef-justify-self-baseline": {"dfnID":"valdef-justify-self-baseline","dfnText":"baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-self-baseline"},{"id":"ref-for-valdef-justify-self-baseline\u2460"},{"id":"ref-for-valdef-justify-self-baseline\u2461"},{"id":"ref-for-valdef-justify-self-baseline\u2462"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-valdef-justify-self-baseline\u2463"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-valdef-justify-self-baseline\u2464"}],"title":"10. \nChanges"}],"url":"#valdef-justify-self-baseline"}, "valdef-justify-self-first-baseline": {"dfnID":"valdef-justify-self-first-baseline","dfnText":"first baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-self-first-baseline"},{"id":"ref-for-valdef-justify-self-first-baseline\u2460"},{"id":"ref-for-valdef-justify-self-first-baseline\u2461"},{"id":"ref-for-valdef-justify-self-first-baseline\u2462"},{"id":"ref-for-valdef-justify-self-first-baseline\u2463"},{"id":"ref-for-valdef-justify-self-first-baseline\u2464"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-valdef-justify-self-first-baseline\u2465"},{"id":"ref-for-valdef-justify-self-first-baseline\u2466"},{"id":"ref-for-valdef-justify-self-first-baseline\u2467"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-valdef-justify-self-first-baseline\u2468"},{"id":"ref-for-valdef-justify-self-first-baseline\u2460\u24ea"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-valdef-justify-self-first-baseline\u2460\u2460"}],"title":"9.1. \nDetermining the Baselines of a Box"}],"url":"#valdef-justify-self-first-baseline"}, "valdef-justify-self-last-baseline": {"dfnID":"valdef-justify-self-last-baseline","dfnText":"last baseline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-self-last-baseline"},{"id":"ref-for-valdef-justify-self-last-baseline\u2460"},{"id":"ref-for-valdef-justify-self-last-baseline\u2461"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-valdef-justify-self-last-baseline\u2462"},{"id":"ref-for-valdef-justify-self-last-baseline\u2463"},{"id":"ref-for-valdef-justify-self-last-baseline\u2464"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-valdef-justify-self-last-baseline\u2465"},{"id":"ref-for-valdef-justify-self-last-baseline\u2466"}],"title":"6.4. \nBaseline Self-Alignment"},{"refs":[{"id":"ref-for-valdef-justify-self-last-baseline\u2467"}],"title":"9.1. \nDetermining the Baselines of a Box"},{"refs":[{"id":"ref-for-valdef-justify-self-last-baseline\u2468"}],"title":"10. \nChanges"}],"url":"#valdef-justify-self-last-baseline"}, "valdef-justify-self-normal": {"dfnID":"valdef-justify-self-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-self-normal"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2460"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2461"}],"title":"6.1.1. Block-Level Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2462"},{"id":"ref-for-valdef-justify-self-normal\u2463"},{"id":"ref-for-valdef-justify-self-normal\u2464"},{"id":"ref-for-valdef-justify-self-normal\u2465"},{"id":"ref-for-valdef-justify-self-normal\u2466"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2467"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2468"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-normal\u2460\u24ea"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"#valdef-justify-self-normal"}, "valdef-justify-self-stretch": {"dfnID":"valdef-justify-self-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-justify-self-stretch"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-justify-self-stretch\u2460"},{"id":"ref-for-valdef-justify-self-stretch\u2461"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"},{"refs":[{"id":"ref-for-valdef-justify-self-stretch\u2462"},{"id":"ref-for-valdef-justify-self-stretch\u2463"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-stretch\u2464"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-valdef-justify-self-stretch\u2465"},{"id":"ref-for-valdef-justify-self-stretch\u2466"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-justify-self-stretch\u2467"}],"title":"6.2.5. Grid Items"}],"url":"#valdef-justify-self-stretch"}, "valdef-overflow-position-safe": {"dfnID":"valdef-overflow-position-safe","dfnText":"safe","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-position-safe\u2460"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-valdef-overflow-position-safe\u2461"}],"title":"4.4.1. \nAutomatic Overflow Alignment Safety"},{"refs":[{"id":"ref-for-valdef-overflow-position-safe\u2462"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-overflow-position-safe\u2463"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-valdef-overflow-position-safe\u2464"},{"id":"ref-for-valdef-overflow-position-safe\u2465"},{"id":"ref-for-valdef-overflow-position-safe\u2466"}],"title":"10. \nChanges"}],"url":"#valdef-overflow-position-safe"}, "valdef-overflow-position-unsafe": {"dfnID":"valdef-overflow-position-unsafe","dfnText":"unsafe","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe\u2460"}],"title":"4.4.1. \nAutomatic Overflow Alignment Safety"},{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe\u2461"}],"title":"4.4.1.1. \nContent Distribution for Scroll Containers"},{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe\u2462"}],"title":"4.4.1.2. \nSelf-Alignment for Absolutely Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe\u2463"},{"id":"ref-for-valdef-overflow-position-unsafe\u2464"}],"title":"4.4.1.3. \nAll Other Alignment"},{"refs":[{"id":"ref-for-valdef-overflow-position-unsafe\u2465"}],"title":"5.4. \nBaseline Content-Alignment"}],"url":"#valdef-overflow-position-unsafe"}, "valdef-row-gap-normal": {"dfnID":"valdef-row-gap-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-row-gap-normal"}],"title":"8.1. \nRow and Column Gutters: the row-gap and column-gap properties"}],"url":"#valdef-row-gap-normal"}, "valdef-self-position-center": {"dfnID":"valdef-self-position-center","dfnText":"center","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-center"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-center\u2460"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-valdef-self-position-center\u2461"},{"id":"ref-for-valdef-self-position-center\u2462"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-self-position-center\u2463"}],"title":"7.1. \nInline-Axis (or Main-Axis) Alignment: the justify-items property"}],"url":"#valdef-self-position-center"}, "valdef-self-position-end": {"dfnID":"valdef-self-position-end","dfnText":"end","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-end"},{"id":"ref-for-valdef-self-position-end\u2460"},{"id":"ref-for-valdef-self-position-end\u2461"},{"id":"ref-for-valdef-self-position-end\u2462"},{"id":"ref-for-valdef-self-position-end\u2463"},{"id":"ref-for-valdef-self-position-end\u2464"},{"id":"ref-for-valdef-self-position-end\u2465"},{"id":"ref-for-valdef-self-position-end\u2466"},{"id":"ref-for-valdef-self-position-end\u2467"},{"id":"ref-for-valdef-self-position-end\u2468"},{"id":"ref-for-valdef-self-position-end\u2460\u24ea"},{"id":"ref-for-valdef-self-position-end\u2460\u2460"},{"id":"ref-for-valdef-self-position-end\u2460\u2461"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-end\u2460\u2462"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-valdef-self-position-end\u2460\u2463"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-valdef-self-position-end\u2460\u2464"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"},{"refs":[{"id":"ref-for-valdef-self-position-end\u2460\u2465"}],"title":"10. \nChanges"}],"url":"#valdef-self-position-end"}, "valdef-self-position-flex-end": {"dfnID":"valdef-self-position-flex-end","dfnText":"flex-end","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-flex-end"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"}],"url":"#valdef-self-position-flex-end"}, "valdef-self-position-flex-start": {"dfnID":"valdef-self-position-flex-start","dfnText":"flex-start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-flex-start"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-flex-start\u2460"},{"id":"ref-for-valdef-self-position-flex-start\u2461"},{"id":"ref-for-valdef-self-position-flex-start\u2462"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-self-position-flex-start\u2463"}],"title":"5.1.3. Flex Containers"},{"refs":[{"id":"ref-for-valdef-self-position-flex-start\u2464"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"#valdef-self-position-flex-start"}, "valdef-self-position-self-end": {"dfnID":"valdef-self-position-self-end","dfnText":"self-end","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-self-end"},{"id":"ref-for-valdef-self-position-self-end\u2460"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-self-end\u2461"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-valdef-self-position-self-end\u2462"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"#valdef-self-position-self-end"}, "valdef-self-position-self-start": {"dfnID":"valdef-self-position-self-start","dfnText":"self-start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-self-start"},{"id":"ref-for-valdef-self-position-self-start\u2460"},{"id":"ref-for-valdef-self-position-self-start\u2461"},{"id":"ref-for-valdef-self-position-self-start\u2462"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-self-start\u2463"}],"title":"5.4. \nBaseline Content-Alignment"},{"refs":[{"id":"ref-for-valdef-self-position-self-start\u2464"}],"title":"6.1. \nInline-Axis (or Main-Axis) Alignment: the justify-self property"}],"url":"#valdef-self-position-self-start"}, "valdef-self-position-start": {"dfnID":"valdef-self-position-start","dfnText":"start","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-self-position-start"}],"title":"1.3. \nPartial Implementations"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2460"},{"id":"ref-for-valdef-self-position-start\u2461"},{"id":"ref-for-valdef-self-position-start\u2462"},{"id":"ref-for-valdef-self-position-start\u2463"},{"id":"ref-for-valdef-self-position-start\u2464"},{"id":"ref-for-valdef-self-position-start\u2465"},{"id":"ref-for-valdef-self-position-start\u2466"},{"id":"ref-for-valdef-self-position-start\u2467"},{"id":"ref-for-valdef-self-position-start\u2468"},{"id":"ref-for-valdef-self-position-start\u2460\u24ea"},{"id":"ref-for-valdef-self-position-start\u2460\u2460"},{"id":"ref-for-valdef-self-position-start\u2460\u2461"},{"id":"ref-for-valdef-self-position-start\u2460\u2462"},{"id":"ref-for-valdef-self-position-start\u2460\u2463"},{"id":"ref-for-valdef-self-position-start\u2460\u2464"},{"id":"ref-for-valdef-self-position-start\u2460\u2465"},{"id":"ref-for-valdef-self-position-start\u2460\u2466"}],"title":"4.1. \nPositional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2460\u2467"},{"id":"ref-for-valdef-self-position-start\u2460\u2468"}],"title":"4.2. \nBaseline Alignment: the baseline keyword and first/last modifiers"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u24ea"},{"id":"ref-for-valdef-self-position-start\u2461\u2460"}],"title":"4.3. \nDistributed Alignment: the stretch, space-between, space-around, and space-evenly keywords"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2461"}],"title":"4.4. \nOverflow Alignment: the safe and unsafe keywords and scroll safety limits"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2462"},{"id":"ref-for-valdef-self-position-start\u2461\u2463"}],"title":"5.1.1. Block Containers (Including Table Cells)"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2464"}],"title":"5.2. \nContent-Distribution Shorthand: the place-content property"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2465"}],"title":"5.3. \nOverflow and Scroll Positions"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2466"}],"title":"6.1.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2467"}],"title":"6.1.5. Grid Items"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2461\u2468"}],"title":"6.2.2. Absolutely-Positioned Boxes"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2462\u24ea"}],"title":"6.2.5. Grid Items"},{"refs":[{"id":"ref-for-valdef-self-position-start\u2462\u2460"}],"title":"6.5. \nEffects on Sizing of Absolutely Positioned Boxes with Static-Position Insets"}],"url":"#valdef-self-position-start"}, }; 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-link-titles */ "use strict"; { let linkTitleData = { "#typedef-baseline-position": "Expands to: baseline | first | last", "#typedef-content-distribution": "Expands to: space-around | space-between | space-evenly | stretch", "#typedef-content-position": "Expands to: center | end | flex-end | flex-start | start", "#typedef-overflow-position": "Expands to: safe | unsafe", "#typedef-self-position": "Expands to: center | end | flex-end | flex-start | self-end | self-start | start", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </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 = { "#alignment-baseline": {"displayText":"alignment baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"alignment baseline","type":"dfn","url":"#alignment-baseline"}, "#alignment-container": {"displayText":"alignment container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"alignment container","type":"dfn","url":"#alignment-container"}, "#alignment-subject": {"displayText":"alignment subject","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"alignment subject","type":"dfn","url":"#alignment-subject"}, "#baseline-alignment": {"displayText":"baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline alignment","type":"dfn","url":"#baseline-alignment"}, "#baseline-alignment-preference": {"displayText":"baseline alignment preference","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline alignment preference","type":"dfn","url":"#baseline-alignment-preference"}, "#baseline-content-alignment": {"displayText":"baseline content-alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline content-alignment","type":"dfn","url":"#baseline-content-alignment"}, "#baseline-self-alignment": {"displayText":"baseline self-alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline self-alignment","type":"dfn","url":"#baseline-self-alignment"}, "#baseline-set": {"displayText":"baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline set","type":"dfn","url":"#baseline-set"}, "#baseline-sharing-group": {"displayText":"baseline-sharing group","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline-sharing group","type":"dfn","url":"#baseline-sharing-group"}, "#box-alignment-properties": {"displayText":"box alignment properties","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"box alignment properties","type":"dfn","url":"#box-alignment-properties"}, "#compatible-baseline-alignment-preferences": {"displayText":"compatible baseline alignment preferences","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"compatible baseline alignment preferences","type":"dfn","url":"#compatible-baseline-alignment-preferences"}, "#content-distribute": {"displayText":"content-distribution","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"content-distribution","type":"dfn","url":"#content-distribute"}, "#content-distribution-properties": {"displayText":"content-distribution properties","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"content-distribution properties","type":"dfn","url":"#content-distribution-properties"}, "#coordinated-self-alignment-preference": {"displayText":"coordinated self-alignment preference","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"coordinated self-alignment preference","type":"dfn","url":"#coordinated-self-alignment-preference"}, "#distributed-alignment": {"displayText":"distributed alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"distributed alignment","type":"dfn","url":"#distributed-alignment"}, "#fallback-alignment": {"displayText":"fallback alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"fallback alignment","type":"dfn","url":"#fallback-alignment"}, "#first-baseline-alignment": {"displayText":"first-baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"first-baseline alignment","type":"dfn","url":"#first-baseline-alignment"}, "#first-baseline-set": {"displayText":"first baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"first baseline set","type":"dfn","url":"#first-baseline-set"}, "#generate-baselines": {"displayText":"generated","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"generated","type":"dfn","url":"#generate-baselines"}, "#gutter": {"displayText":"gutter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"gutter","type":"dfn","url":"#gutter"}, "#last-baseline-alignment": {"displayText":"last-baseline alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"last-baseline alignment","type":"dfn","url":"#last-baseline-alignment"}, "#last-baseline-set": {"displayText":"last baseline set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"last baseline set","type":"dfn","url":"#last-baseline-set"}, "#overflow-alignment": {"displayText":"overflow alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"overflow alignment","type":"dfn","url":"#overflow-alignment"}, "#positional-alignment": {"displayText":"positional alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"positional alignment","type":"dfn","url":"#positional-alignment"}, "#propdef-align-content": {"displayText":"align-content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"align-content","type":"property","url":"#propdef-align-content"}, "#propdef-align-items": {"displayText":"align-items","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"align-items","type":"property","url":"#propdef-align-items"}, "#propdef-align-self": {"displayText":"align-self","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"align-self","type":"property","url":"#propdef-align-self"}, "#propdef-column-gap": {"displayText":"column-gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"column-gap","type":"property","url":"#propdef-column-gap"}, "#propdef-gap": {"displayText":"gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"gap","type":"property","url":"#propdef-gap"}, "#propdef-grid-column-gap": {"displayText":"grid-column-gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"grid-column-gap","type":"property","url":"#propdef-grid-column-gap"}, "#propdef-grid-gap": {"displayText":"grid-gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"grid-gap","type":"property","url":"#propdef-grid-gap"}, "#propdef-grid-row-gap": {"displayText":"grid-row-gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"grid-row-gap","type":"property","url":"#propdef-grid-row-gap"}, "#propdef-justify-content": {"displayText":"justify-content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"justify-content","type":"property","url":"#propdef-justify-content"}, "#propdef-justify-items": {"displayText":"justify-items","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"justify-items","type":"property","url":"#propdef-justify-items"}, "#propdef-justify-self": {"displayText":"justify-self","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"justify-self","type":"property","url":"#propdef-justify-self"}, "#propdef-place-content": {"displayText":"place-content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"place-content","type":"property","url":"#propdef-place-content"}, "#propdef-place-items": {"displayText":"place-items","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"place-items","type":"property","url":"#propdef-place-items"}, "#propdef-place-self": {"displayText":"place-self","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"place-self","type":"property","url":"#propdef-place-self"}, "#propdef-row-gap": {"displayText":"row-gap","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"row-gap","type":"property","url":"#propdef-row-gap"}, "#self-align": {"displayText":"self-alignment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"self-alignment","type":"dfn","url":"#self-align"}, "#self-alignment-properties": {"displayText":"self-alignment properties","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"self-alignment properties","type":"dfn","url":"#self-alignment-properties"}, "#shared-alignment-context": {"displayText":"alignment context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"alignment context","type":"dfn","url":"#shared-alignment-context"}, "#static-position-rectangle": {"displayText":"static-position rectangle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"static-position rectangle","type":"dfn","url":"#static-position-rectangle"}, "#synthesize-baseline": {"displayText":"synthesized","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"synthesized","type":"dfn","url":"#synthesize-baseline"}, "#typedef-baseline-position": {"displayText":"<baseline-position>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"<baseline-position>","type":"type","url":"#typedef-baseline-position"}, "#typedef-content-distribution": {"displayText":"<content-distribution>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"<content-distribution>","type":"type","url":"#typedef-content-distribution"}, "#typedef-content-position": {"displayText":"<content-position>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"<content-position>","type":"type","url":"#typedef-content-position"}, "#typedef-overflow-position": {"displayText":"<overflow-position>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"<overflow-position>","type":"type","url":"#typedef-overflow-position"}, "#typedef-self-position": {"displayText":"<self-position>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"<self-position>","type":"type","url":"#typedef-self-position"}, "#valdef-align-content-space-around": {"displayText":"space-around","export":true,"for_":["<content-distribution>","align-content","justify-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"space-around","type":"value","url":"#valdef-align-content-space-around"}, "#valdef-align-content-space-between": {"displayText":"space-between","export":true,"for_":["<content-distribution>","align-content","justify-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"space-between","type":"value","url":"#valdef-align-content-space-between"}, "#valdef-align-content-space-evenly": {"displayText":"space-evenly","export":true,"for_":["<content-distribution>","align-content","justify-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"space-evenly","type":"value","url":"#valdef-align-content-space-evenly"}, "#valdef-align-content-stretch": {"displayText":"stretch","export":true,"for_":["<content-distribution>","align-content","justify-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"stretch","type":"value","url":"#valdef-align-content-stretch"}, "#valdef-align-self-normal": {"displayText":"normal","export":true,"for_":["align-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"normal","type":"value","url":"#valdef-align-self-normal"}, "#valdef-align-self-stretch": {"displayText":"stretch","export":true,"for_":["align-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"stretch","type":"value","url":"#valdef-align-self-stretch"}, "#valdef-justify-content-left": {"displayText":"left","export":true,"for_":["justify-content","justify-items","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"left","type":"value","url":"#valdef-justify-content-left"}, "#valdef-justify-content-normal": {"displayText":"normal","export":true,"for_":["align-content","justify-content"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"normal","type":"value","url":"#valdef-justify-content-normal"}, "#valdef-justify-content-right": {"displayText":"right","export":true,"for_":["justify-content","justify-items","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"right","type":"value","url":"#valdef-justify-content-right"}, "#valdef-justify-items-legacy": {"displayText":"legacy","export":true,"for_":["justify-items"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"legacy","type":"value","url":"#valdef-justify-items-legacy"}, "#valdef-justify-self-baseline": {"displayText":"baseline","export":true,"for_":["<baseline-position>","align-content","align-items","align-self","justify-items","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"baseline","type":"value","url":"#valdef-justify-self-baseline"}, "#valdef-justify-self-first-baseline": {"displayText":"first","export":true,"for_":["<baseline-position>","align-content","align-items","align-self","justify-items","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"first","type":"value","url":"#valdef-justify-self-first-baseline"}, "#valdef-justify-self-last-baseline": {"displayText":"last","export":true,"for_":["<baseline-position>","align-content","align-items","align-self","justify-items","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"last","type":"value","url":"#valdef-justify-self-last-baseline"}, "#valdef-justify-self-normal": {"displayText":"normal","export":true,"for_":["justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"normal","type":"value","url":"#valdef-justify-self-normal"}, "#valdef-justify-self-stretch": {"displayText":"stretch","export":true,"for_":["justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"stretch","type":"value","url":"#valdef-justify-self-stretch"}, "#valdef-overflow-position-safe": {"displayText":"safe","export":true,"for_":["<overflow-position>"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"safe","type":"value","url":"#valdef-overflow-position-safe"}, "#valdef-overflow-position-unsafe": {"displayText":"unsafe","export":true,"for_":["<overflow-position>"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"unsafe","type":"value","url":"#valdef-overflow-position-unsafe"}, "#valdef-row-gap-normal": {"displayText":"normal","export":true,"for_":["column-gap","gap","row-gap"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"normal","type":"value","url":"#valdef-row-gap-normal"}, "#valdef-self-position-center": {"displayText":"center","export":true,"for_":["<content-position>","<self-position>","align-content","align-self","justify-content","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"center","type":"value","url":"#valdef-self-position-center"}, "#valdef-self-position-end": {"displayText":"end","export":true,"for_":["<content-position>","<self-position>","align-content","align-self","justify-content","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"end","type":"value","url":"#valdef-self-position-end"}, "#valdef-self-position-flex-end": {"displayText":"flex-end","export":true,"for_":["<content-position>","<self-position>","align-content","align-self","justify-content","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"flex-end","type":"value","url":"#valdef-self-position-flex-end"}, "#valdef-self-position-flex-start": {"displayText":"flex-start","export":true,"for_":["<content-position>","<self-position>","align-content","align-self","justify-content","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"flex-start","type":"value","url":"#valdef-self-position-flex-start"}, "#valdef-self-position-self-end": {"displayText":"self-end","export":true,"for_":["<self-position>","align-self","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"self-end","type":"value","url":"#valdef-self-position-self-end"}, "#valdef-self-position-self-start": {"displayText":"self-start","export":true,"for_":["<self-position>","align-self","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"self-start","type":"value","url":"#valdef-self-position-self-start"}, "#valdef-self-position-start": {"displayText":"start","export":true,"for_":["<content-position>","<self-position>","align-content","align-self","justify-content","justify-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"local","text":"start","type":"value","url":"#valdef-self-position-start"}, "https://drafts.csswg.org/css-box-4/#box-box-edge": {"displayText":"box edge","export":true,"for_":["box"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"box edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#box-box-edge"}, "https://drafts.csswg.org/css-box-4/#content-box": {"displayText":"content box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"content box","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#content-box"}, "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": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#margin"}, "https://drafts.csswg.org/css-box-4/#margin-box": {"displayText":"margin box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin box","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#margin-box"}, "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-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "https://drafts.csswg.org/css-box-4/#propdef-padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "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/#inherited-value": {"displayText":"inherited value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherited value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#inherited-value"}, "https://drafts.csswg.org/css-cascade-5/#initial-value": {"displayText":"initial value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"initial value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#initial-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/#shorthand-property": {"displayText":"shorthand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"shorthand property","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "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-display-3/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-3/#propdef-display"}, "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-formatting-context": {"displayText":"block formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "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/#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/#establish-an-independent-formatting-context": {"displayText":"establish an independent formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"establish 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/#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/#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/#inline-level-box": {"displayText":"inline-level box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level-box"}, "https://drafts.csswg.org/css-display-4/#non-replaced": {"displayText":"non-replaced","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"non-replaced","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#non-replaced"}, "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/#valdef-display-inline-block": {"displayText":"inline-block","export":true,"for_":["display","<display-legacy>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-block","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "https://drafts.csswg.org/css-display-4/#valdef-display-inline-table": {"displayText":"inline-table","export":true,"for_":["display","<display-legacy>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-table","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-table"}, "https://drafts.csswg.org/css-flexbox-1/#cross-axis": {"displayText":"cross axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"cross axis","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#cross-axis"}, "https://drafts.csswg.org/css-flexbox-1/#flex-container": {"displayText":"flex container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex container","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context": {"displayText":"flex formatting context","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex formatting context","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context"}, "https://drafts.csswg.org/css-flexbox-1/#flex-item": {"displayText":"flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex item","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "https://drafts.csswg.org/css-flexbox-1/#flex-layout": {"displayText":"flex layout","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex layout","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-layout"}, "https://drafts.csswg.org/css-flexbox-1/#flex-line": {"displayText":"flex line","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex line","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-line"}, "https://drafts.csswg.org/css-flexbox-1/#main-axis": {"displayText":"main axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"main axis","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#main-axis"}, "https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container": {"displayText":"multi-line flex container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"multi-line flex container","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container"}, "https://drafts.csswg.org/css-flexbox-1/#propdef-flex": {"displayText":"flex","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex","type":"property","url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex"}, "https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction": {"displayText":"flex-direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex-direction","type":"property","url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction"}, "https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow": {"displayText":"flex-flow","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex-flow","type":"property","url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow"}, "https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column": {"displayText":"column","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"column","type":"value","url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column"}, "https://drafts.csswg.org/css-flexbox-1/#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":"current","text":"column-reverse","type":"value","url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse"}, "https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row": {"displayText":"row","export":true,"for_":["flex-direction"],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"row","type":"value","url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row"}, "https://drafts.csswg.org/css-flexbox-1/#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":"current","text":"row-reverse","type":"value","url":"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse"}, "https://drafts.csswg.org/css-fonts-4/#first-available-font": {"displayText":"first available font","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"first available font","type":"dfn","url":"https://drafts.csswg.org/css-fonts-4/#first-available-font"}, "https://drafts.csswg.org/css-grid-1/#collapsed-gutter": {"displayText":"collapsed gutter","export":false,"for_":[],"level":"1","normative":true,"shortname":"css-grid","spec":"css-grid-1","status":"current","text":"collapsed gutter","type":"dfn","url":"https://drafts.csswg.org/css-grid-1/#collapsed-gutter"}, "https://drafts.csswg.org/css-grid-2/#grid-area": {"displayText":"grid area","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid area","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-area"}, "https://drafts.csswg.org/css-grid-2/#grid-column": {"displayText":"grid column","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid column","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-column"}, "https://drafts.csswg.org/css-grid-2/#grid-container": {"displayText":"grid container","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid container","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-container"}, "https://drafts.csswg.org/css-grid-2/#grid-item": {"displayText":"grid item","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid item","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-item"}, "https://drafts.csswg.org/css-grid-2/#grid-layout": {"displayText":"grid layout","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid layout","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-layout"}, "https://drafts.csswg.org/css-grid-2/#grid-placement-property": {"displayText":"grid-placement property","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid-placement property","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-placement-property"}, "https://drafts.csswg.org/css-grid-2/#grid-row": {"displayText":"grid row","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid row","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-row"}, "https://drafts.csswg.org/css-grid-2/#grid-track": {"displayText":"grid track","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid track","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-track"}, "https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline": {"displayText":"alignment-baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"alignment-baseline","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline"}, "https://drafts.csswg.org/css-inline-3/#propdef-baseline-source": {"displayText":"baseline-source","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"baseline-source","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-baseline-source"}, "https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline": {"displayText":"dominant-baseline","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"dominant-baseline","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline"}, "https://drafts.csswg.org/css-inline-3/#root-inline-box": {"displayText":"root inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"root inline box","type":"dfn","url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-middle": {"displayText":"middle","export":true,"for_":["alignment-baseline","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"middle","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-middle"}, "https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-bottom": {"displayText":"bottom","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"bottom","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-bottom"}, "https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-top": {"displayText":"top","export":true,"for_":["baseline-shift","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"top","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-top"}, "https://drafts.csswg.org/css-inline-3/#valdef-baseline-source-auto": {"displayText":"auto","export":true,"for_":["baseline-source","vertical-align"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-inline-3/#valdef-baseline-source-auto"}, "https://drafts.csswg.org/css-logical-1/#inset-properties": {"displayText":"inset properties","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"current","text":"inset properties","type":"dfn","url":"https://drafts.csswg.org/css-logical-1/#inset-properties"}, "https://drafts.csswg.org/css-multicol-1/#column-box": {"displayText":"column box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"current","text":"column box","type":"dfn","url":"https://drafts.csswg.org/css-multicol-1/#column-box"}, "https://drafts.csswg.org/css-multicol-1/#multi-column-container": {"displayText":"multi-column container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"current","text":"multi-column container","type":"dfn","url":"https://drafts.csswg.org/css-multicol-1/#multi-column-container"}, "https://drafts.csswg.org/css-multicol-2/#multi-column-spanner": {"displayText":"multi-column spanner","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-multicol","spec":"css-multicol-2","status":"current","text":"multi-column spanner","type":"dfn","url":"https://drafts.csswg.org/css-multicol-2/#multi-column-spanner"}, "https://drafts.csswg.org/css-multicol-2/#propdef-column-width": {"displayText":"column-width","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-multicol","spec":"css-multicol-2","status":"current","text":"column-width","type":"property","url":"https://drafts.csswg.org/css-multicol-2/#propdef-column-width"}, "https://drafts.csswg.org/css-multicol-2/#valdef-column-width-auto": {"displayText":"auto","export":true,"for_":["column-width"],"level":"2","normative":true,"shortname":"css-multicol","spec":"css-multicol-2","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-multicol-2/#valdef-column-width-auto"}, "https://drafts.csswg.org/css-overflow-3/#initial-scroll-position": {"displayText":"initial scroll position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"initial scroll position","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#initial-scroll-position"}, "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/#scrollable-overflow": {"displayText":"scrollable overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollable overflow","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow"}, "https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region": {"displayText":"scrollable overflow area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollable overflow area","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region"}, "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-position-3/#absolute-position": {"displayText":"absolutely position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"absolutely position","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#absolute-position"}, "https://drafts.csswg.org/css-position-3/#inset-modified-containing-block": {"displayText":"inset-modified containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"inset-modified containing block","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#inset-modified-containing-block"}, "https://drafts.csswg.org/css-position-3/#original-containing-block": {"displayText":"original containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"original containing block","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#original-containing-block"}, "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-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-containing-block": {"displayText":"static-position containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"static-position containing block","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#static-position-containing-block"}, "https://drafts.csswg.org/css-position-3/#valdef-top-auto": {"displayText":"auto","export":true,"for_":["top","right","bottom","left","inset-block-start","inset-inline-start","inset-block-end","inset-inline-end","inset-block","inset-inline","inset"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-top-auto"}, "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/#cyclic-percentage-size": {"displayText":"cyclic percentage size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"cyclic percentage size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size"}, "https://drafts.csswg.org/css-sizing-3/#fit-content-size": {"displayText":"fit-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"fit-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#fit-content-size"}, "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/#stretch-fit-size": {"displayText":"stretch-fit size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"stretch-fit size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#stretch-fit-size"}, "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-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-tables-3/#column": {"displayText":"columns","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"columns","type":"dfn","url":"https://drafts.csswg.org/css-tables-3/#column"}, "https://drafts.csswg.org/css-tables-3/#propdef-border-spacing": {"displayText":"border-spacing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"border-spacing","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "https://drafts.csswg.org/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"text-align","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "https://drafts.csswg.org/css-values-4/#comb-all": {"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-all"}, "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/#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/#dominant-baseline": {"displayText":"dominant baseline","export":false,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"dominant baseline","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline"}, "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-flow-direction": {"displayText":"block flow direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block flow direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "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/#flow-relative": {"displayText":"flow-relative","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"flow-relative","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#flow-relative"}, "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/#line-left": {"displayText":"line-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-left","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-left"}, "https://drafts.csswg.org/css-writing-modes-4/#line-orientation": {"displayText":"line orientation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line orientation","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-orientation"}, "https://drafts.csswg.org/css-writing-modes-4/#line-over": {"displayText":"line-over","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-over","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-over"}, "https://drafts.csswg.org/css-writing-modes-4/#line-right": {"displayText":"line-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-right","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-right"}, "https://drafts.csswg.org/css-writing-modes-4/#line-under": {"displayText":"line-under","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-under","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-under"}, "https://drafts.csswg.org/css-writing-modes-4/#physical-direction": {"displayText":"physical direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"physical direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#physical-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#physical-left": {"displayText":"physical left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"physical left","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#physical-left"}, "https://drafts.csswg.org/css-writing-modes-4/#physical-right": {"displayText":"physical right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"physical right","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#physical-right"}, "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-lr": {"displayText":"vertical-lr","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"vertical-lr","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "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/#vertical-writing-mode": {"displayText":"vertical writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"vertical writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode"}, "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/selectors-3/#first-formatted-line0": {"displayText":"first formatted line","export":false,"for_":[],"level":"3","normative":true,"shortname":"selectors","spec":"selectors-3","status":"current","text":"first formatted line","type":"dfn","url":"https://drafts.csswg.org/selectors-3/#first-formatted-line0"}, }; 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 ref = refsData[url]; 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-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>