CSS Flexbox 之改變顯示順序

栏目: CSS · 发布时间: 5年前

内容简介：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

CSS Flexbox 之改變顯示順序

Navigation bar 顯示在最下方。

CSS Flexbox 之改變顯示順序

當寬度變小時，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 之改變顯示順序》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

CSS Flexbox 之改變顯示順序

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web前端开发最佳实践

党建 / 机械工业出版社 / 2015-1 / 59.00元

本书贴近Web前端标准来介绍前端开发相关最佳实践，目的在于让前端开发工程师提高编写代码的质量，重视代码的可维护性和执行性能，让初级工程师从入门开始就养成一个良好的编码习惯。本书总共分五个部分13章，第一部分包括第1章和第2章，介绍前端开发的基本范畴和现状，并综合介绍前端开发的一些最佳实践；第二部分为第3-5章，讲解HTML相关的最佳实践，并简单介绍HTML5中新标签的使用；第三部分为第6-8章，介......一起来看看《Web前端开发最佳实践》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密

MD5 加密工具