内容简介：RWD 因為寬度改變，實務上可能會想調整顯示順序，由於 Browser 是依 HTML 順序顯示，若要改變顯示順序，傳同可由後端送出全新 HTML，或由前端 JavaScript 改變 HTML，事實上透過 Flexbox 的macOS Mojave 10.14.5WebStorm 2019.1.3
RWD 因為寬度改變，實務上可能會想調整顯示順序，由於 Browser 是依 HTML 順序顯示，若要改變顯示順序，傳同可由後端送出全新 HTML，或由前端 JavaScript 改變 HTML，事實上透過 Flexbox 的 order ，能在不回到後端，不執行 JavaScript 前提下，直接改變 Browser 顯示順序。
Version
macOS Mojave 10.14.5
WebStorm 2019.1.3
Chrome 75.0.3770.100
CSS 3
Chrome
Navigation bar 顯示在最下方。
當寬度變小時，navigation bar 改顯示在 Header 之下。
也就是 RWD 時，我們希望 container 內 item 顯示順序跟著改變
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="general">Header</header>
<nav class="main-nav general">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
<main class="general">Content</main>
<footer class="general">Footer</footer>
</body>
</html>
第 10 行
<header class="general">Header</header>
<nav class="main-nav general">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
<main class="general">Content</main>
<footer class="general">Footer</footer>
若根據 HTML，我們發現 <nav> 位於 <header> 之後。
但 navigation bar 在 browser 卻顯示在最下方，唯有當 browser 寬度變小時，才會顯示在 <header> 之下。
CSS
style.css
body {
display: flex;
flex-direction: column;
font-size: 14px;
margin: 0;
padding: 24px;
}
.general {
margin-bottom: 5px;
}
.main-nav ul {
display: flex;
list-style: none;
flex-direction: row;
padding: 0;
margin: 0;
}
.main-nav li {
margin-right: 10px;
}
@media only screen and (min-width: 600px) {
.main-nav {
order: 1;
}
}
第 1 行
body {
display: flex;
flex-direction: column;
}
從 body 開始用 flexbox，且 flex-direction 為 column ，表示 由上而下 顯示。
Flexbox 不是只能用在 <div> ，任何一個 HTML element 都可視為 container 使用 flexbox
25 行
@media only screen and (min-width: 600px) {
.main-nav {
order: 1;
}
}
使用 RWD 的 media query，當 width 大於等於 600px 時，將 main-nav 的 order 設定為 1 。
每個 flexbox 的 item 預設 order 為 0 ：
-
order可設定為正數與負數，大於order則顯示在下方，小於則顯示在上方 - 當
order相等時，則依 HTML 順序顯示
Vuetify 以 600px 為 break point，大於等於 600px 為 sm ，視為 small to medium tablet ，也就是 tablet 以上時， order 為 1 ，navigation bar 會顯示在最下方，否則為 small mobile phone，此時 order 為 default 值 0 ，如原本 HTML 順序顯示在 Header 之下
以上所述就是小编给大家介绍的《CSS Flexbox 之改變顯示順序》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入解析Spring MVC与Web Flow
Seth Ladd、Darren Davison、Steven Devijver、Colin Yates / 徐哲、沈艳 / 人民邮电出版社 / 2008-11 / 49.00元
《深入解析Spring MVCgn Web Flow》是Spring MVC 和Web Flow 两个框架的权威指南，书中包括的技巧和提示可以让你从这个灵活的框架中汲取尽可能多的信息。书中包含了一些开发良好设计和解耦的Web 应用程序的最佳实践，介绍了Spring 框架中的Spring MVC 和Spring Web Flow，以及着重介绍利用Spring 框架和Spring MVC 编写Web ......一起来看看 《深入解析Spring MVC与Web Flow》 这本书的介绍吧!
