@@ -1391,13 +1391,13 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the ‘<a
13911391
13921392 < h2 id =alignment > < span class =secno > 8. </ span > Alignment</ h2 >
13931393
1394- < p > After a flexbox's contents have finished their flexing and dimensions of
1395- margin boxes of all flexbox items are finalized, they can be aligned in
1396- both the < i > main- axis</ i > with ‘< a href =" #flex-pack0 " > < code
1397- class =property > flex-pack</ code > </ a > ’ and the < i > cross-axis </ i > with
1398- ‘ < a href ="#flex-align0 "> < code
1399- class =property > flex-align</ code > </ a > ’ and ‘ < a
1400- href ="#flex-item-align "> < code
1394+ < p > After a flexbox's contents have finished their flexing and the
1395+ dimensions of margin boxes of all flexbox items are finalized, they can be
1396+ aligned along the < a href =" #main-axis " > < i > main axis</ i > </ a > with ‘< a
1397+ href =" #flex-pack0 " > < code class =property > flex-pack</ code > </ a > ’ and
1398+ the < a href ="#cross-axis "> < i > cross axis </ i > </ a > with ‘ < a
1399+ href =" #flex-align0 " > < code class =property > flex-align</ code > </ a > ’ and
1400+ ‘ < a href ="#flex-item-align "> < code
14011401 class =property > flex-item-align</ code > </ a > ’. These properties make
14021402 many common types of alignment trivial, including some things that were
14031403 very difficult in CSS 2.1, like horizontal and vertical centering.
@@ -1454,43 +1454,45 @@ <h3 id=flex-pack><span class=secno>8.1. </span> Axis Alignment: the
14541454 < td > as specified
14551455 </ table >
14561456
1457- < p > The ‘< a href ="#flex-pack0 "> < code
1457+ < p > The ‘< a href ="#flex-pack0 "> < code
14581458 class =property > flex-pack</ code > </ a > ’ property aligns < a
1459- href ="#flexbox-item "> < i > flexbox items</ i > </ a > in the < i > main-axis</ i > of
1460- the current line of the flexbox. This is done < em title =""> after</ em > any
1461- flexible lengths and any auto margins have been resolved. Typically it
1462- helps distribute extra free space leftover when either all the < a
1463- href ="#flexbox-item "> < i > flexbox items</ i > </ a > on a line are inflexible, or
1464- are flexible but have reach their maximum size, but it also exerts some
1465- control over the alignment of items when they overflow the line.
1459+ href ="#flexbox-item "> < i > flexbox items</ i > </ a > along the < a
1460+ href ="#main-axis "> < i > main axis</ i > </ a > of the current line of the flexbox.
1461+ This is done < em title =""> after</ em > any flexible lengths and any auto
1462+ margins have been resolved. Typically it helps distribute extra free space
1463+ leftover when either all the < a href ="#flexbox-item "> < i > flexbox
1464+ items</ i > </ a > on a line are inflexible, or are flexible but have reach
1465+ their maximum size, but it also exerts some control over the alignment of
1466+ items when they overflow the line.
14661467
14671468 < dl >
14681469 < dt > < dfn id =flex-pack-start > ‘< code
14691470 class =css > start</ code > ’</ dfn >
14701471
1471- < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward the
1472- start of the line. The < a href ="#main-start "> < i > main-start</ i > </ a > margin
1473- edge of the first < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > on the
1474- line is placed flush with the < a href ="#main-start "> < i > main-start</ i > </ a >
1475- edge of the line, and each subsequent < a href ="#flexbox-item "> < i > flexbox
1476- item</ i > </ a > is placed flush with the preceding item.
1472+ < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward
1473+ the start of the line. The < a href ="#main-start "> < i > main-start</ i > </ a >
1474+ margin edge of the first < a href ="#flexbox-item "> < i > flexbox item</ i > </ a >
1475+ on the line is placed flush with the < a
1476+ href ="#main-start "> < i > main-start</ i > </ a > edge of the line, and each
1477+ subsequent < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is placed
1478+ flush with the preceding item.
14771479
14781480 < dt > < dfn id =flex-pack-end > ‘< code class =css > end</ code > ’</ dfn >
14791481
1480- < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward the
1481- end of the line. The < a href ="#main-end "> < i > main-end</ i > </ a > margin edge
1482- of the last < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is placed
1483- flush with the < a href ="#main-end "> < i > main-end</ i > </ a > edge of the line,
1484- and each preceding < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is
1485- placed flush with the subsequent item.
1482+ < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward
1483+ the end of the line. The < a href ="#main-end "> < i > main-end</ i > </ a > margin
1484+ edge of the last < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is
1485+ placed flush with the < a href ="#main-end "> < i > main-end</ i > </ a > edge of the
1486+ line, and each preceding < a href ="#flexbox-item "> < i > flexbox item</ i > </ a >
1487+ is placed flush with the subsequent item.
14861488
14871489 < dt > < dfn id =flex-pack-center > ‘< code
14881490 class =css > center</ code > ’</ dfn >
14891491
1490- < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward the
1491- center of the line. The < a href ="#flexbox-item "> < i > flexbox items </ i > </ a >
1492- on the line are placed flush with each other and aligned in the center of
1493- the line, with equal amounts of empty space between the < a
1492+ < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are packed toward
1493+ the center of the line. The < a href ="#flexbox-item "> < i > flexbox
1494+ items </ i > </ a > on the line are placed flush with each other and aligned in
1495+ the center of the line, with equal amounts of empty space between the < a
14941496 href ="#main-start "> < i > main-start</ i > </ a > edge of the line and the first
14951497 item on the line and between the < a href ="#main-end "> < i > main-end</ i > </ a >
14961498 edge of the line and the last item on the line. (If the leftover
@@ -1500,7 +1502,7 @@ <h3 id=flex-pack><span class=secno>8.1. </span> Axis Alignment: the
15001502 < dt > < dfn id =flex-pack-justify > ‘< code
15011503 class =css > justify</ code > ’</ dfn >
15021504
1503- < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are evenly
1505+ < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are evenly
15041506 distributed in the line. If the leftover free-space is negative or there
15051507 is only a single < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > on the
15061508 line, this value is identical to ‘< code
@@ -1518,9 +1520,9 @@ <h3 id=flex-pack><span class=secno>8.1. </span> Axis Alignment: the
15181520 < dt > < dfn id =flex-pack-distribute > ‘< code
15191521 class =css > distribute</ code > ’</ dfn >
15201522
1521- < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are evenly
1523+ < dd > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > are evenly
15221524 distributed in the line, with half-size spaces on either end. If the
1523- leftover free-space is negative or there is only a single < a
1525+ leftover free-space is negative o r there is only a single < a
15241526 href ="#flexbox-item "> < i > flexbox item</ i > </ a > on the line, this value is
15251527 identical to ‘< code class =css > center</ code > ’. Otherwise, the
15261528 < a href ="#flexbox-item "> < i > flexbox items</ i > </ a > on the line are
@@ -1642,10 +1644,11 @@ <h3 id=flex-align><span class=secno>8.2. </span> Cross-axis Alignment: the
16421644 < td > as specified
16431645 </ table >
16441646
1645- < p > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > can be aligned in the
1646- < i > cross-axis</ i > of the current line of the flexbox, similar to ‘< a
1647- href ="#flex-pack0 "> < code class =property > flex-pack</ code > </ a > ’ but in
1648- the perpendicular direction. ‘< a href ="#flex-align0 "> < code
1647+ < p > < a href ="#flexbox-item "> < i > Flexbox items</ i > </ a > can be aligned in the
1648+ < a href ="#cross-axis "> < i > cross axis</ i > </ a > of the current line of the
1649+ flexbox, similar to ‘< a href ="#flex-pack0 "> < code
1650+ class =property > flex-pack</ code > </ a > ’ but in the perpendicular
1651+ direction. ‘< a href ="#flex-align0 "> < code
16491652 class =property > flex-align</ code > </ a > ’ sets the default alignment for
16501653 all of the flexbox's < a href ="#flexbox-item "> < i
16511654 title ="flexbox items "> items</ i > </ a > , including anonymous < a
@@ -1659,7 +1662,7 @@ <h3 id=flex-align><span class=secno>8.2. </span> Cross-axis Alignment: the
16591662 of ‘< a href ="#flex-align0 "> < code
16601663 class =property > flex-align</ code > </ a > ’ on their associated flexbox).
16611664
1662- < p > A value of < dfn id =flex-item-align-auto > ‘< code
1665+ < p > A value of < dfn id =flex-item-align-auto > ‘< code
16631666 class =css > auto</ code > ’</ dfn > for ‘< a
16641667 href ="#flex-item-align "> < code
16651668 class =property > flex-item-align</ code > </ a > ’ computes to the value of
@@ -1672,54 +1675,55 @@ <h3 id=flex-align><span class=secno>8.2. </span> Cross-axis Alignment: the
16721675 < dt > < dfn id =flex-align-start > ‘< code
16731676 class =css > start</ code > ’</ dfn >
16741677
1675- < dd > The < a href ="#cross-start "> < i > cross-start</ i > </ a > margin edge of the
1678+ < dd > The < a href ="#cross-start "> < i > cross-start</ i > </ a > margin edge of the
16761679 < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is placed flush with the
16771680 < a href ="#cross-start "> < i > cross-start</ i > </ a > edge of the line.
16781681
16791682 < dt > < dfn id =flex-align-end > ‘< code class =css > end</ code > ’</ dfn >
16801683
1681- < dd > The < a href ="#cross-end "> < i > cross-end</ i > </ a > margin edge of the < a
1684+ < dd > The < a href ="#cross-end "> < i > cross-end</ i > </ a > margin edge of the < a
16821685 href ="#flexbox-item "> < i > flexbox item</ i > </ a > is placed flush with the < a
16831686 href ="#cross-end "> < i > cross-end</ i > </ a > edge of the line.
16841687
16851688 < dt > < dfn id =flex-align-center > ‘< code
16861689 class =css > center</ code > ’</ dfn >
16871690
1688- < dd > The < a href ="#flexbox-item "> < i > flexbox item's</ i > </ a > margin box is
1689- centered in the < i > cross- axis</ i > within the line. (If the < a
1690- href ="#cross-size "> < i > cross size</ i > </ a > of the flexbox is less than that
1691- of the < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > , it will overflow
1692- equally in both directions.)
1691+ < dd > The < a href ="#flexbox-item "> < i > flexbox item's</ i > </ a > margin box is
1692+ centered in the < a href =" #cross-axis " > < i > cross axis</ i > </ a > within the
1693+ line. (If the < a href ="#cross-size "> < i > cross size</ i > </ a > of the flexbox
1694+ is less than that of the < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > ,
1695+ it will overflow equally in both directions.)
16931696
16941697 < dt > < dfn id =flex-align-baseline > ‘< code
16951698 class =css > baseline</ code > ’</ dfn >
16961699
16971700 < dd >
1698- < p > If the < a href ="#flexbox-item "> < i > flexbox item's</ i > </ a > inline-axis
1701+ < p > If the < a href ="#flexbox-item "> < i > flexbox item's</ i > </ a > inline-axis
16991702 is the same as the < i > cross-axis</ i > , this value is identical to
17001703 ‘< code class =css > start</ code > ’.
17011704
1702- < p > Otherwise, all < a href ="#flexbox-item "> < i > flexbox items</ i > </ a > on the
1703- line with an alignment of ‘< code class =css > baseline</ code > ’
1704- that don't run afoul of the previous paragraph are aligned such that
1705- their baselines align, and the item with the largest distance between
1706- its baseline and its < a href ="#cross-start "> < i > cross-start</ i > </ a >
1707- margin edge is placed flush against the < a
1708- href ="#cross-start "> < i > cross-start</ i > </ a > edge of the line.
1705+ < p > Otherwise, all < a href ="#flexbox-item "> < i > flexbox items</ i > </ a > on
1706+ the line with an alignment of ‘< code
1707+ class =css > baseline</ code > ’ that don't run afoul of the previous
1708+ paragraph are aligned such that their baselines align, and the item with
1709+ the largest distance between its baseline and its < a
1710+ href ="#cross-start "> < i > cross-start</ i > </ a > margin edge is placed flush
1711+ against the < a href ="#cross-start "> < i > cross-start</ i > </ a > edge of the
1712+ line.
17091713
17101714 < dt > < dfn id =flex-align-stretch > ‘< code
17111715 class =css > stretch</ code > ’</ dfn >
17121716
17131717 < dd >
1714- < p > If the < a href ="#cross-size-property "> < i > cross size property</ i > </ a >
1718+ < p > If the < a href ="#cross-size-property "> < i > cross size property</ i > </ a >
17151719 of the < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is ‘< code
17161720 class =css > auto</ code > ’, it resolves to the length necessary to
17171721 make the < a href ="#cross-size "> < i > cross size</ i > </ a > of the item's
17181722 margin box the same size as the line, while still respecting
17191723 ‘< code class =css > min/max-width/height</ code > ’ constraints as
17201724 normal.
17211725
1722- < p > The < a href ="#cross-start "> < i > cross-start</ i > </ a > margin edge of the
1726+ < p > The < a href ="#cross-start "> < i > cross-start</ i > </ a > margin edge of the
17231727 < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > is placed flush with the
17241728 < a href ="#cross-start "> < i > cross-start</ i > </ a > edge of the line.
17251729 </ dl >
0 commit comments