Skip to content

Commit fad0060

Browse files
alexmog1alexmog1
committed
add flexibility components flex-grow, flex-shrink, flex-basis
1 parent eeafc5c commit fad0060

1 file changed

Lines changed: 110 additions & 0 deletions

File tree

‎css3-flexbox/Overview.src.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,116 @@ <h2 id='flexibility'>
900900
<img src="images/wp7zxxyu.gif" alt="">
901901

902902
</div>
903+
904+
<h3 id='flexibility-components'>
905+
'Flex-grow', 'flex-shrink' and 'flex-basis': components of flexibility</h3>
906+
907+
<p>
908+
Individual components of flexibility can be controlled by separate properties.
909+
910+
<table class=propdef>
911+
<tr>
912+
<th>Name:
913+
<td><dfn>flex-grow</dfn>
914+
<tr>
915+
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
916+
<td>&lt;number>
917+
<tr>
918+
<th>Initial:
919+
<td>''0''
920+
<tr>
921+
<th>Applies to:
922+
<td>flexbox items
923+
<tr>
924+
<th>Inherited:
925+
<td>no
926+
<tr>
927+
<th>Computed Value:
928+
<td>specified value
929+
<tr>
930+
<th>Media:
931+
<td>visual
932+
<tr>
933+
<th>Animatable:
934+
<td>yes
935+
<tr>
936+
<th>Canonical Order:
937+
<td>as specified
938+
</table>
939+
940+
<p>
941+
The ''flex-grow'' property sets the positive flexibility.
942+
943+
<table class=propdef>
944+
<tr>
945+
<th>Name:
946+
<td><dfn>flex-shrink</dfn>
947+
<tr>
948+
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
949+
<td>&lt;number>
950+
<tr>
951+
<th>Initial:
952+
<td>''0''
953+
<tr>
954+
<th>Applies to:
955+
<td>flexbox items
956+
<tr>
957+
<th>Inherited:
958+
<td>no
959+
<tr>
960+
<th>Computed Value:
961+
<td>specified value
962+
<tr>
963+
<th>Media:
964+
<td>visual
965+
<tr>
966+
<th>Animatable:
967+
<td>yes
968+
<tr>
969+
<th>Canonical Order:
970+
<td>as specified
971+
</table>
972+
973+
<p>
974+
The ''flex-shrink'' property sets the negative flexibility.
975+
976+
<table class=propdef>
977+
<tr>
978+
<th>Name:
979+
<td><dfn>flex-basis</dfn>
980+
<tr>
981+
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
982+
<td><var>&lt;&apos;width&apos;></var>
983+
<tr>
984+
<th>Initial:
985+
<td>auto
986+
<tr>
987+
<th>Applies to:
988+
<td>flexbox items
989+
<tr>
990+
<th>Inherited:
991+
<td>no
992+
<tr>
993+
<th>Computed Value:
994+
<td>specified value
995+
<tr>
996+
<th>Media:
997+
<td>visual
998+
<tr>
999+
<th>Animatable:
1000+
<td>yes
1001+
<tr>
1002+
<th>Canonical Order:
1003+
<td>as specified
1004+
</table>
1005+
1006+
<p>
1007+
The ''flex-basis'' property sets the flex basis.
1008+
1009+
<p>
1010+
Authors are encouraged to control flexibility using ''flex'' shorthand
1011+
property rather than with comonent properties.
1012+
9031013

9041014
<h2 id='alignment'>
9051015
Alignment</h2>

0 commit comments

Comments
 (0)