内容简介：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 之改變顯示順序》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
