|
68 | 68 | "html": "Otherwise,\n\t\t\t\t\tif the used <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis\" id=\"ref-for-flex-flex-basis⑥\">flex basis</a> is <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content\" id=\"ref-for-valdef-flex-basis-content⑧\">content</a> or depends on its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#available\" id=\"ref-for-available②\">available space</a>,\n\t\t\t\t\tthe available main size is infinite,\n\t\t\t\t\tand the flex item’s inline axis is parallel to the main axis,\n\t\t\t\t\tlay the item out using <a href=\"https://www.w3.org/TR/css3-writing-modes/#orthogonal-flows\">the rules for a box in an orthogonal flow</a> <a data-link-type=\"biblio\" href=\"https://drafts.csswg.org/css-flexbox-1/#biblio-css3-writing-modes\" title=\"CSS Writing Modes Level 3\">[CSS3-WRITING-MODES]</a>.\n\t\t\t\t\tThe <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-base-size\" id=\"ref-for-flex-base-size④\">flex base size</a> is the item’s max-content <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size①①\">main size</a>." |
69 | 69 | }, |
70 | 70 | { |
71 | | - "html": "Otherwise,\n\t\t\t\t\tsize the item into the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#available\" id=\"ref-for-available③\">available space</a> using its used <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis\" id=\"ref-for-flex-flex-basis⑦\">flex basis</a> in place of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size①②\">main size</a>,\n\t\t\t\t\ttreating a value of <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content\" id=\"ref-for-valdef-flex-basis-content⑨\">content</a> as <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content\" id=\"ref-for-valdef-width-max-content\">max-content</a>.\n\t\t\t\t\tIf a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#cross-size\" id=\"ref-for-cross-size①②\">cross size</a> is needed to determine the <span id=\"ref-for-main-size①③\">main size</span> (e.g. when the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item⑨③\">flex item</a>’s <span id=\"ref-for-main-size①④\">main size</span> is in its block axis,\n\t\t\t\t\tor when it has a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio\" id=\"ref-for-preferred-aspect-ratio④\">preferred aspect ratio</a>)\n\t\t\t\t\tand the <span id=\"ref-for-flex-item⑨④\">flex item</span>’s cross size is <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-auto\" id=\"ref-for-valdef-flex-basis-auto③\">auto</a> and not <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite①⓪\">definite</a>,\n\t\t\t\t\tin this calculation use <span class=\"css\">fit-content</span> as the <span id=\"ref-for-flex-item⑨⑤\">flex item</span>’s <span id=\"ref-for-cross-size①③\">cross size</span>.\n\t\t\t\t\tThe <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-base-size\" id=\"ref-for-flex-base-size⑤\">flex base size</a> is the item’s resulting <span id=\"ref-for-main-size①⑤\">main size</span>." |
| 71 | + "html": "Otherwise,\n\t\t\t\t\tsize the item into the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#available\" id=\"ref-for-available③\">available space</a> using its used <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis\" id=\"ref-for-flex-flex-basis⑦\">flex basis</a> in place of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size①②\">main size</a>,\n\t\t\t\t\ttreating a value of <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content\" id=\"ref-for-valdef-flex-basis-content⑨\">content</a> as <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content\" id=\"ref-for-valdef-width-max-content\">max-content</a>.\n\t\t\t\t\tIf a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#cross-size\" id=\"ref-for-cross-size①②\">cross size</a> is needed to determine the <span id=\"ref-for-main-size①③\">main size</span> (e.g. when the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item⑨③\">flex item</a>’s <span id=\"ref-for-main-size①④\">main size</span> is in its block axis,\n\t\t\t\t\tor when it has a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio\" id=\"ref-for-preferred-aspect-ratio④\">preferred aspect ratio</a>)\n\t\t\t\t\tand the <span id=\"ref-for-flex-item⑨④\">flex item</span>’s cross size is <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-auto\" id=\"ref-for-valdef-align-items-auto①\">auto</a> and not <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite①⓪\">definite</a>,\n\t\t\t\t\tin this calculation use <span class=\"css\">fit-content</span> as the <span id=\"ref-for-flex-item⑨⑤\">flex item</span>’s <span id=\"ref-for-cross-size①③\">cross size</span>.\n\t\t\t\t\tThe <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-base-size\" id=\"ref-for-flex-base-size⑤\">flex base size</a> is the item’s resulting <span id=\"ref-for-main-size①⑤\">main size</span>." |
72 | 72 | } |
73 | 73 | ] |
74 | 74 | }, |
|
240 | 240 | "html": "Add each item’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-base-size\" id=\"ref-for-flex-base-size①⑧\">flex base size</a> to the product of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-flex-grow-factor\" id=\"ref-for-flex-flex-grow-factor①⓪\">flex grow factor</a> (<a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#scaled-flex-shrink-factor\" id=\"ref-for-scaled-flex-shrink-factor③\">scaled flex shrink factor</a>, if shrinking)\n\t\t\tand the <var>chosen flex fraction</var>,\n\t\t\tthen clamp that result by the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#max-main-size\" id=\"ref-for-max-main-size\">max main size</a> floored by the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#min-main-size\" id=\"ref-for-min-main-size\">min main size</a>." |
241 | 241 | }, |
242 | 242 | { |
243 | | - "html": "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 <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content\" id=\"ref-for-max-content④\">max-content size</a> is\n\t\t\tthe largest sum (among all the lines)\n\t\t\tof the afore-calculated sizes of all items within a single line." |
| 243 | + "html": "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 <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content\" id=\"ref-for-max-content④\">max-content size</a> is\n\t\t\tthe largest sum (among all the lines)\n\t\t\tof the afore-calculated sizes of all items within a single line." |
244 | 244 | } |
245 | 245 | ] |
246 | 246 | }, |
247 | 247 | { |
248 | 248 | "rationale": "if", |
249 | 249 | "steps": [ |
250 | 250 | { |
251 | | - "html": "If the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-container\" id=\"ref-for-flex-container⑦④\">flex container</a> has a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②①\">definite</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size③⑧\">main size</a>, \n <ins>then the post-flexing <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size③⑨\">main sizes</a> of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①②⓪\">flex items</a> are treated as <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②②\">definite</a></ins>\n <del>a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①②①\">flex item</a>’s post-flexing <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size④⓪\">main size</a> is treated as <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②③\">definite</a>,\n\t\t\t\t\teven though it can rely on the <span id=\"ref-for-definite②④\">indefinite</span> sizes\n\t\t\t\t\tof any flex items in the same line</del>\n ." |
| 251 | + "html": "If the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-container\" id=\"ref-for-flex-container⑦⑤\">flex container</a> has a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②①\">definite</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size③⑧\">main size</a>, \n <ins>then the post-flexing <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size③⑨\">main sizes</a> of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①②⓪\">flex items</a> are treated as <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②②\">definite</a></ins>\n <del>a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①②①\">flex item</a>’s post-flexing <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size④⓪\">main size</a> is treated as <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②③\">definite</a>,\n\t\t\t\t\teven though it can rely on the <span id=\"ref-for-definite②④\">indefinite</span> sizes\n\t\t\t\t\tof any flex items in the same line</del>\n ." |
252 | 252 | }, |
253 | 253 | { |
254 | 254 | "html": "<ins>If a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①②②\">flex item’s</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis\" id=\"ref-for-flex-flex-basis①⓪\">flex basis</a> is <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#definite\" id=\"ref-for-definite②⑤\">definite</a>,\n\t\t\t\t\tthen its post-flexing <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size④①\">main size</a> is also <span id=\"ref-for-definite②⑥\">definite</span>.</ins>" |
|
280 | 280 | ] |
281 | 281 | }, |
282 | 282 | { |
283 | | - "html": "The <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content\" id=\"ref-for-max-content①⑥\">max-content</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size④⑦\">main size</a> 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> is the smallest size the <span id=\"ref-for-flex-container⑧⑨\">flex container</span> can take\n\t\t\t\twhile maintaining the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content-contribution\" id=\"ref-for-max-content-contribution①②\">max-content contributions</a> of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①⑥⑥\">flex items</a>:", |
| 283 | + "html": "The <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content\" id=\"ref-for-max-content①⑥\">max-content</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-size\" id=\"ref-for-main-size④⑦\">main size</a> 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> is the smallest size the <span id=\"ref-for-flex-container⑨⓪\">flex container</span> can take\n\t\t\t\twhile maintaining the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content-contribution\" id=\"ref-for-max-content-contribution①②\">max-content contributions</a> of its <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①⑥⑥\">flex items</a>:", |
284 | 284 | "rationale": "for", |
285 | 285 | "steps": [ |
286 | 286 | { |
|
299 | 299 | "html": "Otherwise, if there is a preceding in-flow <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-item\" id=\"ref-for-flex-item①⑨⑧\">flex item</a> on the same <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-line\" id=\"ref-for-flex-line②⓪\">flex line</a>,\n\t\t\t\t\t\t\tthe <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-position-3/#static-position\" id=\"ref-for-static-position③\">static position</a> is the outer <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#main-end\" id=\"ref-for-main-end①①\">main-end</a> edge of that <span id=\"ref-for-flex-item①⑨⑨\">flex item</span>." |
300 | 300 | }, |
301 | 301 | { |
302 | | - "html": "Otherwise, the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-position-3/#static-position\" id=\"ref-for-static-position④\">static position</a> is determined\n\t\t\t\t\t\t\tby the value of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-flexbox-1/#propdef-justify-content\" id=\"ref-for-propdef-justify-content①①\">justify-content</a> on the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-container\" id=\"ref-for-flex-container①①④\">flex container</a> as if the <span id=\"ref-for-static-position⑤\">static position</span> were represented by a zero-sized flex item." |
| 302 | + "html": "Otherwise, the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-position-3/#static-position\" id=\"ref-for-static-position④\">static position</a> is determined\n\t\t\t\t\t\t\tby the value of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-flexbox-1/#propdef-justify-content\" id=\"ref-for-propdef-justify-content①①\">justify-content</a> on the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-flexbox-1/#flex-container\" id=\"ref-for-flex-container①①⑤\">flex container</a> as if the <span id=\"ref-for-static-position⑤\">static position</span> were represented by a zero-sized flex item." |
303 | 303 | } |
304 | 304 | ] |
305 | 305 | }, |
|
0 commit comments