text.html

 
<p class="zw">我在开发响应式网站时，经常需要改变页面元素的显示顺序，比如在我想改变某个网站导航在页面里的显示位置的时候。通常，一个网页大体的HTML源码差不多都如下所示。</p> 
<pre class="代码无行号"><code><header> […] </header> 
<nav> […] </nav> 
<section> […] </section> 
<footer> […] </footer></code></pre> 
<p class="zw">为什么我们需要调整<code>header</code>或者<code>footer</code>的显示顺序？虽然讲不出什么大道理，但是我见过大量的案例，比如，为了照顾使用小屏手机的用户，而将导航栏从页面顶部调整到页面底部，这样，用户在看完长长的一篇文章后，不必再滑动很久回到顶部找导航。</p> 
<p class="zw"><code>order</code>属性正是完美实现这种体验的属性，所以我们首先给页面的<code>body</code>标签设置一个<code>display:flex</code>，把它变为一个弹性容器。它包含的元素会按垂直方向排列，我们同时定义<code>body</code>标签的<code>flex-direction</code>值为<code>column</code>。</p> 
<pre class="代码无行号"><code>body { 
display : flex; 
flex-direction : column; }</code></pre> 
<p class="zw">接着，我们给每个弹性元素设置它们的<code>order</code>值。</p> 
<pre class="代码无行号"><code>header { 
order : 1; } 

nav { 
order : 2; } 

section { 
order : 3; } 

footer { 
order : 4; }</code></pre> 
<p class="图"><img alt="1124.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/100.jpg"></p> 
<p class="图题">弹性元素按照源代码里的顺序排列显示，所以这是一个单纯演示<code>order</code>效果的例子。</p> 
<p class="zw">我们可以交换<code>nav</code>元素和<code>section</code>元素的展示位置，将导航栏显示在<code>section</code>与<code>footer</code>之间，这在小屏手机上会让布局看起来更友好。</p> 
<pre class="代码无行号"><code>nav { 
order : 3; } 

section { 
order : 2; }</code></pre> 
<p class="图"><img alt="1125.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/101.jpg"></p> 
<p class="图题">调整<code>nav</code>元素的显示位置，就算用户使用小屏手机访问页面，也不必为了回到页面上方找到导航而频繁滚屏。</p> 
<p class="zw">这个变化对小屏手机用户的确很有帮助。但是在大型显示器上，又有多少用户会在页面底部找导航呢。对于这样的用户，以及使用中等屏幕的用户，你需要在一个媒体查询中重置<code>order</code>值。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
nav { 
order : 2; } 

section { 
order : 3; } 
}</code></pre> 
<p class="图"><img alt="1126.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/102.jpg"></p> 
<p class="图题">为中等和大屏用户重置<code>order</code>值。</p> 
<blockquote class="提示 editing-block">