# flex 項目縮放的簡寫
## 1. `flex`屬性
- 項目放大,縮小與計算尺寸,對于項目非常重要,也很常用
- 每次都要寫這三個屬性,非常的麻煩,且沒有必要
- `flex`屬性,可以將以上三個屬性進行簡化:
- 語法: `flex: flex-grow flex-shrink flex-basis`
### 1.1 三值語法
| 序號 | 屬性值 | 描述 |
| ---- | ------------------ | ------------- |
| 1 | 第一個值: 整數 | `flex-grow` |
| 2 | 第二個值: 整數 | `flex-shrink` |
| 3 | 第三個值: 有效寬度 | `flex-basis` |
舉例:
| 序號 | 案例 | 描述 |
| ---- | ----------------- | ------------------------------- |
| 1 | `flex: 0 1 auto` | 默認值: 不放大,可收縮, 初始寬度 |
| 2 | `flex: 1 1 auto` | 項目自動放大或收縮適應容器 |
| 3 | `flex: 0 0 100px` | 按計算大小填充到容器中 |
### 1.2 雙值語法
| 序號 | 屬性值 | 描述 |
| ---- | ------------------ | ------------ |
| 1 | 第一個值: 整數 | `flex-grow` |
| 3 | 第二個值: 有效寬度 | `flex-basis` |
舉例:
| 案例 | 描述 |
| --------------- | ------------------------------- |
| `flex: 0 180px` | 禁止放大,按計算大小填充到容器中 |
### 1.3 單值語法
| 序號 | 屬性值 | 描述 |
| ---- | -------- | ----------------------- |
| 1 | 整數 | `flex-grow` |
| 2 | 有效寬度 | `flex-basis` |
| 3 | 關鍵字 | `initial | auto | none` |
舉例:
| 序號 | 案例 | 描述 |
| ---- | ------------- | ----------------- |
| 1 | `flex: 1` | `flex: 1 1 auto` |
| 2 | `flex: 180px` | `flex: 1 1 180px` |
| 3 | `initial` | `flex: 0 1 auto` |
| 4 | `auto` | `flex: 1 1 auto` |
| 5 | `none` | `flex: 0 0 auto` |
> 推薦使用`flex`, 就像推薦使用`flex-grow`設置主軸與換行一樣
## 2. 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex 項目縮放的簡寫</title>
<style>
/* 容器尺寸 */
.container {
width: 300px;
height: 150px;
}
/* flex容器 */
.container {
display: flex;
}
/* flex項目 */
.item {
width: 50px;
height: 50px;
background-color: lightcyan;
font-size: 1.5rem;
}
/* flex項目縮放的簡寫 */
/* 三值語法: flex: grow shrink basis */
.item:first-of-type {
background-color: lightgreen;
/* 默認: 不放大,可收縮, 原始大小 */
flex: 0 1 auto;
/* 項目自動放大或收縮自適應容器變化 */
/* 此時,第一個項目flex-grow:1,占據主軸所有剩余空間200px*/
flex: 1 1 auto;
/* 按指定寬度計算項目占據的主軸空間: 80px, 而不是50px */
flex: 0 0 80px;
}
/* 雙值語法: flex: grow basis) */
.item:nth-of-type(2) {
background-color: yellow;
/* 不放大,計算寬度為100px */
flex: 0 100px;
}
/* 單值語法: flex: grow | basis | 關鍵字*/
.item:last-of-type {
background-color: lightskyblue;
/* 自動獲取剩余空間 */
flex: auto;
/* 等價于 */
flex: 1;
/* 項目大小初始化*/
flex: initial;
/*等價于重置為默認值 */
flex: 0 1 auto;
/* 項目禁止縮放 */
flex: none;
/* 等價于 */
flex: 0 0 auto;
/* 看不出效果是因為當前項目寬度不夠 */
flex: 0 0 250px;
/* 如果想自動收縮適應容器,更改第二個參數*/
flex: 0 1 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
```
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距