作者哈维·艾克，世界顶级商业教练。

作者从小家境窘困，十三岁就开始打工，曾经送报、卖冰淇淋、摆摊子卖货物，还到海滩上兜售防晒油。在[约克大学](https://baike.baidu.com/item/约克大学/327057?fromModule=lemma_inlink)读了一年之后，决定开始全心追求他致富的梦想。他辗转在美国西岸和东岸几个城市里做过许多工作，甚至自己当老板，创业十几次却都无法成功。




多年的挫败没有把他打垮。他又开了一家贩售体育用品的公司，在两年半里快速成长为连锁企业，开设了十家分店。然后，他把这项事业卖给一家名列《财星》五百大的企业。他赚了一笔大钱。可是，由于他的错误投资和大肆挥霍，不到两年就把钱莫名其妙用光了。他又回到了起点。

他痛定思痛，回顾自己的成长背景和金钱观，分析各种与致富有关的内在思惟，体会到许多与金钱、致富梦想和人生态度有关的道理。他发现，每一个人心里都有一张**金钱蓝图**，假如不修改这张蓝图，那么就算赚了大钱，这笔钱也不会留在身边太久。

带着这样的信念，他彻底修改了自己的**金钱蓝图**，最后成为了超级大富翁，并且越来越有钱。

成功之后，他致力于帮助更多人实现致富的梦想，超越现有生活，让人生变得不同。他的潜能开发公司红遍全美，以独特的平民气息吸引了来自世界各地的无数普罗大众，一堂课经常塞满了两千人。很多上过他课的人表示，这堂课大大改变了他们的人生，使他们开始累积财富，得到快乐与成功。

### 现实社会

大多数人的现状：

- 对其财政状况担忧而夜不能寐，早上睁眼起来，就去上班
- 怀抱希望，自己马上就能赚到可以付清账单的钱。而当他们收入提高时，开支又梦魇般地同步增多
- 唯一解决方法就是努力工作。希望通过多赚钱，最终变得节俭。但是生活水平同收入平行增长。负债日益增加。

这部分人就必须越来越努力而长时间地工作才能保持生活水平，以偿还债务和账单。

像仓鼠的轮子：尽管他们尽全力，却没有进步。同理一些人不管多努力地工作，只要处于仓鼠的轮子中，他就是原地踏步，这种现象在《财务自由之路2》被称为仓鼠之轮。

### 财富档案

书里讲了17个有钱人的思维习惯，其实书里有钱人17个思维习惯和大多数成功人士书籍所讲大同小异。我摘录几种我认为重要的：

1. 有钱人相信："我创造我的人生"。穷人相信："人生发生在我的身上"。必须相信，只有你能造成自己的成功，也只有你能造成你的平庸，只有你能造成自己为钱辛苦或是前途茫茫。不管出于自觉还是不自觉的原因，你的人生状态都是自己造成的。行动上远离负面能量的人，每天检视自己的行为
2. 有钱人努力让自己有钱。穷人一直想着要变得有钱。如果你并没有达到你嘴巴上所说的很渴望达到的财富成就，很可能是1. 潜意识时并不真的想变得有钱；2. 并不想付出应有的代价去创造财富
3. 有钱人专注于机会。穷人专注于障碍。有钱人冒的是经过计划的风险，他们会做研究，付出必要的努力，再根据具体的资讯和事实做出决定。穷人，他们期待失败。他们对于自己和自己的能力都没有信心。穷人相信，如果事情行不通，就像世界末日来临。而正因为他们总是看见阻碍，所以他们通常都不愿意冒险。
4. 有钱人欣赏其他的有钱人和成功人士，穷人讨厌有钱人和成功人士。不论你现在什么状态，首先做到不讨厌其他人，积极从其他人身上学到优点或教训
5. 有钱人乐意宣传自己和自己价值观，穷人把推销和宣传看成不好的事。敢于推销自己和自己的产品，学习推销能力，不会或不敢推销一定不会成功。
6. 有钱人大于他们的问题，穷人小于他们的问题。遇到问题不要急于去抱怨和责怪，因为抱怨和责怪来自于恐惧，要明白如果遇到了一个很大的问题，说明自己很小，要么列出多条解决方案去解决问题，要么行动起来去将自己变大。不要专注于问题，而专注于目标。
7. 有钱人选择根据结果拿酬劳。穷人选择根据时间拿酬劳。稳定的薪酬会阻碍你挣更多的钱。要么选择可以以自己的成果或者公司的运营来领薪的工作，要么自己当老板，可以从兼职做起。
8. 有钱人专注于自己的净值。穷人专注于自己的工作收入。净值指你所拥有的所有东西，现金，不动产，股票等等可以转化成现金的东西。提高收入，不乱花钱增加存款，有了存款加强投资，简化不必要的花销。看理财类书籍
9. 有钱人管理他们的钱，穷人很会搞丢他们的钱。不是等我拥有了很多钱后我再开始管理，而是我开始管理我的钱了以后，我才会拥有很多钱。所以会管理钱很重要，不要在乎他们的多少。
10. 有钱人让钱帮他们工作。穷人幸苦工作挣钱。一开始你努力工作挣钱，之后就要让钱为你努力工作。被动收入很重要，一定要去培养和开发。被动收入大于你的支出时，你才算真正的财务自由
11. 有钱人就算恐惧也会采取行动，穷人却会让恐惧阻止他们行动有些事一开始做起来是痛苦的，但是你坚持下去就可以穿过痛苦区到达舒适区，不断的扩大你的舒适区因为舒适区和财务区是成正比的，如果一直待在舒适区你是不会成长的
12. 有钱人持续学习成长，穷人以为他们知道了一切。一件事只有你经历了才有资格说你知道，否则你只是听说过看到过或读到过。如果能学到一个知识或者有了一点进步就是值得的。

### 最后

- 行动比不行动好，只会YY没卵用
- 培养财商很重要，有点小钱绝对不是只有买！买！买！
- 月光族没希望，劳碌命，学会储蓄，积累一笔初始资金
- 巴菲特说的：世界上最好的投资，就是投资你自己

如果我的文章对你有帮助，您的👍就是对我的最大支持^_^。

更多文章：[http://linglan01.cn/about](http://linglan01.cn/about)

《有钱人和你想的不一样》阅读笔记

## 什么是代理

A同学在Ai大时代背景下开启他的创业之路，目前他遇到的最大的一个问题就是启动资金，于是他决定去找马云爸爸借钱，可想而知，最后碰一鼻子灰回来了，情急之下，他想到一个办法，找关系开后门，经过一番消息打探，原来A同学的大学老师王老师是马云的同学，于是A同学找到王老师，托王老师帮忙去马云那借500万过来，当然最后事成了。不过马云并不知道这钱是A同学借的，马云是借给王老师的，最后由王老师转交给A同学。这里的王老师在这个过程中扮演了一个非常关键的角色，这就是**代理**，也可以说是正向代理，王老师代替A同学办这件事，这个过程中，真正借钱的人是谁，马云是不知道的，这点非常关键。




## 正向代理

我们常用的VPN，一般为正向代理。

正向代理特点为隐藏真实的客户端，服务端不知道请求的客户端是谁，客户端请求的服务都是代理服务器代替请求。

举个例子，国内的用户想要访问 Google 时，会被阻挡。 于是我们可以在国外搭建一台代理服务器（可以访问 Google 的服务器），让代理帮我去请求google.com，代理把请求返回的相应结构再返回给我。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/image.png)

当出现多个客户端时，是这样的：

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/image%20%282%29.png)

### Nginx正向代理配置

通过proxy\_pass配置代理地址http://google.com。当我们请求www.example.com将会被转发至http://google.com。
```shell
    server {
        server_name www.example.com;
        listen 80;
        location / {
            proxy_pass http://google.com;     #设定代理服务器的协议和地址 
            proxy_set_header HOST $host;
        }
    }
```
### 小结

正向代理代理的对象是客户端，正向代理真正服务的是客户端。不论是一对一，还是多对一，客户端与服务端请求的过程始终隐藏了客户端IP，服务端不清楚客户端是谁。

以客户端的角度来看它有以下优点：

*   可以突破访问限制，由此我们可以访问外网，如：YouTube、Google。它是由客户端控制的代理（想开就开、不想开就不开），做到科学上网
    
*   正向代理可以隐藏自己的真实IP，只有代理服务器才能知道客户端的IP
    
*   提高访问速度，代理服务器可以缓存资源，当多个用户访问同一资源时，代理服务器直接把缓存的资源返回，没有必要向目标服务器重复请求同一份资源
    

## 反向代理

很久以前，老王去饭店吃饭，需要先到饭店，七荤八素点好菜，坐等饭菜上桌，然后大快朵颐，不亦乐乎。

有了第三方订餐外卖平台（代理），老王懒得动身前往饭店，老王打个电话或用APP，先选好某个饭店，再点好菜，外卖小哥会送上门来。

由于某个品牌的饭店口碑特别好，食客络绎不绝涌入，第三方订餐电话也不绝于耳，但是限于饭店接待能力有限，无法提供及时服务，很多食客等得不耐烦了，纷纷铩羽而归，饭店老总看着煮熟的鸭子飞走了，心疼不已。

痛定思痛，老总又成立了几个连锁饭店，形成一个集群，对外提供统一标准的菜品服务，电话订餐电话400-xxx-7777，当食客涌入饭店总台，总台将食客用大巴运到各个连锁店，这样食客既不需要排队，各连锁店都能高速运转起来，一举两得，老总乐开了花，并为此种运作模式，起名为"反向代理"。

在互联网中，单个服务器处理客户端请求能力有限，当客户端发送的请求过多，会造成服务器忙不过来。这时，我们可以设置多个服务器来共同分担请求，这些服务器提供相同的服务，对于用户来说，根本感觉不到差别。我们只需要知道反向代理服务器是谁就好了。如：`www.baidu.com` 就是我们的反向代理服务器，反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器，用来做**负载均衡**

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/image%20%283%29.png)

当出现多个客户端(多对多)时，是这样的：

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/image%20%284%29.png)

### Nginx反向代理配置

不考虑复杂的配置，仅仅是完成一个 http 反向代理

nginx.conf配置文件如下：

> `conf/nginx.conf` **是 nginx 的默认配置文件。你也可以使用 nginx -c 指定你的配置件**
```shell
    
    //省略
    http {
        #连接超时时间
        keepalive_timeout  120;
        tcp_nodelay        on;
    
    
        #设定实际的服务器列表
        upstream my_server{
            server 127.0.0.1:8089;
        }
    
        #HTTP服务器
        server {
            #监听80端口，80端口是知名端口号，用于HTTP协议
            listen       80;
    
            #定义使用www.xx.com访问
            server_name  www.baidu.com;
    
    		#编码格式
    		charset utf-8;
            #反向代理的路径（和upstream绑定），location 后面设置映射的路径
            location / {
                proxy_pass http://my_server;
            }
            
            //省略
        }
    }
```
上述例子中，代理仅指向一个服务器。然而，网站在实际运营过程中，多数是以集群的方式运行，这时需要使用负载均衡来分流。
```shell
    
    //省略
    http {
        keepalive_timeout  120;
        tcp_nodelay        on;
        #设定实际的服务器列表
        upstream my_server{
            #weigth参数表示权值，权值越高被分配到的几率越大
            server 192.168.1.11:80   weight=5;
            server 192.168.1.12:80   weight=1;
            server 192.168.1.13:80   weight=6;
        }
    
        server {
            listen       80;
            server_name  www.baidu.com;
    		charset utf-8;
            location / {
                proxy_pass http://my_server;
            }
            
            //省略
        }
    }
```
Nginx提供了多种负载均衡策略，这里不再过多描述。

### 小结

反向代理代理的对象是服务端，反向代理真正服务的是服务端。不论是一对多，还是多对多，客户端与服务端请求的过程始终隐藏了服务端IP，客户端不清楚服务端是谁。

以服务端的角度来看它有以下优点：

*   隐藏服务端IP
    
*   负载均衡，反向代理服务器可以根据负载情况，将请求分发到不同的真实服务器上
    
*   安全防护，反向代理服务器可以作为应用层防火墙，为网站提供对基于Web的攻击行为的防护
    

## 总结

反向代理与正向代理区别：

*   正向代理和反向代理面向的服务群体不同，正向代理代理的对象是客户端，反向代理代理的是服务端
    
*   正向代理和反向代理中各自的“视野”不同，正向代理下服务端不知道客户端真实IP，反向代理下客户端不清楚服务端真实IP。
    

## 参考资料
[https://github.com/dunwu/nginx-tutorial](https://github.com/dunwu/nginx-tutorial)  
[https://zhuanlan.zhihu.com/p/500768064](https://zhuanlan.zhihu.com/p/500768064)  
[https://zhuanlan.zhihu.com/p/25707362](https://zhuanlan.zhihu.com/p/25707362)

Nginx之正、反向代理

![image.png](http://www.linglan01.cn/static/img/438d73de219af20de038c88aa3bbf8d4.image.webp)

能够赚钱的五种方式：1. 雇员或者工人 （A）；2.自由职业者（ F）；3. 投资家（I）；4. 企业家 （U）；5. 专家 （E）。



I、U、E能赚到的钱是A、F的好几倍。

当赚钱方式为雇员或者工人、自由职业者时，要想尽方法为自己升职加薪，然后进行储蓄。

学习做一名投资者，这非常重要因为：

-   如果不是投资者，加薪没有任何作用，花销与生活水平同收入并行提高，收入很难满足支出
-   只有当靠资产产生利息生活时，才能感到完全有保障
-   必须攒钱，必须用攒下来的钱做点什么
-   节约+增值=投资者，真正的投资者懂得：“房子可能是一种负债” 买入正确的投资项目，包括无形资产（股票、基金、股权）
-   开发经济头脑，最大的财富是知识，最大的风险是一无所知，努力创造一台属于自己的印钞机
-   堵住孔洞，停止欠下消费债务
 
    ![image.png](http://www.linglan01.cn/static/img/09974948de050b1d3fc469dadcdd6a2c.image.webp)
-   学会区分负债还是资产

    
    ![image.png](http://www.linglan01.cn/static/img/88f7201bda380c309e175bd7de95ba84.image.webp)


    ![image.png](http://www.linglan01.cn/static/img/3f245366f5d21a24782f56c524a73f2b.image.webp)  
    
我想这是大多数人的现状：

-   对其财政状况担忧而夜不能寐，早上睁眼起来，就去上班
-   怀抱希望，自己马上就能赚到可以付清账单的钱。而当他们收入提高时，开支又梦魇般地同步增多
-   唯一解决方法就是努力工作。希望通过多赚钱，最终变得节俭。但是生活水平同收入平行增长。负债日益增加。

这部分人就必须越来越努力而长时间地工作才能保持生活水平，以偿还债务和账单。

像仓鼠的轮子：尽管他们尽全力，却没有进步。同理一些人不管多努力地工作，只要处于仓鼠之轮中，他就是原地踏步。

《财务自由之路2》阅读笔记

# 已读书籍
* 小狗钱钱
* 富爸爸穷爸爸
* JavaScript高级程序设计(红宝书)
* JavaScript权威指南
* Vue.js设计与实现
* JavaScript设计模式与开发实践
* 图解HTTP
* 数据结构与算法JavaScript
* [技术写作指南(掘金小册)](https://s.juejin.cn/ds/iTkge22/)
* [前端缓存技术与方案解析(掘金小册)](https://s.juejin.cn/ds/iTkvs6h/)
* 软能力—吴军
* [《软技能：代码以外的生存指南》阅读总结](https://linglan01.cn/post/23)
* [《影响力》阅读总结+一些产品推广的思考](http://www.linglan01.cn/post/43)
* [《财务自由之路2》阅读笔记](http://www.linglan01.cn/post/46)  
* 《账务自由之路3》不符合本国国情，不推荐
* [人性的弱点](https://www.linglan01.cn/post/50)
* [《有钱人和你想的不一样》阅读笔记](https://linglan01.cn/post/48)
* [微信背后的产品观](https://linglan01.cn/post/53)
* [富有的习惯](https://linglan01.cn/post/54)

# 想读书籍
* 大胆投资自己
* 半小时漫画股票实战法
* 穷查理宝典（难懂，先暂停）

书单

## 前言

早期CSS布局依赖display属性+position属性+float属性。它对特殊的布局非常不方便，如，垂直居中。

于是，W3C在2009年提出了一种新的方案——Flex方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，我们可以大胆地使用它。

![](http://www.linglan01.cn/static/img/e492c442b2e17d20b9d742c2cce2fbc2.image.webp)
浏览器兼容性链接：<https://caniuse.com/?search=flex>




## Flex布局是什么

Flex 是 Flexible Box 的缩写，意为"弹性布局"。

任何元素都能设置`display:flex`,如给div此类块级元素设置`display:flex`或给span行级元素设置`display:inline-flex`。

flex、inline-flex两者区别在于：inline-flex容器为inline特性，因此可以和图片文字一行显示；flex容器保持块级元素特性，宽度默认100%，不和行级元素一行显示。

Flex布局相关属性分为两类，一类作用于flex容器本身上，另一类作用于flex子元素上。

| 作用于flex容器上      | 作用于flex子元素上 |
| --------------- | ----------- |
| flex-direction  | order       |
| flex-wrap       | flex-grow   |
| ### flex-flow   | flex-shrink |
| justify-content | flex-basis  |
| align-items     | flex        |
| align-content   | align-self  |

该两类属性都是控制flex子元素的布局，不同的是作用于flex容器上控制的是整体，作用于flex子元素上控制的是个体。

## 作用在flex容器上的CSS属性

### flex-direction

flex-direction决定主轴方向（子元素的排列方向）
```css
.box{
  display:flex;
  flex-direction:row | row-reverse | column | column-reverse;
}
```

它有4个值:

*   `row`（默认值）：主轴为从左到右方向;

*   `row-reverse`：主轴为从右到左方向;

*   `column`：主轴为垂直方向，从上到下;

*   `column-reverse`：主轴为垂直方向，从下到上。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/flex-direction.gif)

请点击这里体验：<https://code.juejin.cn/pen/7259676843564318777>。

### flex-wrap

flex-wrap决定是否换行。
```css
.box{
  display:flex;
  flex-wrap:nowrap | wrap ｜ wrap-reverse
}
```
它有3个值:

*   `nowrap`（默认值）：不换行，如果总宽度超过了父盒子，成员将被挤压；

*   `wrap`： 换行，第一行在上方；

*   `wrap-reverse`：换行，第一行在下方。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/flex-wrap.gif)

请点击这里体验：<https://code.juejin.cn/pen/7259923921900666936>

### flex-flow

flex-flow属性是flex-direction属性与flex-wrap属性的简写形式，默认为row nowrap
```css
.box {
  display:flex;
  flex-flow: <flex-direction> || <flex-wrap>;
}
```

### justify-content

justify-content属性决定子元素在主轴上的对齐方式。

```css
.box {
  display:flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```


它有6个值：

*   `flex-start`（默认值）：左对齐

*   `flex-end`：右对齐

*   `center`： 居中

*   `space-between`：两端对齐，子元素之间的间隔都相等。

*   `space-around`：环绕，每个子元素两侧都环绕互不干扰的等宽的空白间距

*   space-evenly：匀称、平等，每个子元素两侧空白间距完全相等

假设主轴默认，方向为从左到右。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/justify-content.gif)

请点击这里体验: <https://code.juejin.cn/pen/7259946435871768576>

### align-items

`align-items`属性定义子元素交叉轴方向上的对齐方式，交叉轴理解为垂直方向。
```css
    .box {
      display:flex;
      align-items: stretch | flex-start | flex-end | center | baseline;
    }
```
它有5个值：

*   stretch（默认值）：flex子项拉伸。在演示中我们可以看到冰冰图片高度是撑满flex容器高度的，就是因为flex子项的高度拉伸到容器高度导致。如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸；

*   `flex-start`：容器顶部对齐；

*   `flex-end`：容器底部对齐；

*   `center`：容器垂直居中对齐；

*   `baseline`：表现为所有flex子项都相对于flex容器的基线对齐。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/align-items.gif)

请点击这里体验: <https://code.juejin.cn/pen/7260042327489118265>

### align-content

`align-content`、`justify-content`它们是相似且对立的属性，`justify-content`指明水平方向flex子项的对齐和分布方式，而`align-content`则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行，则`align-content`属性是没有任何效果的。
```css
.box {
  display:flex;
  align-items: stretch | flex-start | flex-end | center | baseline;
}
```

它有7个值：

*   `stretch`（默认值）：flex子项拉伸。在演示中我们可以看到冰冰图片高度是撑满flex容器高度的，就是因为flex子项的高度拉伸到容器高度导致。如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸；

*   `flex-start`（默认值）：左对齐

*   `flex-end`：右对齐

*   `center`： 居中

*   `space-between`：两端对齐，子元素之间的间隔都相等。

*   `space-around`：环绕，每个子元素两侧都环绕互不干扰的等宽的空白间距

*   `space-evenly`：匀称、平等，每个子元素两侧空白间距完全相等

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/align-content.gif)

请点击这里体验: <https://code.juejin.cn/pen/7260070587291795468>

## 作用于flex子元素上

### order

order属性规定flex容器内子元素布局的顺序，默认为0
```css
.children{
  order:0;/* 整数值，默认值是 0 */
}
```
所有的flex子元素默认order为0，如果我们想将某个子元素放置在最前面展示，即设置比0更小的整数，如-1就可以。

现在我们有四张冰冰的美图，将其中编号为3的图片元素order属性分别设置为-1,1。看其排序顺序变化。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/order.gif)

可以点击这里体验：<https://code.juejin.cn/pen/7260110936554340389>

### flex-grow

flex-grow属性定义了该元素在flex容器的放大比例，如果为0，即使有剩余空间也不会放大。
```css
.children{
  flex-grow:1;/* 数值，可以是小数，默认值是 0 */
}
```
flex-grow不支持负值，默认为0，表示不占用剩余的空白间隙扩展自己的宽度。如果所有的flex容器子元素flex-grow属性都是1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他子元素多一倍。

dome案例：

flex容器宽度为500px，四张冰冰图片的总宽为400px，每张图片宽度为100px，即flex容器剩余空间还有100px；当给编号为3的冰冰设置flex-grow属性值分别为0、0.25、0.5、1时，编号3的冰冰宽度变化为100、100+0.25\*100 、100+0.5\*100、100+100\*1。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/flex-grow.gif)

可以点击这里体验: <https://code.juejin.cn/pen/7260115757248774181>

### flex-shrink

flex-shrink属性定义flex容器空间不足时，元素的缩小比例，默认为1，即如果空间不足，该元素将缩小。
```css
.children {
  flex-shrink: 1; /* 默认 1，负值无效 */
}
```
如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他子元素都为1，则空间不足时，前者不缩小。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/flex-shrink.gif)

可以点击这里体验：<https://code.juejin.cn/pen/7260310379580882979>

### flex-basis

flex-basis定义在分配剩余空间之前元素默认的大小，浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto,即元素本来大小
```css
.children {
  flex-basis:350px | auto; /* 默认auto */
}
```

它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。

### flex

`flex`属性是`flex-grow`，`flex-shrink`和`flex-basis`的缩写，默认值为`0 1 auto`。
```css
.children{
  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```

该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。

*   `flex`默认值等同于`flex:0 1 auto`；

*   `flex:none`等同于`flex:0 0 auto`；

*   `flex:auto`等同于`flex:1 1 auto`。

### align-self

`align-self`属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
```css
.children{
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```
该属性有6个值，除了auto（默认值），其他都与align-items属性完全一致。

该dome中flex容器设置了align-items:center。
![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/align-self.gif)  
可以点击这里体验：<https://code.juejin.cn/pen/7260331350761144357>

## 最后

冰冰人美笑容甜，又是央视记者，能力还杠杠的，文章案例必须含冰量十足。

![](https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/%E5%82%BB%E7%AC%91.gif)

如果我的文章对你有帮助，您的👍就是对我的最大支持^\_^。

更多文章：<http://linglan01.cn/about>