# 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-容器中行与列之间的间距