This commit is contained in:
xugaoyi
parent
2adb10ce55
commit
796308064c
|
|
@ -29,4 +29,4 @@ jobs: # 工作流
|
|||
BASE_BRANCH: master # 要部署的文件夹所在的分支.
|
||||
BRANCH: gh-pages # 部署到的分支
|
||||
FOLDER: docs/.vuepress/dist # 要部署的文件夹.
|
||||
BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && echo 'b.evanblogweb.com' > CNAME # 部署前要执行的命令 #&& npm run list
|
||||
BUILD_SCRIPT: npm install && npm run build && && ls && cd docs/.vuepress/dist && echo 'b.evanblogweb.com' > CNAME # 部署前要执行的命令 #&& npm run list
|
||||
|
|
|
|||
|
|
@ -7,13 +7,12 @@ module.exports = [
|
|||
//{text: 'vue', link: '/web/vue/'},
|
||||
//{text: 'TypeScript', link: '/web/TypeScript/'},
|
||||
//{text: 'ES6', link: '/web/ES6/'},
|
||||
{text: 'CSS/HTML', link: '/web/CSS-HTML/01.flex布局基础'},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'python',
|
||||
text: '页面',
|
||||
items: [
|
||||
{text: 'python', link: '/python/'}
|
||||
{text: 'HTML/CSS', link: '/ui/00.flex布局语法'},
|
||||
]
|
||||
},
|
||||
{text: '技术杂谈',items:[
|
||||
|
|
@ -22,11 +21,15 @@ module.exports = [
|
|||
{text: 'GitHub高级搜索技巧', link: '/other/github'},
|
||||
{text: 'Markdown使用教程', link: '/other/markdown'},
|
||||
{text: 'npm使用教程', link: '/other/npm'},
|
||||
{text: 'yaml教程', link: '/other/yaml'},
|
||||
]},
|
||||
{text: '学习',items:[
|
||||
{text: '学习效果低，忘性很大怎么办？',link: '/other/LearningAndMemory'},
|
||||
{text: '学习网站分享', link: '/other/study'},
|
||||
]},
|
||||
{text: '学习笔记',items:[
|
||||
{text: '小程序笔记',link: '/other/note/01.小程序笔记'},
|
||||
]},
|
||||
{text: '面试',items:[
|
||||
{text: '面试问答集锦', link: '/other/interview'},
|
||||
]},
|
||||
|
|
|
|||
|
|
@ -12,21 +12,24 @@ module.exports = { // 侧边栏
|
|||
['JavaScript/06.多种数组去重性能对比','多种数组去重性能对比'],
|
||||
]
|
||||
},
|
||||
],
|
||||
'/ui/': [
|
||||
{
|
||||
title: 'CSS/HTML',
|
||||
title: 'HTML/CSS',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['CSS-HTML/01.flex布局基础','flex布局基础'],
|
||||
['CSS-HTML/02.flex布局案例-骰子','flex布局案例-骰子'],
|
||||
['CSS-HTML/03.flex布局案例-网格布局','flex布局案例-网格布局'],
|
||||
['CSS-HTML/04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'],
|
||||
['CSS-HTML/05.flex布局案例-输入框布局','flex布局案例-输入框布局'],
|
||||
['CSS-HTML/06.CSS3之transform过渡','CSS3之transform过渡'],
|
||||
['CSS-HTML/07.CSS3之animation动画','CSS3之animation动画'],
|
||||
['00.flex布局语法','flex布局语法'],
|
||||
['01.flex布局案例-基础','flex布局案例-基础'],
|
||||
['02.flex布局案例-骰子','flex布局案例-骰子'],
|
||||
['03.flex布局案例-网格布局','flex布局案例-网格布局'],
|
||||
['04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'],
|
||||
['05.flex布局案例-输入框布局','flex布局案例-输入框布局'],
|
||||
['06.CSS3之transform过渡','CSS3之transform过渡'],
|
||||
['07.CSS3之animation动画','CSS3之animation动画'],
|
||||
]
|
||||
},
|
||||
],
|
||||
'/other/': [// 针对不同页面设置不同侧边栏
|
||||
'/other/': [
|
||||
{
|
||||
title: '技术',
|
||||
collapsable: false, //是否可折叠，可选的，默认true
|
||||
|
|
@ -36,9 +39,9 @@ module.exports = { // 侧边栏
|
|||
['github','GitHub高级搜索技巧'],
|
||||
['markdown','Markdown使用教程'],
|
||||
['npm','npm使用教程'],
|
||||
['yaml','yaml教程'],
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: '学习',
|
||||
collapsable: false,
|
||||
|
|
@ -47,7 +50,13 @@ module.exports = { // 侧边栏
|
|||
['study','学习网站分享'],
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: '学习笔记',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['note/01.小程序笔记','小程序笔记'],
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '面试',
|
||||
collapsable: false,
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -157,6 +157,7 @@ export default {
|
|||
.feature {
|
||||
max-width: 100%;
|
||||
padding: 0 2.5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,340 @@
|
|||
# yaml教程
|
||||
|
||||
## 简介
|
||||
|
||||
YAML 是 "YAML Ain't a Markup Language"（YAML 不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是："Yet Another Markup Language"（仍是一种标记语言）。
|
||||
|
||||
YAML 的语法和其他高级语言类似，并且可以简单表达清单、散列表，标量等数据形态。它使用空白符号缩进和大量依赖外观的特色，特别**适合用来表达或编辑数据结构、各种配置文件、倾印调试内容、文件大纲**（例如：许多电子邮件标题格式和YAML非常接近）。
|
||||
|
||||
YAML 的配置文件后缀为 **.yml**，如：**runoob.yml** 。
|
||||
|
||||
|
||||
|
||||
> yaml常用来用作配置文件，和json类似
|
||||
|
||||
## 基本语法
|
||||
|
||||
- 大小写敏感
|
||||
|
||||
- 使用缩进表示层级关系
|
||||
|
||||
- 缩进不允许使用tab，只允许空格
|
||||
|
||||
- 缩进的空格数不重要，只要相同层级的元素左对齐即可
|
||||
|
||||
- '#'表示注释
|
||||
|
||||
|
||||
|
||||
## 数据类型
|
||||
|
||||
YAML 支持以下几种数据类型：
|
||||
|
||||
- **对象**：键值对的集合，又称为映射（mapping）/ 哈希（hashes） / 字典（dictionary）
|
||||
- **数组**：一组按次序排列的值，又称为序列（sequence） / 列表（list）
|
||||
- **纯量**（scalars）：单个的、不可再分的值
|
||||
|
||||
|
||||
|
||||
## YAML 对象
|
||||
|
||||
对象的几种表示形式：
|
||||
|
||||
1、对象键值对使用冒号结构表示 **key: value**，冒号后面要加一个空格。
|
||||
|
||||
```yaml
|
||||
key: value
|
||||
```
|
||||
|
||||
|
||||
|
||||
2、也可以使用 **key:{key1: value1, key2: value2, ...}**。
|
||||
|
||||
```yaml
|
||||
key:{child-key1:value1,child-key2:value2}
|
||||
```
|
||||
|
||||
|
||||
|
||||
3、还可以使用缩进表示层级关系；
|
||||
|
||||
```yaml
|
||||
key:
|
||||
child-key1: value1
|
||||
child-key2: value2
|
||||
```
|
||||
|
||||
同2，只是表示形式不同。
|
||||
|
||||
|
||||
|
||||
4、较为复杂的对象格式，可以使用问号加一个空格代表一个复杂的 key，配合一个冒号加一个空格代表一个 value：
|
||||
|
||||
```yaml
|
||||
?
|
||||
- complexkey1
|
||||
- complexkey2
|
||||
:
|
||||
- complexvalue1
|
||||
- complexvalue2
|
||||
```
|
||||
|
||||
意思即对象的属性是一个数组 [complexkey1,complexkey2]，对应的值也是一个数组 [complexvalue1,complexvalue2]
|
||||
|
||||
|
||||
|
||||
## YAML 数组
|
||||
|
||||
以 **-** 开头的行表示构成一个数组：
|
||||
|
||||
```yaml
|
||||
- A
|
||||
- B
|
||||
- C
|
||||
```
|
||||
|
||||
YAML 支持多维数组，可以使用行内表示：
|
||||
|
||||
```yaml
|
||||
key: [value1, value2, ...]
|
||||
```
|
||||
|
||||
数据结构的子成员是一个数组，则可以在该项下面缩进一个空格。
|
||||
|
||||
```yaml
|
||||
-
|
||||
- A
|
||||
- B
|
||||
- C
|
||||
```
|
||||
|
||||
一个相对复杂的例子：
|
||||
|
||||
```yaml
|
||||
companies:
|
||||
-
|
||||
id: 1
|
||||
name: company1
|
||||
price: 200W
|
||||
-
|
||||
id: 2
|
||||
name: company2
|
||||
price: 500W
|
||||
```
|
||||
|
||||
意思是 companies 属性是一个数组，每一个数组元素又是由 id、name、price 三个属性构成。
|
||||
|
||||
数组也可以使用流式(flow)的方式表示：
|
||||
|
||||
```yaml
|
||||
companies: [{id: 1,name: company1,price: 200W},{id: 2,name: company2,price: 500W}]
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 复合结构（对象和数组组合）
|
||||
|
||||
数组和对象可以构成复合结构，例：
|
||||
|
||||
```yaml
|
||||
languages:
|
||||
- Ruby
|
||||
- Perl
|
||||
- Python
|
||||
websites:
|
||||
YAML: yaml.org
|
||||
Ruby: ruby-lang.org
|
||||
Python: python.org
|
||||
Perl: use.perl.org
|
||||
```
|
||||
|
||||
转换为 js 为：
|
||||
|
||||
```yaml
|
||||
{
|
||||
languages: [ 'Ruby', 'Perl', 'Python'],
|
||||
websites: {
|
||||
YAML: 'yaml.org',
|
||||
Ruby: 'ruby-lang.org',
|
||||
Python: 'python.org',
|
||||
Perl: 'use.perl.org'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 纯量
|
||||
|
||||
纯量是最基本的，不可再分的值，包括：
|
||||
|
||||
- 字符串
|
||||
- 布尔值
|
||||
- 整数
|
||||
- 浮点数
|
||||
- Null
|
||||
- 时间
|
||||
- 日期
|
||||
|
||||
使用一个例子来快速了解纯量的基本使用：
|
||||
|
||||
```yaml
|
||||
boolean: # 布尔值
|
||||
- TRUE #true,True都可以
|
||||
- FALSE #false，False都可以
|
||||
float: # 浮点数
|
||||
- 3.14
|
||||
- 6.8523015e+5 #可以使用科学计数法
|
||||
int: # 整数
|
||||
- 123
|
||||
- 0b1010_0111_0100_1010_1110 #二进制表示
|
||||
null: # Null
|
||||
nodeName: 'node'
|
||||
parent: ~ #使用~表示null
|
||||
string: # 字符串
|
||||
- 哈哈 # 字符串默认不使用引号表示
|
||||
- 'Hello world' #可以使用双引号或者单引号包裹特殊字符
|
||||
- newline
|
||||
newline2 #字符串可以拆成多行，每一行会被转化成一个空格
|
||||
date:
|
||||
- 2018-02-17 #日期必须使用ISO 8601格式，即yyyy-MM-dd
|
||||
datetime:
|
||||
- 2018-02-17T15:02:31+08:00 #时间使用ISO 8601格式，时间和日期之间使用T连接，最后使用+代表时区
|
||||
```
|
||||
|
||||
|
||||
|
||||
多行字符串可以使用`|`保留换行符，也可以使用`>`折叠换行。
|
||||
|
||||
```yaml
|
||||
this: |
|
||||
Foo
|
||||
Bar
|
||||
that: >
|
||||
Foo
|
||||
Bar
|
||||
```
|
||||
|
||||
转为js代码如下。
|
||||
|
||||
```json
|
||||
{ this: 'Foo\nBar\n', that: 'Foo Bar\n' }
|
||||
```
|
||||
|
||||
`+`表示保留文字块末尾的换行，`-`表示删除字符串末尾的换行。
|
||||
|
||||
```yaml
|
||||
s1: |
|
||||
Foo
|
||||
|
||||
s2: |+
|
||||
Foo
|
||||
|
||||
|
||||
s3: |-
|
||||
Foo
|
||||
```
|
||||
|
||||
转为json代码如下
|
||||
|
||||
```json
|
||||
{ s1: 'Foo\n', s2: 'Foo\n\n\n', s3: 'Foo' }
|
||||
```
|
||||
|
||||
|
||||
|
||||
字符串之中可以插入 HTML 标记。
|
||||
|
||||
```yaml
|
||||
message: |
|
||||
<p style="color: red">
|
||||
段落
|
||||
</p>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 转换数据格式
|
||||
|
||||
允许使用两个感叹号，强制转换数据类型。
|
||||
|
||||
```yaml
|
||||
e: !!str 123
|
||||
f: !!str true
|
||||
```
|
||||
|
||||
转换js结果同：
|
||||
|
||||
```json
|
||||
{ e: '123', f: 'true' }
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 锚点引用
|
||||
|
||||
**&** 锚点和< span class="marked">* 别名，可以用来引用:
|
||||
|
||||
```yaml
|
||||
defaults: &defaults # 添加锚点
|
||||
adapter: postgres
|
||||
host: localhost
|
||||
|
||||
development:
|
||||
database: myapp_development
|
||||
<<: *defaults # <<表示合并，*引用锚点
|
||||
|
||||
test:
|
||||
database: myapp_test
|
||||
<<: *defaults # <<表示合并，*引用锚点
|
||||
```
|
||||
|
||||
相当于:
|
||||
|
||||
```yaml
|
||||
defaults:
|
||||
adapter: postgres
|
||||
host: localhost
|
||||
|
||||
development:
|
||||
database: myapp_development
|
||||
adapter: postgres
|
||||
host: localhost
|
||||
|
||||
test:
|
||||
database: myapp_test
|
||||
adapter: postgres
|
||||
host: localhost
|
||||
```
|
||||
|
||||
**&** 用来建立锚点（defaults），**<<** 表示合并到当前数据，***** 用来引用锚点。
|
||||
|
||||
下面是另一个例子:
|
||||
|
||||
```yaml
|
||||
- &showell Steve
|
||||
- Clark
|
||||
- Brian
|
||||
- Oren
|
||||
- *showell
|
||||
```
|
||||
|
||||
转为js代码如下:
|
||||
|
||||
```yaml
|
||||
[ 'Steve', 'Clark', 'Brian', 'Oren', 'Steve' ]
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 参考：
|
||||
>
|
||||
> - yaml官网：<https://yaml.org/>
|
||||
> - yaml与js的转换demo：<http://nodeca.github.io/js-yaml/>
|
||||
> - 菜鸟教程：<https://www.ruanyifeng.com/blog/2016/07/yaml.html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
> 敬请期待
|
||||
|
|
@ -6,13 +6,13 @@ tagline: web前端工程师，热衷于学习与总结
|
|||
|
||||
features:
|
||||
- title: 前端
|
||||
details: web前端开发相关技术
|
||||
details: JavaScript、ES6、vue框架等相关技术
|
||||
url: /web/JavaScript/01.JavaScript中的名词概念
|
||||
imgname: /img/web.png
|
||||
- title: python
|
||||
details: 人生苦短，我学python
|
||||
url: /python/
|
||||
imgname: /img/python.png
|
||||
- title: 页面
|
||||
details: html(5)/css(3)，前端页面相关技术
|
||||
url: /ui/00.flex布局语法
|
||||
imgname: /img/ui.png
|
||||
- title: 技术杂谈
|
||||
details: 技术文档、教程、技巧、学习笔记等
|
||||
url: /other/git
|
||||
|
|
@ -28,19 +28,12 @@ footer: Copyright © 2019-present evanblog
|
|||
* [多种数组去重性能对比](web/JavaScript/06.多种数组去重性能对比)
|
||||
* [更多... 👉](web/JavaScript/01.JavaScript中的名词概念)
|
||||
|
||||
|
||||
|
||||
* CSS/HTML
|
||||
* [flex布局基础](web/CSS-HTML/01.flex布局基础)
|
||||
* [flex布局案例-圣杯布局](web/CSS-HTML/04.flex布局案例-圣杯布局)
|
||||
* [CSS3之animation动画](web/CSS-HTML/07.CSS3之animation动画)
|
||||
* [更多... 👉](web/CSS-HTML/01.flex布局基础)
|
||||
|
||||
|
||||
|
||||
## 🐍python
|
||||
|
||||
> 敬请期待
|
||||
## 🎨 页面
|
||||
* HTML/CSS
|
||||
* [flex布局语法](ui/00.flex布局语法)
|
||||
* [flex布局案例-圣杯布局](ui/04.flex布局案例-圣杯布局)
|
||||
* [CSS3之animation动画](ui/07.CSS3之animation动画)
|
||||
* [更多... 👉](ui/00.flex布局语法)
|
||||
|
||||
|
||||
|
||||
|
|
@ -50,17 +43,17 @@ footer: Copyright © 2019-present evanblog
|
|||
* [Git使用文档](other/git)
|
||||
* [GitHub高级搜索技巧](other/github)
|
||||
* [Markdown使用教程](other/markdown)
|
||||
* [更多... 👉](other/git)
|
||||
* 学习
|
||||
* [学习效果低，忘性很大怎么办？](other/LearningAndMemory)
|
||||
* [学习网站分享](other/study)
|
||||
* [更多... 👉](other/LearningAndMemory)
|
||||
* 面试
|
||||
* [面试问题集锦](other/interview)
|
||||
* 其他
|
||||
* [在线工具](other/utils)
|
||||
* [关于本博客搭建](https://github.com/xugaoyi/evanblog)
|
||||
|
||||
* [更多... 👉](other/git)
|
||||
|
||||
## :email: 联系
|
||||
|
||||
- **Github**: <https://github.com/xugaoyi>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,305 @@
|
|||
# flex布局语法
|
||||
|
||||
## 一、flex 布局是什么？
|
||||
|
||||
Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
|
||||
|
||||
|
||||
|
||||
**任何一个容器** 都可以指定为 Flex 布局。
|
||||
|
||||
```css
|
||||
.box{
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
**行内元素** 也可以使用 Flex 布局。
|
||||
|
||||
```css
|
||||
.box{
|
||||
display: inline-flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
Webkit 内核的浏览器，必须加上`-webkit`前缀。
|
||||
|
||||
```css
|
||||
.box{
|
||||
display: -webkit-flex; /* Safari */
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
**注意**，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。
|
||||
|
||||
|
||||
|
||||
## 二、基本概念
|
||||
|
||||
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
|
||||
|
||||
|
||||
|
||||
容器默认存在两根轴：水平的主轴（或x轴）（main axis）和垂直的交叉轴（或y轴）（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
|
||||
|
||||
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
|
||||
|
||||
|
||||
|
||||
## 三、容器的属性
|
||||
|
||||
以下6个属性设置在容器上。(即设置在 display: flex; 的元素上)
|
||||
|
||||
|
||||
|
||||
>- flex-direction 方向 决定项目的排列方向
|
||||
>
|
||||
>- flex-wrap 换行
|
||||
>
|
||||
>- flex-flow 方向和换行的简写
|
||||
>
|
||||
>
|
||||
>
|
||||
>- justify-content 主轴对齐方式
|
||||
>
|
||||
>- align-items 交叉轴对齐方式
|
||||
>
|
||||
>- align-content 多轴线的对齐方式
|
||||
|
||||
|
||||
|
||||
### 3.1 flex-direction属性
|
||||
|
||||
`flex-direction`属性决定主轴的方向（即项目的排列方向）。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> flex-direction: row | row-reverse | column | column-reverse;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能有4个值。
|
||||
|
||||
> - `row`（默认值）：主轴为水平方向，起点在左端。
|
||||
> - `row-reverse`：主轴为水平方向，起点在右端。
|
||||
> - `column`：主轴为垂直方向，起点在上沿。
|
||||
> - `column-reverse`：主轴为垂直方向，起点在下沿。
|
||||
|
||||
### 3.2 flex-wrap属性
|
||||
|
||||
默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。
|
||||
|
||||
|
||||
|
||||
> ```css
|
||||
> .box{
|
||||
> flex-wrap: nowrap | wrap | wrap-reverse;
|
||||
> }
|
||||
> ```
|
||||
|
||||
它可能取三个值。
|
||||
|
||||
（1）`nowrap`（默认）：不换行。会压缩项目的宽度
|
||||
|
||||
|
||||
|
||||
（2）`wrap`：换行，第一行在上方。
|
||||
|
||||
|
||||
|
||||
（3）`wrap-reverse`：换行，第一行在下方。
|
||||
|
||||
|
||||
|
||||
### 3.3 flex-flow
|
||||
|
||||
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> flex-flow: <flex-direction> || <flex-wrap>;
|
||||
> }
|
||||
> ```
|
||||
|
||||
### 3.4 justify-content属性
|
||||
|
||||
`justify-content`属性定义了项目在主轴上的对齐方式。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
|
||||
|
||||
> - `flex-start`（默认值）：左对齐
|
||||
> - `flex-end`：右对齐
|
||||
> - `center`： 居中
|
||||
> - `space-between`：两端对齐，项目之间的间隔都相等。
|
||||
> - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
|
||||
|
||||
### 3.5 align-items属性
|
||||
|
||||
`align-items`属性定义项目在交叉轴上如何对齐。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> align-items: flex-start | flex-end | center | baseline | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
|
||||
|
||||
> - `flex-start`：交叉轴的起点对齐。
|
||||
> - `flex-end`：交叉轴的终点对齐。
|
||||
> - `center`：交叉轴的中点对齐。
|
||||
> - `baseline`: 项目的第一行文字的基线对齐。
|
||||
> - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||
|
||||
### 3.6 align-content属性
|
||||
|
||||
`align-content`属性定义了多根轴线的对齐方式（**一排项目为一根轴线**）。如果项目只有一根轴线，该属性不起作用。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> align-content: flex-start | flex-end | center | space-between | space-around | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
该属性可能取6个值。
|
||||
|
||||
> - `flex-start`：与交叉轴的起点对齐。
|
||||
> - `flex-end`：与交叉轴的终点对齐。
|
||||
> - `center`：与交叉轴的中点对齐。
|
||||
> - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
|
||||
> - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
|
||||
> - `stretch`（默认值）：轴线占满整个交叉轴。
|
||||
|
||||
|
||||
|
||||
## 四、项目的属性
|
||||
|
||||
以下6个属性设置在项目上。
|
||||
|
||||
> - `order`
|
||||
> - `flex-grow`
|
||||
> - `flex-shrink`
|
||||
> - `flex-basis`
|
||||
> - `flex` `flex-grow`, `flex-shrink` 和 `flex-basis`的简写
|
||||
> - `align-self`
|
||||
|
||||
|
||||
|
||||
### 4.1 order属性
|
||||
|
||||
`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> order: <integer>;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
### 4.2 flex-grow属性
|
||||
|
||||
`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-grow: <number>; /* default 0 */
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
|
||||
|
||||
### 4.3 flex-shrink属性
|
||||
|
||||
`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-shrink: <number>; /* default 1 */
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。
|
||||
|
||||
负值对该属性无效。
|
||||
|
||||
### 4.4 flex-basis属性
|
||||
|
||||
`flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-basis: <length> | auto; /* default auto */
|
||||
> }
|
||||
> ```
|
||||
|
||||
它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。
|
||||
|
||||
### 4.5 flex属性
|
||||
|
||||
`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
||||
> }
|
||||
> ```
|
||||
|
||||
该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。
|
||||
|
||||
**建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。**
|
||||
|
||||
|
||||
|
||||
### 4.6 align-self属性
|
||||
|
||||
`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> align-self: auto | flex-start | flex-end | center | baseline | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
|
||||
|
||||
|
||||
|
||||
（完）
|
||||
|
||||
|
||||
|
||||
> 来源：
|
||||
>
|
||||
> <http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html>
|
||||
>
|
||||
> <http://www.ruanyifeng.com/blog/2015/07/flex-examples.html>
|
||||
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
# flex布局基础
|
||||
# flex布局案例-基础
|
||||
|
||||
先上代码，[效果](#效果)在后面
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
> 敬请期待
|
||||
Loading…
Reference in New Issue