Skip to content

Commit 0fbba78

Browse files
tabatkinstabatkins
committed
Add a 'common values of flex' section.
1 parent 5647016 commit 0fbba78

2 files changed

Lines changed: 112 additions & 11 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 68 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -241,16 +241,19 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
241241
<li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code
242242
class=property>flex</code>’ Shorthand</a>
243243

244-
<li><a href="#flex-components"><span class=secno>7.2. </span> Components
244+
<li><a href="#flex-examples"><span class=secno>7.2. </span> Common
245+
Values of ‘<code class=property>flex</code>’</a>
246+
247+
<li><a href="#flex-components"><span class=secno>7.3. </span> Components
245248
of Flexibility</a>
246249
<ul class=toc>
247-
<li><a href="#flex-grow-property"><span class=secno>7.2.1. </span> The
250+
<li><a href="#flex-grow-property"><span class=secno>7.3.1. </span> The
248251
‘<code class=property>flex-grow</code>’ property</a>
249252

250-
<li><a href="#flex-shrink-property"><span class=secno>7.2.2. </span>
253+
<li><a href="#flex-shrink-property"><span class=secno>7.3.2. </span>
251254
The ‘<code class=property>flex-shrink</code>’ property</a>
252255

253-
<li><a href="#flex-basis-property"><span class=secno>7.2.3. </span>
256+
<li><a href="#flex-basis-property"><span class=secno>7.3.3. </span>
254257
The ‘<code class=property>flex-basis</code>’ property</a>
255258
</ul>
256259
</ul>
@@ -1511,7 +1514,61 @@ <h3 id=flex-property><span class=secno>7.1. </span> The ‘<a
15111514
src="images/wp7zxxyu.gif">
15121515
</div>
15131516

1514-
<h3 id=flex-components><span class=secno>7.2. </span> Components of
1517+
<h3 id=flex-examples><span class=secno>7.2. </span> Common Values of ‘<a
1518+
href="#flex"><code class=property>flex</code></a>’</h3>
1519+
1520+
<p><em>This section is informative.</em>
1521+
1522+
<p> The list below summarizes the effects of the most common ‘<a
1523+
href="#flex"><code class=property>flex</code></a>’ values:
1524+
1525+
<dl>
1526+
<dt>‘<code class=css>flex: auto</code>’
1527+
1528+
<dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. This value
1529+
makes the flex item flexible, and sets the <a href="#flex-basis"><i>flex
1530+
basis</i></a> according to the ‘<code
1531+
class=property>width</code>’/‘<code class=property>height</code>’
1532+
properties. (If the ‘<code class=property>width</code>’/‘<code
1533+
class=property>height</code>’ used as the <a href="#flex-basis"><i>flex
1534+
basis</i></a> computes to ‘<a href="#flex-item-align-auto"><code
1535+
class=css>auto</code></a>’, this will size the flex item based on its
1536+
contents.) If all items are either ‘<code class=css>flex:
1537+
auto</code>’ or ‘<code class=css>flex: none</code>’, any free space
1538+
after the items have been sized will be distributed evenly to the items
1539+
with ‘<code class=css>flex: auto</code>’.
1540+
1541+
<dt>‘<code class=css>flex: none</code>’
1542+
1543+
<dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value
1544+
makes the flex item inflexible, and sets the size of the item according
1545+
to the ‘<code class=property>width</code>’/‘<code
1546+
class=property>height</code>’ properties. (If the ‘<code
1547+
class=property>width</code>’/‘<code class=property>height</code>’
1548+
used as the <a href="#flex-basis"><i>flex basis</i></a> computes to ‘<a
1549+
href="#flex-item-align-auto"><code class=css>auto</code></a>’, this
1550+
will size the flex item based on its contents.) To size things normally
1551+
but still use the <a href="#alignment">alignment abilities</a> of flex
1552+
layout, set all the flex items to ‘<code class=css>flex: none</code>’
1553+
and then use ‘<a href="#flex-item-align-auto"><code
1554+
class=css>auto</code></a>’ margins or the alignment properties.
1555+
1556+
<dt>‘<code class=css>flex: &lt;positive-number></code>’
1557+
1558+
<dd> Equivalent to ‘<code class=css>flex: &lt;positive-number> 1
1559+
0px</code>’. This value makes the flex item flexible, and sets the <a
1560+
href="#flex-basis"><i>flex basis</i></a> to zero, resulting in an item
1561+
that receives the specified proportion of the free space in the flex
1562+
container. If all items in the flex container use this pattern, their
1563+
sizes will be proportional to the specified flex ratio.
1564+
</dl>
1565+
1566+
<p> By default, flex items won't shrink below their minimum content size
1567+
(the length of the longest word or fixed-size element). To change this,
1568+
set the ‘<code class=property>min-width</code>’ or ‘<code
1569+
class=property>min-height</code>’ property.
1570+
1571+
<h3 id=flex-components><span class=secno>7.3. </span> Components of
15151572
Flexibility</h3>
15161573

15171574
<p> Individual components of flexibility can be controlled by separate
@@ -1521,7 +1578,7 @@ <h3 id=flex-components><span class=secno>7.2. </span> Components of
15211578
‘<a href="#flex"><code class=property>flex</code></a>’ shorthand
15221579
rather than with component properties.
15231580

1524-
<h4 id=flex-grow-property><span class=secno>7.2.1. </span> The ‘<a
1581+
<h4 id=flex-grow-property><span class=secno>7.3.1. </span> The ‘<a
15251582
href="#flex-grow"><code class=property>flex-grow</code></a>’ property</h4>
15261583

15271584
<table class=propdef>
@@ -1578,7 +1635,7 @@ <h4 id=flex-grow-property><span class=secno>7.2.1. </span> The ‘<a
15781635
href="#positive-flexibility"><i>positive flex ratio</i></a>. Negative
15791636
numbers are invalid.
15801637

1581-
<h4 id=flex-shrink-property><span class=secno>7.2.2. </span> The ‘<a
1638+
<h4 id=flex-shrink-property><span class=secno>7.3.2. </span> The ‘<a
15821639
href="#flex-shrink"><code class=property>flex-shrink</code></a>’
15831640
property</h4>
15841641

@@ -1636,7 +1693,7 @@ <h4 id=flex-shrink-property><span class=secno>7.2.2. </span> The ‘<a
16361693
href="#negative-flex-ratio"><i>negative flex ratio</i></a>. Negative
16371694
numbers are invalid.
16381695

1639-
<h4 id=flex-basis-property><span class=secno>7.2.3. </span> The ‘<a
1696+
<h4 id=flex-basis-property><span class=secno>7.3.3. </span> The ‘<a
16401697
href="#flex-basis0"><code class=property>flex-basis</code></a>’ property</h4>
16411698

16421699
<table class=propdef>
@@ -3480,7 +3537,7 @@ <h2 class=no-num id=index>Index</h2>
34803537
title="flex basis"><strong>7.1.</strong></a>
34813538

34823539
<li>flex-basis, <a href="#flex-basis0"
3483-
title=flex-basis><strong>7.2.3.</strong></a>
3540+
title=flex-basis><strong>7.3.3.</strong></a>
34843541

34853542
<li>flex container, <a href="#flex-container"
34863543
title="flex container"><strong>2.</strong></a>
@@ -3495,7 +3552,7 @@ <h2 class=no-num id=index>Index</h2>
34953552
title="flex formatting context"><strong>3.</strong></a>
34963553

34973554
<li>flex-grow, <a href="#flex-grow"
3498-
title=flex-grow><strong>7.2.1.</strong></a>
3555+
title=flex-grow><strong>7.3.1.</strong></a>
34993556

35003557
<li>flexible length, <a href="#flexible-length"
35013558
title="flexible length"><strong>7.1.</strong></a>
@@ -3522,7 +3579,7 @@ <h2 class=no-num id=index>Index</h2>
35223579
title=flex-pack><strong>8.2.</strong></a>
35233580

35243581
<li>flex-shrink, <a href="#flex-shrink"
3525-
title=flex-shrink><strong>7.2.2.</strong></a>
3582+
title=flex-shrink><strong>7.3.2.</strong></a>
35263583

35273584
<li>flex-wrap, <a href="#flex-wrap"
35283585
title=flex-wrap><strong>5.2.</strong></a>

‎css3-flexbox/Overview.src.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1012,6 +1012,50 @@ <h3 id='flex-property'>
10121012

10131013
</div>
10141014

1015+
<h3 id='flex-examples'>
1016+
Common Values of 'flex'</h3>
1017+
1018+
<p><em>This section is informative.</em>
1019+
1020+
<p>
1021+
The list below summarizes the effects of the most common 'flex' values:
1022+
1023+
<dl>
1024+
<dt>''flex: auto''
1025+
<dd>
1026+
Equivalent to ''flex: 1 1 auto''.
1027+
This value makes the flex item flexible,
1028+
and sets the <i>flex basis</i> according to the 'width'/'height' properties.
1029+
(If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'',
1030+
this will size the flex item based on its contents.)
1031+
If all items are either ''flex: auto'' or ''flex: none'',
1032+
any free space after the items have been sized will be distributed evenly to the items with ''flex: auto''.
1033+
1034+
<dt>''flex: none''
1035+
<dd>
1036+
Equivalent to ''flex: 0 0 auto''.
1037+
This value makes the flex item inflexible,
1038+
and sets the size of the item according to the 'width'/'height' properties.
1039+
(If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'',
1040+
this will size the flex item based on its contents.)
1041+
To size things normally but still use the <a href="#alignment">alignment abilities</a> of flex layout,
1042+
set all the flex items to ''flex: none''
1043+
and then use ''auto'' margins or the alignment properties.
1044+
1045+
<dt>''flex: &lt;positive-number>''
1046+
<dd>
1047+
Equivalent to ''flex: &lt;positive-number> 1 0px''.
1048+
This value makes the flex item flexible,
1049+
and sets the <i>flex basis</i> to zero, resulting in an item that receives the specified proportion of the free space in the flex container.
1050+
If all items in the flex container use this pattern,
1051+
their sizes will be proportional to the specified flex ratio.
1052+
</dl>
1053+
1054+
<p>
1055+
By default, flex items won't shrink below their minimum content size
1056+
(the length of the longest word or fixed-size element).
1057+
To change this, set the 'min-width' or 'min-height' property.
1058+
10151059
<h3 id='flex-components'>
10161060
Components of Flexibility</h3>
10171061

0 commit comments

Comments
 (0)