---
# System prepended metadata

title: Astro課程 0706 - CSS(Day3)
tags: [' flexbox', astro, ' css']

---

---
title: Astro課程 0706 - CSS(Day3)
tags: astro, css, flexbox
---

# 0706 - CSS(Day3)

[FLEXBOX FROGGY](https://flexboxfroggy.com/#zh-tw)
[Flex屬性](https://wcc723.github.io/css/2017/07/21/css-flex/)
[[第六週] CSS - 跟著 🐸🐸 學 Flex 排版](https://yakimhsu.com/project/project_w6_CSS_flex.html)

## 時間軸
10:35 reset
10:55 link : 引入外部的css
11:35 box model
12:00 四種box
13:40 outline
13:55 flex
15:25 交叉軸

## CSS reset
所有瀏覽器都有預設值的css，但是各家瀏覽器頁面長得都不一樣
用`reset`覆寫後就會長得一樣

Amos推薦的reset檔：[Meyerweb](https://meyerweb.com/eric/tools/css/reset/)

CSS: 可以直接從這一份來改
```
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
```

業界通常使用另一個版本的css reset

[Normalize.css](https://necolas.github.io/normalize.css/latest/normalize.css): 把有差異的地方改成一樣，其他不動

`em`要重新換算成像素有點麻煩
所以不喜歡的地方可以自己修改

```
 html {
    line-height: 1; /* 原本是1.15 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
h1 {
    font-size: 2em;
    margin: 0; /* 原本是 0.67em 0; */
}

ul, ol {
    outline: 1px solid #f00;
    margin: 0 0 20px; /* 把margin統一設在下面*/
}
```

Q. 改了css，但是網頁沒有動，要怎麼辦？
1. 確認檔案是否正確 （瀏覽器頁面，按右鍵`檢查`）
2. 確認語法是否有套用 （檢查語法和優先權）註解掉可能有問題的行數
- `!important`是`屬性`的優先權，不是`選取器`的優先權
-  權重優先的`選取器`，使用瀏覽器檢查時，程式碼會出現在相對上方的位置
3. 也有可能是cache的問題

# box model

1. 佔據的空間（這個地方是我的）
`content + padding + border + margin`

2. 可見範圍（可見尺寸）
`content + padding + border`
(margin 沒有背景顏色)


四種box:
content box
padding box
border box
margin box

## `box-sizing` 控制寬跟高的作用對象

有兩種`box-sizing`的屬性：
`content-box` 往外加 (預設)
`border-box` 往內縮

```
    div {
        width: 200px; 
        /* 內容寬度 */
        
        background-color: grey;
        border: 5px solid red;
        padding: 20px;
        /* 內容以外的寬度 */
        
        box-sizing: border-box;  
        /* 往內縮，content+padding = 200px */

        /* margin: 25px; */
        /* 和其他物件的距離 margin 不會有背景色 */
    }
```
![](https://i.imgur.com/JenLdzV.png)
即時更新Responsive(響應式網站)快速鍵: `command` + `0`


英文：

文字強迫換行，英文字會被切一半 `word-break: break-all;`
依單字換行 `word-wrap:break-word;`
死都不換行 `white-space:nowrap;`

[Ref](https://www.puritys.me/docs-blog/article-31-CSS-%E8%AA%9E%E6%B3%95%EF%BC%8C%E6%96%87%E5%AD%97%E6%8F%9B%E8%A1%8C%EF%BC%8C%E5%BC%B7%E8%BF%AB%E4%B8%8D%E6%8F%9B%E8%A1%8C%E3%80%82.html)


```
<div>
  word-break: break-word;
</div>
```
螢幕顯示為：
![](https://i.imgur.com/M4iKRkp.png)


## outline 和 border的不同

box-sizing:outline不佔空間 (版面reset之後上方和右方的outline線條就不見了)
對畫面不會造成影響，可以拿來做檢查，看排版的位置

border會自己把自己加粗 

`::` before [(偽元素)](https://ithelp.ithome.com.tw/articles/10222534)
`:` nth-child [(偽類)](https://ithelp.ithome.com.tw/articles/10227216)

# margin 
`margin: auto` 把剩餘空間拿來做分配 （置中）
`margin-left: auto` 把剩餘空間拿給左側 （靠右）

有auto的地方就會拿到一份空間

# flex
對子層物件做橫排

## `justify-content` 主軸資料的走向 (main-axis)
（希伯來文和阿拉伯文是由右到左，其他大部分語言是由左到右）

`justify-content: flex-end` 對齊資料尾端
`justify-content: flex-start` 對齊資料起始端


## `flex-direction` 交叉軸 (cross-axis)

`flex-direction: row;` 預設
`flex-direction: row-reverse;`
`flex-direction: column;`
`flex-direction: column-reverse;`

## 分佈 （用`justify-content`做剩餘空間的分配）
`justify-content: space-between` 主軸的兩側 
`justify-content: space-around` 主軸上每個物件的兩側
`justify-content: space-evenly` 完全均分


注意
* `justify-content`可以跟margin-left, margin-right搭配or使用
* `justify-content`在不換列的情況很好用，但是物件太多而需要換行時，我們可以把多餘的空間給父層padding往內縮進去

`(960- (400+20)*2 ) / 2 = 60`

所以設定左右padding為60px: `padding: 0 60px`

```
 <style>
     * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box {
        width: 960px;
        height: 1000px;
        margin: auto;
        display: flex;
        /* outline: 10px solid red; */
        padding: 0 60px;
        flex-wrap: wrap; 
        /* 多個圖片換行 */
    }

    .item{
        width: 400px;
        margin: 10px;
        /* flex-shrink: 0;  */
        /* 收縮的預設值是1，收進去到父層最大值 */
    }     

    .item img{
        width: 100%
    } 
    </style>
```

注意：99%的版面壞掉，都是尺寸沒算對

## 彈性的列 `align-items`

多數的人不會在父層設定高度～所以會有彈性的列
（有剩餘的空間，拿來做分配）

`align-items: flex-start` (靠彈性列的首端)
`align-items: center` (在彈性列裡置中)
`align-items: flex-end` (靠彈性列的尾端)

這個語法類似在交叉軸上使用`space-around`的感覺

```
    .box {
        width: 1000px;
        height: 1000px;
        margin: auto;
        background-color:lightgray;

        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        align-items: center;
    }
```

## 針對彈性的列上所有項目去做對齊`align-content`

決定行與行的之間距離有多遠
(控制彈性列的位置)

## "比讚"手勢
可以用"比讚"手勢來輔助辨識主軸/交叉軸、向上靠齊/向下靠齊
![](https://i.imgur.com/24rX3if.png)


# flex語法總整理

* `flex-wrap`
    * nowrap (預設)
    * wrap
    * wrap-reverse

* `flex-direction` 定義主軸的方向
    * row
    * row-reverse
    * column
    * column-reverse

* `flex-flow` : `flex-direction` 和 `flex-wrap`的縮寫
* `order` 決定元素的順序

* `justify-content` 將flex元素和主軸對齊
    * flex-start
    * flex-end
    * center
    * space-around
    * space-even

* `align-items` 在交叉軸上對齊多個元素
    * flex-start
    * flex-end
    * center
    * baseline
    * strech (預設)

* `align-self` 在交叉軸上對齊單一元素
    * flex-start
    * flex-end
    * center
    * baseline
    * strech (預設)


* `align-content` 當交叉軸有多餘的空間，對齊容器內的軸線
    * flex-start
    * flex-end
    * center
    * space-around
    * space-even
    * strech (預設)



## 青蛙遊戲

青蛙第24關（大魔王關）

重點：使用`wrap-reverse`

解法：
```
flex-flow: column-reverse  wrap-reverse;
justify-content: center;
align-content: space-between;
```

## 設定 `萬用選取器 reset` 的Tab一鍵補完
1. 把要設定的語法寫在[Snippet](https://snippet-generator.app/)

例如：
```
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
```

產生一份給vscode的設定檔
```
"*": {
    "prefix": "*",
	"body": [
		"* {",
        "  margin: 0;",
        "  padding: 0;",
        "  list-style: none;",
        "}"
    ],
    "description": "萬用選取器 reset"
}
```

2. VScode: `command` + `shift` + `p`

輸入關鍵字`snippet`，打開`preference`：設定`css.json`
把剛剛產生的Snippet檔貼入即可！