Flex Layout 排版 (CSS 格線佈局)

CSS排版有很多不同的排版工具，今天我想介紹FlexBox，也可以叫做flexible。Flexbox 是屬於one dimention ，也就去說你只有一個軸，你不是選擇用row or colomn。我會介紹以下的內容：

• 父元素/容器属性：
  • flex-direction:
    • row (default)
    • row-reverse
    • column
    • column-reverse
  • flex container(display):
    • flex
    • inline-flex
  • flex-wrap:
    • wrap
    • nowrap (default)
  • justify-content
    • flex-start
    • flex-end
    • center
    • space-around
    • space-between
    • space-evenly
  • align-item
    • stretch
    • lex-start
    • flex-end
    • center
  • Align-Content
    • flex-start
    • flex-end
    • stretch
    • space-around
    • space-between
• Flex 內元件屬性/子元素：
  • flex-item:
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex (縮寫)
  • order
  • align-self

part 1 基本FLEX相關知識

FlexBox 就是flexible Box，顧名思義就是彈性的盒子。早期我們在排版都是用float，但用起來沒有FlexBox好用。我們有幾個CSS layout，如float,display,Positioning, Flexbox, and grid等等。

Container and items 的差別

• Container: 就是外容器，你也可以想成它是盒子的外面，或是我喜歡稱他為Parent容器。
• Items: 就是內容器，你也可以想成它是盒子的裡面，或是我喜歡稱他為Child容器。
  我們來看一下圖你們更了解，這兩個差別:外面綠色就是container(外容器)，裡面橘色就是items()內容器)

這非常重要，這樣你才知道要用那一個容器的元屬性，然後也很好去記，卻步用去蓓背他。

AXIS軸

今天我想在這文章中介紹最常用到的git指令。我會介紹我最常用到的指令有：

• git init
• git add .
• git commit -m “message”
• git push
  以上是我最常用到的。我還想介紹一些關於git remote 等指令。

基本指令

1. git init 初始化 git

Step1: 建立一個資料夾如：$mkdir test

Step2: 進去目錄 cd test

Step3: 執行 git init就會初始化 git。如果你下 ls-al就可以看所有資料，會有一個 .git 隱藏檔

2. git add 把檔案進索引index

Step1: 建立檔案 touch hello.py
Step2: 編輯檔案

• (linux) vim hello.py
• (window) notepad hello.py
  就加 print("hello world")
  Step3: 把檔案加進索引 git add .
  Step4: 看git status git status
  他會顯示stage

GRID Layout 排版 (CSS 格線佈局)

• 現在我們在做網頁排版，最流行都是用 GRID and Flex。想要分享GRID相關設定和用法，在早期都是用position 或float等等來做排版。
• GRID 是二維CSS格線排版(row and colulmn)，反之Flex只能選用一維(row or colulmn)。

以下是所有GRID Properties ，我整理好分類，這樣才懂或記。如果有學會或用過GRID，會更好理解。

• Grid Container(parent Properties)
  • 1.display (enable grid propertis 啟動GRID)
  • 2.grid-template
    • grid-template-column
    • grid-template-row
    • grid-template
    • grid-template-areas
  • 3.grid-auto-flow
    • grid-auto-column
    • grid-auto-rows
    • grid-auto-flow

  • 4.gap
    • column-gap
    • row-gap
    • gap
  • 5.Alignment & Spacing
    • within grid cell
      • justify-items
      • align-items
      • place-items
    • within grid container
      • justify-content
      • align-content
      • place-content
• Grid item(Child Properties)
  • Grid-column-start
  • Grid-column-end
  • Grid-row-start
  • Grid-row-end
  • Grid-column (shorthand)
  • Grid-row (shorthand)
• Alignment item within Cell
  • Justify-self: alignment along the row axis
  • Align-self: alignment along the column axis
  • Place-self: shorthand for

Part 1: GRID 架構 Structure & Terminology

Container 和 Items 差別：

Grid Container: 盒子的最外層Parent
Grid items: 盒子內層Children
其實跟Flex一樣，都需要有container and items

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate