[css-flexbox] Fix links.

Author: tabatkins

css-flexbox/Overview.bs

@@ -24,7 +24,7 @@ Former Editor: Neil Deakin, Mozilla Corporation, enndeakin@gmail.com
 Former Editor: Ian Hickson, formerly of Opera Software, ian@hixie.ch
 Former Editor: David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
 !Issues List: <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325">http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325</a>
-Ignored Terms: column-*, auto, first formatted line, first letter
+Ignored Terms: column-*, auto, first formatted line, first letter, static position
 Link Defaults:  css21 (property) margin/min-width/min-height/max-width/max-height, css-break-3 (property) break-after
 </pre>
 <style>
@@ -254,7 +254,7 @@ Overview</h3>
 			can be laid out in any <a href="#flex-direction-property">flow direction</a>
 			(leftwards, rightwards, downwards, or even upwards!)
 		<li>
-			can have their display order <a href="#valdef-flex-direction-row-reverse">reversed</a> or
+			can have their display order <a value for="flex-direction" title="row-reverse">reversed</a> or
 			<a href="#order-property">rearranged</a> at the style layer
 			(i.e., visual order can be independent of source and speech order)
 		<li>
@@ -302,19 +302,19 @@ Overview</h3>
 		<pre>
 &lt;style>
 #deals {
-	display: flex;        /* Flex layout so items <a href="#propdef-align-self" title="Flex items stretch by default.">have equal height</a>  */
-	flex-flow: row wrap;  /* <a href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property">Allow items to wrap into multiple lines</a> */
+	display: flex;        /* Flex layout so items <a property title="align-self">have equal height</a>  */
+	flex-flow: row wrap;  /* <a section href="#flex-flow-property">Allow items to wrap into multiple lines</a> */
 }
 .sale-item {
 	display: flex;        /* Lay out each item using flex layout */
-	flex-flow: column;    /* <a href="#flex-flow-property">Lay out item's contents vertically</a>  */
+	flex-flow: column;    /* <a section href="#flex-flow-property">Lay out item's contents vertically</a>  */
 }
 .sale-item > img {
-	order: -1;            /* <a href="#order-property">Shift image before other content (in visual order)</a> */
-	align-self: center;   /* <a href="#propdef-align-self">Center the image cross-wise (horizontally)</a>         */
+	order: -1;            /* <a section href="#order-property">Shift image before other content (in visual order)</a> */
+	align-self: center;   /* <a property title="align-self">Center the image cross-wise (horizontally)</a>         */
 }
 .sale-item > button {
-	margin-top: auto;     /* <a href="#auto-margins">Auto top margin pushes button to bottom</a> */
+	margin-top: auto;     /* <a section href="#auto-margins">Auto top margin pushes button to bottom</a> */
 }
 &lt;/style></pre>
 <pre>
@@ -1309,7 +1309,7 @@ Reordering and Accessibility</h4>
 
 		<p>
 			As an added bonus,
-			the columns will all be <a href="#valuedef-stretch0">equal-height</a> by default,
+			the columns will all be <a value for="align-self" title="stretch">equal-height</a> by default,
 			and the main content will be as wide as necessary to fill the screen.
 			Additionally,
 			this can then be combined with media queries to switch to an all-vertical layout on narrow screens:

css-flexbox/Overview.html

@@ -393,7 +393,7 @@ <h3 class="heading settled" data-level=1.1 id=overview><span class=secno>1.1 </s
 			can be laid out in any <a href=#flex-direction-property>flow direction</a>
 			(leftwards, rightwards, downwards, or even upwards!)
 		<li>
-			can have their display order <a href=#valdef-flex-direction-row-reverse>reversed</a> or
+			can have their display order <a class=css data-link-for=flex-direction data-link-type=value href=#valdef-flex-direction-row-reverse title=row-reverse>reversed</a> or
 			<a href=#order-property>rearranged</a> at the style layer
 			(i.e., visual order can be independent of source and speech order)
 		<li>
@@ -440,19 +440,19 @@ <h3 class="heading settled" data-level=1.1 id=overview><span class=secno>1.1 </s
 
 		<pre>&lt;style&gt;
 #deals {
-  display: flex;        /* Flex layout so items <a href=#propdef-align-self title="Flex items stretch by default.">have equal height</a>  */
-  flex-flow: row wrap;  /* <a href=http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property>Allow items to wrap into multiple lines</a> */
+  display: flex;        /* Flex layout so items <a data-link-type=property href=#propdef-align-self title=align-self>have equal height</a>  */
+  flex-flow: row wrap;  /* <a data-section="" href=#flex-flow-property>Allow items to wrap into multiple lines</a> */
 }
 .sale-item {
   display: flex;        /* Lay out each item using flex layout */
-  flex-flow: column;    /* <a href=#flex-flow-property>Lay out item’s contents vertically</a>  */
+  flex-flow: column;    /* <a data-section="" href=#flex-flow-property>Lay out item’s contents vertically</a>  */
 }
 .sale-item &gt; img {
-  order: -1;            /* <a href=#order-property>Shift image before other content (in visual order)</a> */
-  align-self: center;   /* <a href=#propdef-align-self>Center the image cross-wise (horizontally)</a>         */
+  order: -1;            /* <a data-section="" href=#order-property>Shift image before other content (in visual order)</a> */
+  align-self: center;   /* <a data-link-type=property href=#propdef-align-self title=align-self>Center the image cross-wise (horizontally)</a>         */
 }
 .sale-item &gt; button {
-  margin-top: auto;     /* <a href=#auto-margins>Auto top margin pushes button to bottom</a> */
+  margin-top: auto;     /* <a data-section="" href=#auto-margins>Auto top margin pushes button to bottom</a> */
 }
 &lt;/style&gt;</pre>
 <pre>&lt;section id='deals'&gt;
@@ -1309,7 +1309,7 @@ <h4 class="heading settled" data-level=5.4.1 id=order-accessibility><span class=
 
 		<p>
 			As an added bonus,
-			the columns will all be <a href=#valuedef-stretch0>equal-height</a> by default,
+			the columns will all be <a class=css data-link-for=align-self data-link-type=value href=#valdef-align-items-align-self-stretch title=stretch>equal-height</a> by default,
 			and the main content will be as wide as necessary to fill the screen.
 			Additionally,
 			this can then be combined with media queries to switch to an all-vertical layout on narrow screens: