# Card
###### tags: `Component`
## 一 . 基本版型
### (一) . 成果圖
#### 1. 效果
- 有一個或多個卡片(通常為多個卡片)並行存在。
- 每一個卡片的內容為影像與內容。
- [https://codepen.io/rfbadgnh/pen/eYdBwwb](https://codepen.io/rfbadgnh/pen/eYdBwwb)

#### 2. 實作概論 : <span class="red">內外元件的包裹</span>
- 先看 ： 概念篇的內外元件包裹。
- 這個是一個彈性十足的版，其實沒有固定的做法，因為每次對卡片的要求都不一樣，主要是掌握以下的設計重點。
- $Point\ 1$ : 幾個卡片為一橫行。
- 卡片的使用多為多個一起使用。所以，卡片群外，應該要加上包裹器，設定卡片群的排版。
- 可以用外容器的flex和內元件的width實作。
- 或是直接grid設定。
- $Point\ 2$ : card的圖片是否滿版。
- 若圖片需要滿版，就要將內元件(圖片和內容)的間格留給內元件的屬性決定。
- $Point\ 3$ : card的內容是否滿版。
- 若圖片需要滿版下，內容也必須跟隨圖片滿版，且這時候內容通常需要一點間距，就要用內容的屬性設定。
#### 3. 實作內容 ：
- 卡片為3個一橫行的。
- 卡片需要一點邊框。
- 圖片需要滿版。
- 文字需要分成標題和內文
- 文字需要和卡片有一點間格。
- 標題和內文之間有一個bar隔開。

### (二) . 實作方法
- $step\ 1$ : 完成『卡片為3個一橫行』的要求。
- 此時```wrap```為外容器，```card```為內元件。
- 實作 ： 用```flex``` 在外容器的方式，完成可以橫向排列，可以換行。
- 實作 ： 用內元件的```width```屬性完成3個一列的要求。
- $step\ 2$ : 完成『卡片需要一點邊框』的要求。
- 加入```border```在卡片即可。

.card-wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 1%;
}

.card{
    margin:1.25%;
    width: 30%;
    border: 1px solid #ccc;
}

- $step\ 3$ : 完成『圖片需要滿版』的要求。
- 此時```card```為外容器，```card-img```為內元件。
- 實作 ： 內元件需要滿版，此時的外元件不可以有```padding```，內元件的``width``設為滿的。

.card{
    margin:1.25%;
    width: 30%;
    padding: 0;
    border: 1px solid #ccc;
}

.card-img{
    vertical-align: middle;
    width: 100%;
}

- $step\ 4$ : 完成『文字需要分成標題和內文』的要求。
- 第一層 ： ```card```為外容器，```card-img```和```card-content```為內元件。
- 第二層 ： ```card-content```為外容器，```card-header```和```card-body```為內元件。
- 實作 ： 對第一層，因為```card-img```已經滿版，所以```card-content``` 跟隨滿版。
- 實作 ： 再將```card-content```分成兩個class。

.card{
    margin:1.25%;
    width: 30%;
    padding: 0;
    border: 1px solid #ccc;
}

.card-img{
    vertical-align: middle;
    width: 100%;
}

.card-content{
    width: 100%;
}
.card-header{
    width: 100%;
    text-align: center;
}

.card-body{
     width: 100%;
     text-align: center;
}

- $step\ 5$ : 完成『文字需要和卡片有一點間格』的要求。
- 此時```card-content```為外容器，```card-header```和```card-body```為內元件。
- 實作 ： 要讓內外元件有間格，需要決定是用外容器的padding或內元件的maring或padding。
- 實作 ： 這邊先用外容器的padding，原因是可以讓後面的bar不要滿版，下一步就知道了。
- 到這裡其實就可以使用了，有了基本的卡片形式。

.card-content{
    width: 100%;
    padding:5%;
}

- $step \ 6$ : 完成『標題和內文之間有一個bar隔開』的要求。
- 實作 ： 在```card-header```設定```border-bottom```即可。
- 注意 ： 這裡是為什麼前面需要用```card-content```設定padding製造出```card-header```的間隔。
- 注意 ： 因為用```card-header```製造間隔，會讓這邊個```border-bottom```填滿```card-content```的寬度，不好看。
- 到這已經可以使用了。[https://codepen.io/rfbadgnh/pen/mdrOZgr](https://codepen.io/rfbadgnh/pen/mdrOZgr)

.card-wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 1%;
}
.card{
    margin:1.25%;
    width: 30%;
    padding: 0;
    border: 1px solid #ccc;
}

.card-img{
    vertical-align: middle;
    width: 100%;
}

.card-content{
    width: 100%;
    padding:5%;
}
.card-header{
    width: 100%;
    text-align: center;
    padding-bottom: 2%;
    border-bottom: 1px solid gray;
    margin-bottom: 3%;
}

.card-body{
     width: 100%;
     text-align: center;
}