Try   HackMD

排版方式(2)：flex大顯神威

tags: NKFW 網頁設計入門

格式

❓如果使用上有值得思考的問題，就寫在此處

⚠️注意(觀念澄清)

啟用方式

在container上設定display: flex，下一層的標籤會變成flex物件。

先上範例，再來解釋flex物件可以有甚麼屬性。

  • CSS 
    ​​​​.container{
​​​​    width: 960px;
​​​​    display: flex;
​​​​    justify-content: center;
​​​​}
  • HTML 
    ​​​​<div class="container">
​​​​    <div class="column">
​​​​        Lorem...
​​​​    </div>
​​​​    <div class="column">
​​​​        Lorem...
​​​​    </div>
​​​​    <div class="column">
​​​​        Lorem...
​​​​    </div>
​​​​</div>

  • 目前可以看到，display: flex，加上justify-content: center會讓內容置中。

  • CSS設定都要寫在container裡面（就是你要控制的標籤的上一層），才會有效

什麼是主軸&次軸

瞭解flex可以做哪些設定之前，我們先來建立一些觀念

  • 由flow-direction決定資料的方向
  • 資料排列的方向是主軸，另一個垂直的方向就是次軸

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

常用設定

  • flow-direction: 排版方向
  • justify-content: 控制主軸
  • align-items: 控制次軸
  • align-content: 控制次軸

範例

底下是一個flex排版的範例，請大家自行取用











































<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html{
            width:100%;
            height:100%;
        }
        .container{
            width: 800px;
            height:800px;
            background-color:lightskyblue;

            /* flex設定 */
            display: flex;
        }
        .column{
            font-size: 50px;
            width: 140px;
            height: 140px;
            border: 2px dashed blueviolet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            A
        </div>
        <div class="column">
            B 
        </div>
        <div class="column">
            C
        </div>
    </div>
</body>
</html>

排版方向：flex-direction

控制排版的方向(也就是主軸的方向)，以及排版的順序(也就是主軸的起始點&終點)。主要有以下幾種屬性值：

  • row：水平排列
  • column：垂直排列
  • row-reverse：水平排列+順序倒過來
  • column-reverse：垂直排列+順序倒過來

flex-direction: row








<style>
.container{
    /* flex設定 */
    display: flex;
    flex-direction: row;
}
</style>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

flex-direction: column








<style>
.container{
    /* flex設定 */
    display: flex;
    flex-direction: column;
}
</style>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

flex-direction: row-reverse








<style>
.container{
    /* flex設定 */
    display: flex;
    flex-direction: row-reverse;
}
</style>

flex-direcion: column-reverse








<style>
.container{
    /* flex設定 */
    display: flex;
    flex-direction: column-reverse;
}
</style>

控制主軸： justify-content

justify-content負責控制主軸的排版

如果設定flex-direction: row(設定主軸為水平方向)，則justify-content就會控制在水平方向上的排版。

justify-content主要有以下幾種屬性值

  • start：聚集在主軸的起點
  • center：聚集在主軸的中間
  • end：聚集在主軸的終點
  • space-around：將margin分配到標籤的兩側
  • space-between：將margin分配到標籤的中間
  • space-evenly：使margin等寬

justify-content: start








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: start;
}
</style>

justify-content: center








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: center;
}
</style>

justify-content: end








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: end;
}
</style>

justify-content: space-around








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: space-around;
}
</style>

justify-content: space-between








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: space-between;
}
</style>

justify-content: space-evenly








<style>
.container{
    /* flex設定 */
    display: flex;
    justify-content: space-evenly;
}
</style>

Project1

做一個三欄版面吧

  • 裡面放甚麼都可以

控制副軸-單行: align-items

jalign-items負責控制副軸的排版

如果設定flex-direction: row(設定主軸為水平方向，副軸則為垂直方向)，則align-items就會控制在垂直方向上的排版。

align-items主要有以下幾種屬性值

  • start：排列在副軸的起點
  • center：排列在副軸的中間
  • end：排列在副軸的終點
  • stretch：伸長container底下的標籤在副軸方向上的長度

align-items: start








<style>
.container{
    /* flex設定 */
    display: flex;
    align-items: start;
}
</style>

align-items: center








<style>
.container{
    /* flex設定 */
    display: flex;
    align-items: center;
}
</style>

align-items: end








<style>
.container{
    /* flex設定 */
    display: flex;
    align-items: end;
}
</style>

align-items: strech











<style>
.container{
    /* flex設定 */
    display: flex;
    align-items: strech;
}
.column{
    height: auto;
}
</style>

flex的特性 小結

  • 預設flex-direction: row
  • 預設justify-content: start
  • 預設的flex物件會等高

Project2

做一個滿版背景，中間放文字區塊

  • 用flex使文字區塊置中
  • 做一些簡單的美化看起來讓他好看一點

⚠️注意!
如果父層容器沒有任何高度，是無法垂直置中的!

Project 3 (Optional)

把先前做過的自我介紹做一些小改造：

  • 畫面左邊1/3的部份放自己的個人簡介
  • 畫面右邊2/3的部份放剩下的內容
  • 使用flex來控制這兩個區塊

❓為什麼我切出來的版面兩個會一樣高呢
要怎麼做才會讓他們恢復到自身的高度
試著自己上網查相關的資料

Last changed by 
 
NCU NKFW
1
470

Read more

ESP32進階使用方法-第六周

❓如果使用上有值得思考的問題，就寫在此處

May 4, 2024
如何在ESP32上架設網站-第五週

先來復習第一二周上課的内容

Apr 27, 2024
Final Project-第六周

今天最後要交個你們的就是六周上課的集大成!那我們要交什麽呢？

Apr 24, 2024
第六周教學内容綱要

教會學員如何使用ESP32實作以下内容

Apr 3, 2024
Read more from NCU NKFW
Published on HackMD