Blog Cover Image

@Mina Influence

Inspire you to have New thinking, Walk out your unique Road.

軟體開發 SWD

software-development

[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(5) | CSS(4) Layout 樣式、Flexbox、Grid 佈局

Posted on Jun 30, 2024

第五篇讀書計畫的主題還是 CSS。

正式進入 CSS 後，會花費大約一個半月的時間去刷這個網站的內容，所以接下來的文章都會是以這篇網站的內容學習為主。

若對 CSS 沒有太大興趣的話，可以直上替代方案: CSS Cheatsheet + 標準語法糖 - w3schools。

此系列的文章都是屬於本人先將網站內容消化過再總結紀錄，但如果內容太長的話...就會只挑自己覺得重要的跟要提醒的紀錄。

CSS 讀書項目

  • [ ] HTML/CSS
    • [x] [HTML] Cheatsheet
    • [ ] [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN (每天慢慢看可能也要個一個月吧，算很扎實)
    • [ ] [CSS(替代方案)] Cheatsheet + 標準語法糖 - w3schools (如果對 CSS 沒興趣，可以直接這項簡單帶過)
    • [ ] [CSS] 搭配 Hackerrank 證照題目交互學習
    • [ ] [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
    • [ ] [CSS] 看 創意構想 有 2 個影片 (滿滿的知識)
    • [ ] (Pending) [CSS] 了解 Canvas, WebGL, SVG, CSS 3 階層樣式表 or three.js，了解一下就好，不用太深入
    • [ ] [Front-end] 簡單了解一些 CSS 框架 TailwindCSS, Sharon UI

詳請可參考完整讀書計畫目錄

Table of Content 內容

這篇文章的內容主要是講 CSS 的 Layout, Flexbox 跟 Grid。

此篇文章內容非常龐大，我大概是刷了好幾次才把他們看完，大概也 delay 了兩週左右，目錄的部分就看能不能用最直接簡單暴力的方式把重點節錄出來，有興趣直接點就好。

Layout

一個網頁的設計通常會是混用不同的 Layout。

通常 layout 會使用 css 的display屬性去設置，包含以下幾個常用的 layout。

display

  • inline
  • block
  • flex
  • grid

更多 layout: 參考TailwindCSS

Inline and Block spaces

這一小節是我自己加的，根據這個圖，我們能知道無論 layout 是 inline 或者 block，都有相對應的 space，如以下。

  • margin
  • border
  • div
  • padding
  • content

設計上 inline (就是橫向)、 block (區塊) 都有其對應的空間的屬性，如圖所示，所以當調整某個空間屬性 (margin, padding)，則會依據他的 display 去調整空間。

Flex & Grid

Flexbox 跟 Grid 在 Layout 佈局很常使用，尤其現代網頁特別的花俏以及許多需求，懂得運用這兩者 layout 將能做出排版更好的網站。

  • flex: 是一個一維(one-dimensional)的 layout，跨單個軸線(single axis)的佈局，可以是水平方向或垂直方向。
  • grid: 是一個和 flex 佈局相似的佈局方式，但他被設計成可以橫跨多個軸線 (也可以說是二維的 layout)

簡單的講一下怎麼使用這兩個 layouts

/* Flexbox */
.container {
  display: flex;
}

<!-- Flexbox -->
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
</div>

/* Grid */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

<!-- Grid -->
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <!-- ... -->
</div>

Flow layout

在來是一些其他的 layout。

  • Inline block
  • Floats
  • Multicolumn layout
  • Positioning

Position

這邊直接補充 Position 的內容，position 也是很常被使用的佈局，但他不是使用 display 設定，而是使用 position。

簡單介紹一下幾個常用的 position

  • Positioning
    • position: relative: 相對配置，1. 提供讓 absolute 內容作為定位基準。 2. 可以在某個區塊中將內容作位移擺放 (留有空間)
    • position: absolute: 絕對配置，能在某個區塊中將內容位移擺放 (無視空間)，初始的基準是整個網頁 (body)，除非使用 relative 重新定位。
    • position: fixed: 像是 header, navbar, sidebar, footer，要把某個區塊固定在某個位置就用這個佈局。
    • position: static
    • position: sticky

參考: position 屬性的基礎概念

根據參考的網站特別讀到，absolute 能使用 top, left, right, bottom 各種方式將內容擺放到想擺置的地方，但其實 relative 也有 top, left, right, bottom 屬性。我想根據這個網站來補充一些小特點。

1.position: absolute 絕對配置，如果沒有指定基準元素的話 (沒有使用 relative div 重新指定基準元素)，預設是以 body 元素 (整個視窗為基準)。

假設 body 是整個網站的視窗，那麼以下的 css 會使該 div 內容在整個網站的左上方。

.div {
  position: absolute;
  top: 0px;
  left: 0px;
}

但如果你是要內容以某個 div 為基準，飄在那個 div 上，你需要運用 position: relative 去定位那個基準點。

<html>
  <body>
    <div class="base">
      <!-- 想讓content以base div為基準 -->
      <div class="content">
        <div>
      <div>
  </body>

</html>


.base {
  position: relative;
}
.content {
  position: absolute;
  top: 0px;
  left: 0px;
}

2.position: relative 相對配置，這邊來說說一些我自己本人覺得是 relative 的盲點 (就是我運用時沒學到的)。

relative會被運用在兩個點：

  • 設定絕對配置( position: absolute )的基準元素時
  • 希望元素偏移重疊 or 指定圖層上下順序且同時保留原本的空間時

前者是我在上面示範過的，如果你希望某個 content 能 absolute 在另一個 div 的基準點上 (而不是 body)，我們需要為那個 div 設置 position: relative，重新設定基準點。

後者是其實 relative 也能使用 top, left, right, bottom 將內容擺放不同的區域，但與 absolute 不同的差別是: relative 會保持原有的空間，在當下個空間做位置的偏移。而absolute則會不會保留空間，直接浮在內容的上方，所以若下方原本有其他內容，則會直接往上移把原本的空間佔去

詳細的範例圖，請參考網站。

Note: 只能說早期我並不覺得 relative 有什麼作用，就是加了好像也跟沒加沒什麼關係，但後來發現正是因為某些場合不需要 relative 但我加了造成某些 css 的錯誤，這樣看起來我本身許多專案的 code，如果不需要用到 relative 的場合就儘量拿掉比較好。

Flexbox

Flexbox 是一個設計 sidebar 的設計模式。彈性的佈局模式 (Flexible Box Layout Model) 設計為一維陣列的內容，能在這一維陣列中擺放不同尺寸的內容，然後為他們調整合適的空間跟佈局。

列舉一些使用 flex layout 達成的效果:

  • 可以佈局為一行水平的 row 或垂直的 column。
  • 依據 writing mode 改變顯示方向
  • 通常初始值為單行(一維)，但可以用 wrap 將內容切成多行。
  • 在 layout 中，Items 可以在視覺上被重新排行或調換順序 (但要注意邏輯沒變)
  • layout 中的空間能被彈性調整，能根據 items 跟 flexbox 設置的 div 調整空間。
  • 在被 wrapped 切成多行的 flex layout 中，Items 之間或周圍的空間可以用 Alignment properties 去調整。
  • Items 也能在跨軸 (cross axis) 中被調整空間。

Flexbox 主要是一維陣列，那他的概念有

  • main axis (主軸)
  • cross axis (跨軸)

在水平方向時，主軸就是水平方向、一維內的 items 或內容就是呈現水平方向擺放，而跨軸就是垂直方向，如果你需要調整空間或者使用到一些額外擺放屬性 (align)，就會動到跨軸。

關於跨軸的運用，當你使用 wrap 屬性將內容切成多行時，或者能使用 align 屬性來在在跨軸安排更多的空間或者佈置內容的擺放。

Creating a flex container (display: flex)

創造一個 flexbox 佈局，你需要先在一個 div 中設置 display: flex。接著在這個 div 中，加入更多 divs (不同的 Items)

如果你沒有設置其他屬性，那麼以下是初始值:

  • Items 會呈現單行的 row
  • 不會被 wrap (就是超出就超出，不會被切行)
  • Items 不會填滿 container
  • Items 會在 container 的 start 位置

Controlling the direction of items (flex-direction)

兩種方式能調整 flex 的方向：

  • flex-direction: row, row-reverse, column, column-reverse
  • writing-mode and direction

你可以透過 flex-direction 決定這個 flexbox 的方向是 row 還是 column。或者透過設定 writing-mode 更改方向。

但使用 row-reverse 跟 column-reverse 要注意，有的時候他會造成一些問題，比方說他是視覺上的將 div 顛倒，但並不是邏輯改變了，如果有賦予一些邏輯的計算跟函式，要多測試幾次驗證。

除了使用 flex-direction 設定 flex 的方向外，還能使用 writing-mode 和 direction 屬性去設置。

  • direction: rtl (從右到左), ltr (從左到右)
  • writing-mode: horizontal-tb, vertical-lr, vertical-rl

Wrapping flex items (flex-wrap)

如果想要超出的 flex 內容自動換行，可以使用 flex-wrap 屬性達成。initial 的值是 no-wrap，就是不自動換行。

當設置換行時，設定以下的 css 就可以自動把內容換行，而不會讓他超出 div

.container {
  display: flex;
  flex-wrap: wrap;
}

再來介紹一個縮寫的屬性 -> flex-flow，則是 flex-direction + flex-wrap的縮寫，可賦予一～兩個值定義 flex 的方向以及要不要 wrap。

參考屬性表

/* flex-flow：<'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow：<'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow：<'flex-direction'> 和 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

.container {
  display: flex;
  /* column方向、需要被wrap */
  flex-flow: column wrap;
}

Warning: Using order has the same problems as the row-reverse and column-reverse values of flex-direction. It would be very easy to create a disconnected experience for some users. Do not use order because you are fixing things being out of order in the document. If the items logically should be in a different order, change your HTML!

總之就是類似這類型視覺上的順序變化，邏輯端是沒有改變的，所以使用時要多注意。

Controlling space inside flex items (flex-grow, flex-shrink, flex-basis and flex)

通常在沒有設置任何有關縮放屬性的值時，flex 裡的 div 會根據其內容做縮放 (也就是內在尺寸 Intrinsic Sizing)，所以如果在一般情況下，有三個 div，很有可能 3 個 div 都擠在 main axis 的左方，右方留很大一個空間。

為了能夠更自由的調整縮放這些內容，有幾種方式:

  • flex-grow: 可以指定某個 div 是否寬度延展到最大 (1) 或 不要做延展 (0)
    • flex-grow: 1; -> items can grow larger than their flex-basis.
    • flex-grow: 0;
  • flex-shrink: 可以指定某個 div 縮短它的寬度，可比原本設定的寬度(flex-basis)更窄(1) 或 不縮短它的寬度 (0)
    • flex-shrink: 1; -> items can shrink smaller than their flex-basis.
    • flex-shrink: 0;
  • flex-basis: 可以指定某個 div 他的寬度的大小 (直接賦予值)
    • flex-basis: [值];
    • flex-basis: 0; -> items have a base size of 0.

縮寫 - 透過 flex 屬性直接指定寬度:

你可以透過 flex 的屬性，一次性的賦予三個值，其格式為此：

flex: [flex-grow] [flex-shrink] [flex-basis];

一樣是針對 display:flex 內各個 div 賦予。

.item1 {
  flex: 1 1 auto;
}

<div class="flex">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

以上的範例就是 item1 的 div，其 flex-grow: 1, flex-shrink: 1 及 flex-basis: 0%

你可以參考 TailwindCSS去理解。

Reordering flex items

.container {
  display: flex;
  gap: 1rem;
}

.box:nth-child(2) {
  order: 2;
}

.box:nth-child(3) {
  order: 3;
}

可以用 order 這個屬性來改變 div 的排序位置，但跟 reverse 一樣要小心運用。

Flexbox alignment overview (alignment-overview)

再來是有三個方式可以在 flex layout 中分佈與調整空間。

  • justify-content: 調整 main axis 的空間
  • align-content: 調整 cross axis 的空間
  • place-content: 同時設置上面兩個屬性的簡寫，可以設置 1~2 個

然後調整 align (cross axis) 空間的屬性:

  • align-self: 在 cross axis 調整單個 div or item.
  • align-items: 在 cross axis 調整 一群組的 div 或者 items - 整排

口訣: 如果跟調整 main axis 有關的空間就使用 justify- 開頭，如果調整跟 cross-axis 有關的空間就使用align-開頭的屬性。

Distributing space on the main axis (Justify-)

調整 main axis 空間的屬性叫 justify-，justify 的初始值為 flex-start

.container {
  display: flex;
  /* 也就是所有的flex div都擠在左邊 */
  justify-content: flex-start;
}

justify-content 有許多值，這邊列舉幾個

  • flex-start: 全擠在左邊
  • flex-end: 全擠在右邊
  • center: 至中
  • space-between: 均等空間分散

參考網站: TailwindCSS/justify-content

換成 flex-direction: column，也是差不多的道理，只是變成直立。

  • flex-start: 全擠在上面
  • flex-end: 全擠在下面
  • center: 至中
  • space-between: 均等空間分散

Distributing space on the cross axis (Align-)

調整 cross axis 空間的屬性叫 align-，但調整的 align 屬性有兩種。

如果 justify-content 的初始值是 flex-start，那 align- 的初始值是 stretch。

基本上值都差不多，只需要搭配圖像意會一下，align 就是在 cross-axis 調整單個或整排的上下空間 (往上浮、至中、往下浮或者其他..)。

如果是 flex-direction: column，其 cross-axis 就會變成左右的空間。

是需要一點時間了解。

The place-content shorthand (place-content)

就是用 place-content 這個屬性可以一次賦予調整兩個 axis 的屬性。

place-content: [align-content] [justify-content]
/* 如果只設定一個值，那代表這個值會同時實現兩個空間的調整，請注意使用 */
place-content: [值]

Margin auto

如果你在 flexbox 樣式裡，你想把一個 div 刻意推遠，那麼你可以使用 margin: auto 來達成這個效果，將 margin: auto 下在你希望那個被推遠的 div 樣式上。

How to center an item vertically and horizontally

使用下面的樣式，就能把一個 div 完全置中。

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

本來沒有要很詳細寫 Grid 的內容，因為當初第一次看完的時候，覺得內容很多又不懂。

但神奇的是，靜下心來再刷第二次時，就突然看懂了，一邊讀一邊做筆記。

阿不過，就在我進入後半邊後，又開始不懂了，隨便寫了，那個...概念上就是那些要讀 XD

  • Grid: 二維的佈局，合併外在尺寸跟內在尺寸的運用
  • Flexbox: 一維的佈局，比較彈性去分佈跟調整佈局內 Items 的大小跟空間

當你創一個 grid 佈局時，你會同時創立 rows 跟 columns

Grid Terminology (Basic terms of Grid)

關於 Grid 的專有名詞就保留英文吧，比較好懂。

  • Grid Terminology
    • Grid lines: A grid is made up of lines.
    • Grid tracks: A track is the space between two grid lines. A row track is between two row lines and a column track between two column lines.
    • Grid cell: A grid cell is the smallest space on a grid defined by the intersection of row and column tracks. It's just like a table cell or a cell in a spreadsheet.
    • Grid area: Several grid cells together.
    • Gaps: A gutter or alley between tracks.
    • Grid container: apply with display: grid and create grid layouts
    • Grid item: A grid item is an item which is a direct child of the grid container. (several Divs under the container)

Rows and columns

  • Intrinsic sizing keywords
    • min-content
    • max-content
    • fit-content()
  • The fr unit
  • The minmax() function
  • repeat() notation
  • auto-fill and auto-fit
.container {
  display: grid;
  /* 橫排 定義 3個不同的單位寬的格子 */
  grid-template-columns: 5em 100px 30%;
  /* 直排 定義 第一排高 200px, 第二排自動 */
  grid-template-rows: 200px auto;
  gap: 10px;
}

用 grid-template-columns 跟 grid-template-rows 來定義 grid 內容。

Intrinsic sizing keywords

就是當你沒有刻意定義長寬高的值時，他會根據實際的內容去縮放格子(grid or div)的大小。這邊提供三個函式根據內在尺寸去縮放每個 grid 格子的大小。

  • min-content: 就是將 grid 格子縮到最小/剛剛好貼合內容的大小，也就是說假設這個格子裡有五個英文字，那他的格子大小就是剛好擠下這 5 個字，或者盡可能地縮小，但不會小到連字都不見。

  • max-content: 就是會將 grid 格子放到最大，比方說個三個格子各有 5, 7, 10 個字，那 grid 就會縮放到比原本字數更寬更高的尺寸。

  • fit-content(): 就是可以下一個函式裡面擺想要指定的固定寬高值，格子就會固定那個值。比方說 fit-content(10em) ，那格子的尺寸就不會超過 10em。

The fr unit

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

fr 單位有點像 flex: auto，這個單位給予格子更靈活的長度，不是實際定義格子的尺寸，而是定義格子占幾格方格的尺寸 (隨著 container 的寬高去靈活彈性變化) 。

比方說 橫三排(columns) 1fr, 1fr, 1fr，也就是 3 格，但如果把第三格改成 2fr，那麼橫排的寬/4，前面 2 個 column 寬個佔1/4寬、第 3 個 column 寬佔2/4寬。

// 原本 1fr, 1fr, 1fr
|     |     |     |
// 當設為 1fr, 1fr, 2fr
|    |    |       |

The minmax() function

可以運用一個 minmax()去定義最小跟最大的尺寸，比方說 minmax(auto, 1fr)就是最小隨著內容而定，但最大不會超過 1 個 fr 的尺寸。

The repeat()

假設今天你要寫好多好多的格子，是不是就要這樣寫？

.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(
      0,
      1fr
    ), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(
      0,
      1fr
    ), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr);
}

那寫 100 個時，該怎麼辦呢？難道真要寫 100 行？所以就有了 repeat 這個函式，改成以下這樣就能產生 12 個格子。

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.container {
  display: grid;
  grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill and auto-fit

有點難解釋，先發一個參考的網站

簡單來說

  • auto-fill: 如果你給予他固定的 size，他就產固定 size 的格子，如果剛好目前的 container 第一排可以足夠擺 5 個固定 size 的格子，那他就會擺滿 5 個，第二排只需要 2 個格子，那就是 2 個固定 size 的格子其他留空。
  • auto-fit: 你雖然給他固定的 size，但如果你寫的 divs 不夠，比方說第二排只有 2 個格子，那這個屬性會特別延展這兩個格子的 size，不按照原本定好的，而是自動延展至符合 5 個格子的寬度。

Auto-placement

  • Placing items in columns: 預設
  • Spanning tracks
  • Filling gaps

就是說上面介紹了 Grid 的基本概念以及如何產生 Grid 後，接下來的章節就會跟空間、擺放之類的相關知識。

應該也就是我開始感到看不懂且痛苦的地方了 Q.Q

Placing items in columns

基本上沒有設置任何方向的話，預設的 grid 排盤是依據 row 的方向，但由於實際運用場景會有不同的狀況以及不同的書寫方向(就是日文、英文、阿拉伯文跟其他)，所以可以透過兩種方式變更 grid 排盤方向。

  • grid-auto-flow: column: 特地將屬性設為 column，那 grid 就會按照 column 方向渲染
  • writing-mode: 會根據設定的 writing-mode 變換 grid 顯示的方向
    • writing-mode: horizontal-tb (水平)
    • writing-mode: vertical-rl (直立右上開始渲染到左下)
    • writing-mode: vertical-lr (直立左上開始渲染到右下)

詳細 grid 怎麼變化就看網站範例

Spanning tracks

可以使用 span 來設定你的 grid 延展空間。

  • grid-row-end
  • grid-column-end
.item {
  grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

.item {
  grid-column: auto / span 2;
}

illing gaps

運用 grid-auto-flow 屬性 可以將 grid 自動填補可填補的空間。

參考範例

Placing items

  • Placing items
    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
  • Stacking items
  • Negative line numbers

在最一開始的基礎概念是說 Grid 基本上是以 line 組成，所以是可以透過指定 line 的位置來擺放 Grid。

有四個屬性可以設定

詳細可以點擊連結裡的網站內容，有圖像比較好理解。

基本上可以透過這四個屬性去設定 Grid 要在哪個 line 開始渲染或者渲染到哪條 line 結束。

當然也有更簡短的寫法：

Stacking items

再來是可以利用 z-index 去堆疊 Grid ，z-index 就是可以決定元素的 z 軸位置 (視覺上來看就是前跟後)，前面運用很多不同的 span 延伸空間、運用 place items 去決定從哪條 line 渲染，而這個小章節是指可以用 z-index 達到 grid 格子的堆疊視覺效果。

這個呢，就只能多練習了，用文字感覺也很難達到解說。

Negative line numbers

  • explicit grid 明式格線
  • implicit grid 暗式格線

Use grid-template-rows and grid-template-columns to create what is known as the explicit grid (明式格線). - 基本上就是當你建立格線時，格線自己也建立了暗式格線(implicit grid)。

你能在暗式格線內透過 grid-auto-rows 與 grid-auto-columns 屬性，給軌道定義一套大小。

Named grid lines

你能為 grid line 格線命名。

.container {
  display: grid;
  grid-template-columns:
    [main-start aside-start] 1fr
    [aside-end content-start] 2fr
    [content-end main-end]; /* a two column layout */
}

.sidebar {
  grid-column: aside-start / aside-end;
  /* placed between line 1 and 2*/
}

footer {
  grid-column: main-start / main-end;
  /* right across the layout from line 1 to line 3*/
}

Grid Template Areas

也能幫某個領域的 grid 命名，使用 grid-area去命名。

header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

footer {
  grid-area: footer;
}

然後運用在 container 中

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "header header header header"
    "sidebar content content content"
    "sidebar footer footer footer";
}

有某些規則:

There are a few rules when using grid-template-areas.

  • The value must be a complete grid with no empty cells. (不能有空白的單元格)
  • To span tracks repeat the name. (重複名稱可以延伸軌道)
  • The areas created by repeating the name must be rectangular and cannot be disconnected. (重複名稱的領域必須是矩形，而且不能斷開)

參考內容

Shorthand properties

Shorthand properties (就是某些屬性可以縮寫)

  • grid-template
  • grid

Alignment

感覺這樣看下來，比起 flex，grid 在很後面的地方才開始介紹 Alignment。

基本上在 flexbox 學習到的 align 內容也都適用於 grid。

我們再複習一次

  • justify- 開頭用於 inline axis，方向會根據設置的 writing mode 改變。

  • align- 開頭用於 block axis，方向會根據設置的 writing mode 改變。

  • justify-content and align-content: distribute additional space in the grid container around or between tracks. (主要是分配散佈在 grid container 或格子與格子中間的空間) (Note: 如果你的 container 裡沒有空間可以調整，則不會有變動)

  • justify-self and align-self: are applied to a grid item to move it around inside the grid area it is placed in. (則是調整某個 grid 的位置) (Note: 初始值是 stretch，所以基本上 grid 格是填滿的，但如果 item 是照片或其他有固定尺寸的物件，那值會變成 start)

  • justify-items and align-items: are applied to the grid container to set all of the justify-self properties on the items. (則是調整某群 grids 的位置)

好吧，承認後面有點小亂，因為想趕快結束這篇章，而且半夜 2 點了 Q.Q。

但關於 Grid 的內容比較多，我想接下來幾天我應該還是會多花點時間複習。

本節小課程 - Portrait 和 Landscape，談螢幕方向

接下來要談一下 Portrait 和 Landscape，是我在寫公司專案時遇到的知識。

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

在寫 css 時，一定有遇過 media，當你的服務需要在不同裝置呈現，甚至除了制定的寬度大小以及要符合直立與橫向設計時，這時候就會需要用到 orientation 這個屬性。

根據參考網站

  • 直式螢幕稱為「Portrait」
  • 橫式螢幕「Landscape」

在電腦上比較不會有這個問題，但是當手機端時就會遇到類似的問題。也就是說當你的服務需要手機橫著操作時 (參考網站舉的例是遊戲類的)，那你的 UI/css 呈現都會不同，這需要針對並特別設計跟撰寫，不是寫一行 css 就搞定的。

另外某些例外是，在某些直立 (Portrait) 會有部分功能被隱藏，因為不夠顯示，但是當轉橫式(Landscape)時，由於螢幕跟空間夠大，某些功能就可以顯現出來，這些特別的設計也會使用到 orientation 屬性去特別撰寫。

那這堂小課程就到這，主要是因為我很少見到這個寫法，當初在公司專案裡的 css 檔案中有幸遇見不熟悉，所以特別在此篇讀書計畫提出。

詳細就請前往參考網站拜讀囉～

參考網站: Portrait 和 Landscape，談螢幕方向

ABOUT ME

Author Profile

嗨，我是Mina. 一個ENTP奇女子，時常可以隨手拈來創意的Idea，正向､ 活躍且浪漫。是軟體開發工程師､ 部落客，還是多語學習者，喜歡去探索不同的文化跟發明些東東。

@MinaYu Signed

BLOG STATS

Visits:

Visitors:

CATEGORY

GALLERY