You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Abstract: The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
18
+
Abstract: The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
<pclass=p-summarydata-fill-with=abstract>The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
264
+
<pclass=p-summarydata-fill-with=abstract>The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
265
265
<ahref=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(i.e. characters that can be affected by the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-text-3/#white-spacetitle=white-space>white-space</a> property)
707
+
(i.e. characters that can be affected by the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-text-3/#propdef-white-spacetitle=white-space>white-space</a> property)
708
708
is not rendered, as if it were <spanclass=cssdata-link-type=maybetitle=display:none>display:none</span>.
The defining aspect of flex layout is the ability to make the <adata-link-type=dfnhref=#flex-itemtitle="flex items">flex items</a>"flex",
1411
-
altering their width or height to fill the available space.
1410
+
The defining aspect of flex layout is the ability to make the <adata-link-type=dfnhref=#flex-itemtitle="flex items">flex items</a>“flex”,
1411
+
altering their width/height to fill the available space in the <adata-link-type=dfnhref=#main-dimensiontitle="main dimension">main dimension</a>.
1412
1412
This is done with the <aclass=propertydata-link-type=propdeschref=#propdef-flextitle=flex>flex</a> property.
1413
1413
A flex container distributes free space to its items proportional to their <adata-link-type=dfnhref=#flex-grow-factortitle="flex grow factor">flex grow factor</a>,
1414
1414
or shrinks them to prevent overflow proportional to their <adata-link-type=dfnhref=#flex-shrink-factortitle="flex shrink factor">flex shrink factor</a>.
if the <adata-link-type=dfnhref=http://dev.w3.org/csswg/css-writing-modes-3/#block-starttitle=block-start>block-start</a> or <adata-link-type=dfnhref=http://dev.w3.org/csswg/css-writing-modes-3/#inline-starttitle=inline-start>inline-start</a> margin (whichever is in the cross axis)
2342
-
is <aclass=css-codedata-link-for=margindata-link-type=valuetitle=auto>auto</a>, set it to zero;
2343
-
set the opposite margin so that the outer cross size of the item
2342
+
is <aclass=css-codedata-link-for=margindata-link-type=valuetitle=auto>auto</a>, set it to zero.
2343
+
Set the opposite margin so that the outer cross size of the item
<ins>(i.e. characters that can be affected by the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-text-3/#white-spacetitle=white-space>white-space</a> property)</ins>
3341
+
<ins>(i.e. characters that can be affected by the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-text-3/#propdef-white-spacetitle=white-space>white-space</a> property)</ins>
3342
3342
is not rendered, as if it were <spanclass=cssdata-link-type=maybetitle=display:none>display:none</span>.
0 commit comments