CSS Flexbox 之改變顯示順序

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

内容简介: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-directioncolumn ,表示 由上而下 顯示。

Flexbox 不是只能用在 <div> ,任何一個 HTML element 都可視為 container 使用 flexbox

25 行

@media only screen and (min-width: 600px) {
  .main-nav {
    order: 1;
  }
}

使用 RWD 的 media query,當 width 大於等於 600px 時,將 main-navorder 設定為 1

每個 flexbox 的 item 預設 order0

  • order 可設定為 正數負數 ,大於 order 則顯示在 下方 ,小於則顯示在 上方
  • order 相等時,則依 HTML 順序顯示

Vuetify 以 600px 為 break point,大於等於 600pxsm ,視為 small to medium tablet ,也就是 tablet 以上時, order1 ,navigation bar 會顯示在最下方,否則為 small mobile phone,此時 order 為 default 值 0 ,如原本 HTML 順序顯示在 Header 之下


以上所述就是小编给大家介绍的《CSS Flexbox 之改變顯示順序》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

游戏编程入门

游戏编程入门

莫里森 / 人民邮电出版社 / 2005-9 / 49.00元

本书介绍如何设计和构建自己的计算机游戏。书中从零开始,引导读者开发一个“即插即用”的游戏引擎,并基于该引擎,循序渐进地开发7个完整的游戏。全书分为8个部分,共24章,内容包括游戏编程基础知识、如何与玩家交互、使用子画面动画、使用声音和音乐、高级动画、游戏人工智能、增添游戏的趣味性和附加练习。此外,在随书光盘中提供有附录,包括C++语言和windows编程的入门指导、游戏开发工具以及游戏图形创建的介......一起来看看 《游戏编程入门》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具