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
Copy file name to clipboardExpand all lines: css3-flexbox/Overview.src.html
+24-24Lines changed: 24 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -82,12 +82,33 @@ <h2 id="intro">
82
82
83
83
<p><em>This section is not normative.</em>
84
84
85
-
<p>CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents and simple applications; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flexbox layout, which is designed for laying out more complex applications and webpages.</p>
85
+
<p>CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flexbox layout, which is designed for laying out more complex applications and webpages.</p>
86
86
87
87
<p>Flexbox layout is superficially similar to block layout. It lacks many of the more complex text or document-formatting properties that can be used in block layout, such as 'float' and 'columns', but in return it gains more simple and powerful tools for aligning its contents in ways that webapps and complex web pages often need. </p>
88
88
89
89
<p>The contents of a flexbox can be laid out in any direction (left, right, down, or even up!), can have their order swapped around dynamically (i.e., display order is independent of source order), and can "flex" their sizes and positions to respond to the available space. If a flexbox is <i>multi-line</i>, the flexbox items flow in two dimensions, wrapping into separate lines in a fashion similar to how text is wrapped into multiple lines.</p>
90
90
91
+
<divclass="example">
92
+
<p>For example, the following HTML snippet uses flexbox to create a toolbar with icons. The flexbox is horizontal, and the children's widths don't fill the flexbox's width, so the additional space is distributed around and between the children. As the flexbox grows (perhaps because the user is viewing the page on a wider screen), the children spread out evenly and automatically:</p>
<pclass='caption'>Example rendering of the above code snippet, at two different flexbox widths.</p>
109
+
</div>
110
+
</div>
111
+
91
112
<h3id="placement">
92
113
Module interactions</h3>
93
114
@@ -98,12 +119,12 @@ <h3 id="values">
98
119
99
120
<p>This specification follows the <ahref="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS modules may expand the definitions of these value types: for example [[CSS3COLOR]], when combined with this module, expands the definition of the <color> value type as used in this specification.</p>
100
121
101
-
<p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <ahref="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their property value. For readability it has not been repeated explicitly.
122
+
<p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <ahref="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">''inherit''</a> keyword as their property value. For readability it has not been repeated explicitly.
102
123
103
124
<h2id='box-model'>
104
125
The Flexbox Box Model</h2>
105
126
106
-
<p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>. Block-level children of a flexbox, and some other types of children, are called <dfntitle="flexbox item|flexbox items|flexbox item's" id="flexbox-item">flexbox items</dfn> and are laid out using the flexbox box model.<spanclass='note'>(See the <ahref="#flex-items">Flexbox Items</a> chapter, below, for specifics on which children are <i>flexbox items</i> directly and which children are instead wrapped in anonymous boxes which are then <i>flexbox items</i>)</span></p>
127
+
<p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>. Children of a flexboxare called <dfntitle="flexbox item|flexbox items|flexbox item's" id="flexbox-item">flexbox items</dfn> and are laid out using the flexbox box model.</p>
107
128
108
129
<p>Unlike block layout, which is normally biased towards laying things out vertically, and inline layout, which is normally biased toward laying things out horizontally, the flexbox layout algorithm is agnostic as to the direction the flexbox happens to be laid out in. To make it easier to talk about flexbox layout in a general way, we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand.</p>
109
130
@@ -120,27 +141,6 @@ <h2 id='box-model'>
120
141
121
142
<p>In the <i>cross axis</i>, <i>flexbox items</i> can either "flex" to fill the available space or be aligned within the space with the 'flex-align' property. If a flexbox is <i>multi-line</i>, new lines are added in the <i>cross-end</i> direction, and can similarly be aligned, centered, or distributed within the flexbox with the 'flex-line-pack' property.</p>
122
143
123
-
<divclass="example">
124
-
<p>For example, the following HTML snippet uses flexbox to create a toolbar with icons. The flexbox is horizontal, and the children's widths don't fill the flexbox's width, so the additional space is distributed around and between the children. As the flexbox grows (perhaps because the user is viewing the page on a wider screen), the children spread out evenly and automatically:</p>
0 commit comments