Skip to content

Commit e7111c6

Browse files
committed
Cleanup of the display:flexbox section, get appropriate wording so I can remove the issue.
1 parent e6e894c commit e7111c6

2 files changed

Lines changed: 20 additions & 23 deletions

File tree

css3-flexbox/Overview.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -458,14 +458,13 @@ <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
458458
or &lsquo;<code class=property>inline-flexbox</code>&rsquo;.
459459

460460
<p>The &lsquo;<a href="#flexbox"><code class=css>flexbox</code></a>&rsquo;
461-
value makes the flexbox act like a block in other layout modes. The
462-
&lsquo;<code class=css>inline-flexbox</code>&rsquo; value makes the
463-
flexbox act like an inline-block in other layout modes. When it is
464-
necessary to distinguish them, this specification will refer to the former
465-
kind of flexbox as <dfn id=block-flexbox
466-
title="block flexbox|block flexboxes">block flexboxes</dfn> and the latter
467-
type as <dfn id=inline-flexbox
468-
title="inline flexbox|inline flexboxes">inline flexboxes</dfn>.
461+
value makes the flexbox a block-level element. The &lsquo;<code
462+
class=css>inline-flexbox</code>&rsquo; value makes the flexbox an
463+
inline-level element. When it is necessary to distinguish them, this
464+
specification will refer to the former kind of flexbox as a <dfn
465+
id=block-flexbox title="block flexbox|block flexboxes">block flexbox</dfn>
466+
and the latter type as an <dfn id=inline-flexbox
467+
title="inline flexbox|inline flexboxes">inline flexbox</dfn>.
469468

470469
<p>Flexboxes use a new layout algorithm, and so some properties that were
471470
designed with the assumption of block layout don't make sense in a flexbox
@@ -486,7 +485,7 @@ <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
486485
&lsquo;<code class=property>display</code>&rsquo;).
487486

488487
<li>&lsquo;<code class=property>vertical-align</code>&rsquo; has no effect
489-
on a flexbox item
488+
on the alignment of a flexbox item in the flexbox
490489
</ul>
491490

492491
<p>If an element's specified value for &lsquo;<code
@@ -496,14 +495,12 @@ <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
496495
class=property>display</code>&rsquo; must be &lsquo;<a
497496
href="#flexbox"><code class=css>flexbox</code></a>&rsquo;.
498497

499-
<p>A flexbox creates a new flexbox formatting context for its contents.
500-
This is similar to a block formatting context: floats must not intrude
501-
into the flexbox, and the flexbox's margins do not collapse with the
502-
margins of its contents. Additionally, all of the <a
503-
href="#flexbox-item"><i>flexbox items</i></a> establish new block
504-
formatting contexts for their contents.
505-
506-
<p class=issue>Figure out the right terms to use here.
498+
<p>A flexbox establishes a new <dfn id=flexbox-formatting-context>flexbox
499+
formatting context</dfn> for its contents. This is similar to a block
500+
formatting context root: floats do not intrude into the flexbox, and the
501+
flexbox's margins do not collapse with the margins of its contents.
502+
Additionally, each of the <a href="#flexbox-item"><i>flexbox items</i></a>
503+
establish a new formatting context for its contents.
507504

508505
<h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
509506

@@ -2551,6 +2548,9 @@ <h2 class=no-num id=index>Index</h2>
25512548

25522549
<li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
25532550

2551+
<li>flexbox formatting context, <a href="#flexbox-formatting-context"
2552+
title="flexbox formatting context"><strong>2.1.</strong></a>
2553+
25542554
<li>flexbox item, <a href="#flexbox-item"
25552555
title="flexbox item"><strong>2.</strong></a>
25562556

css3-flexbox/Overview.src.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ <h3 id='display-flexbox'>
156156

157157
<p>You can declare that an element is a flexbox, and thus should use flexbox layout for its contents, by setting the 'display' property on the element to the value 'flexbox' or 'inline-flexbox'.</p>
158158

159-
<p>The ''flexbox'' value makes the flexbox act like a block in other layout modes. The ''inline-flexbox'' value makes the flexbox act like an inline-block in other layout modes. When it is necessary to distinguish them, this specification will refer to the former kind of flexbox as <dfn id="block-flexbox" title="block flexbox|block flexboxes">block flexboxes</dfn> and the latter type as <dfn id="inline-flexbox" title="inline flexbox|inline flexboxes">inline flexboxes</dfn>.</p>
159+
<p>The ''flexbox'' value makes the flexbox a block-level element. The ''inline-flexbox'' value makes the flexbox an inline-level element. When it is necessary to distinguish them, this specification will refer to the former kind of flexbox as a <dfn id="block-flexbox" title="block flexbox|block flexboxes">block flexbox</dfn> and the latter type as an <dfn id="inline-flexbox" title="inline flexbox|inline flexboxes">inline flexbox</dfn>.</p>
160160

161161
<p>Flexboxes use a new layout algorithm, and so some properties that were designed with the assumption of block layout don't make sense in a flexbox context. In particular:</p>
162162

@@ -165,15 +165,12 @@ <h3 id='display-flexbox'>
165165

166166
<li>'float' and 'clear' have no effect on a flexbox item. Using 'float' on an element still causes that element's 'display' property to compute to ''block'', as normal, because that occurs before flexbox items are determined (the algorithm for wrapping children of a flexbox into <i>flexbox items</i> needs the computed value of 'display').</li>
167167

168-
<li>'vertical-align' has no effect on a flexbox item</li>
168+
<li>'vertical-align' has no effect on the alignment of a flexbox item in the flexbox</li>
169169
</ul>
170170

171171
<p>If an element's specified value for 'display' is ''inline-flexbox'' and the element is floated or absolutely positioned, the computed value of 'display' must be ''flexbox''.</p>
172172

173-
<p>A flexbox creates a new flexbox formatting context for its contents. This is similar to a block formatting context: floats must not intrude into the flexbox, and the flexbox's margins do not collapse with the margins of its contents. Additionally, all of the <i>flexbox items</i> establish new block formatting contexts for their contents.</p>
174-
175-
<p class='issue'>Figure out the right terms to use here.</p>
176-
173+
<p>A flexbox establishes a new <dfn>flexbox formatting context</dfn> for its contents. This is similar to a block formatting context root: floats do not intrude into the flexbox, and the flexbox's margins do not collapse with the margins of its contents. Additionally, each of the <i>flexbox items</i> establish a new formatting context for its contents.</p>
177174

178175

179176
<h3 id='flex-items'>

0 commit comments

Comments
 (0)