## 前言

早期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>

和我女神王冰冰一起学display: flex布局 

![](https://ywja-public-bucket.oss-cn-hangzhou.aliyuncs.com/server-platform/21/upload/2022-10-14/%E5%BD%B1%E5%93%8D%E5%8A%9B.png)  

思维导图在线链接：<https://www.processon.com/view/link/64aded43f758aa40a93dffd4>

《影响力》是一本风靡全球二十载，史上最强大、最诡谲、最震慑人心的心理学畅销书!《财富》杂志鼎力推荐的75本商业必读书之一!

作者罗伯特·西奥迪尼全球知名的说服术与影响力研究权威。他分别于北卡罗来纳大学、哥伦比亚大学取得博士与博士学位，投入说服与顺从行为研究逾3年。如今是亚利桑那州立大学心理学系教授。



书籍中包含了六个原则，它们分别是互惠、承诺和一致、社会证据、喜好、权威和稀缺性。这些原则可以用来解释人们是如何被影响和说服的，并且可以帮助人们更好地运用影响力。

-   互惠原则：

    -   在餐厅中，服务员免费提供小甜点或一杯饮料，以期望顾客在店内用餐时回报这些好处。类似地，在购物中心或商场中，免费提供小礼品或优惠券，以期望顾客在店内购物时回报这些好处。这种策略可以增加顾客的满意度和忠诚度，并且可以提高销售额。

-   承诺和一致原则：

    -   在销售中，可以使用承诺和一致原则来建立客户的忠诚度。例如，向客户提供一份合同或协议，并要求他们在签署前确认同意，以期望在未来的交易中获得更多的信任和合作。同样，在网上营销中，可以要求客户填写调查问卷、订阅邮件或关注社交媒体账户，以期望获得更多忠实的客户。这种策略可以增加客户的参与度和忠诚度，并且可以提高品牌的知名度和认可度。

-   社会认同原则：

    -   在电商平台上，展示其他人对产品的评价和评论，以期望让更多的人购买该产品。类似地，在社交媒体上展示许多人喜欢某个品牌或产品，以期望吸引更多的追随者和客户。此外，有些公司会雇佣名人或微博红人来代言他们的产品，以期望吸引更多的客户。这种策略可以增加客户的信任度和购买意愿，并且可以提高销售额和品牌价值。

-   喜好原则：

    -   在品牌建设中，可以使用喜好原则来吸引和保留客户。例如，通过与社交媒体上的名人或意见领袖合作，提高品牌的知名度和认可度。
    -   另一个例子是一些公司会在产品中注入一些社会责任的元素，比如捐赠一部分收益给慈善机构或环保组织，以期望吸引更多关注社会责任的消费者。这种策略可以增加客户的喜好和认同感，并且可以提高品牌的忠诚度和声誉。

-   权威原则：

    -   在销售高端产品或服务时，可以使用权威原则来展示产品的专业性和品质。例如，在医疗领域，一家医院可以展示他们的专业医生和先进设备，以期望吸引更多的高端客户。在旅游业中，一家高端度假村可以展示他们的五星级服务和精致的餐饮，以期望吸引更多的高端客户。这种策略可以增加客户的信任度和购买意愿，并且可以提高销售额和品牌价值。

-   稀缺性原则：

    -   在限量销售或促销活动中，可以使用稀缺性原则来吸引更多的顾客。例如，在某些节假日或特定时间内推出限量版的产品，以期望吸引更多的购买者。另一个例子是，在销售房地产时，一些开发商会刻意少发布一些房源，以期望吸引更多的买家。这种策略可以增加客户的购买欲望和紧迫感，并且可以提高销售额和品牌价值。

影响力原则可以应用于各种不同的场景，如销售、招聘、政治和社会活动等。通过了解和运用这些原则，可以帮助人们更好地理解人们是如何被影响和说服的，并且可以帮助人们更有效地利用影响力来推动他们的目标和愿望。

影响力这本书是一本非常有价值的心理学和营销经典著作，它不仅提供了六个原则来解释人们的思考和行为方式，还提供了许多实际的例子和应用场景，可以帮助人们更好地利用影响力来推动他们的目标和愿望，并且可以帮助人们更深入地理解人们的思考和行为方式。

### 一些产品推广的思考

如果我来推广一款产品，我会在以下方面尝试：

-   展示用户或其他企业对该产品的认可和使用情况，邀请已经使用产品的客户分享他们的成功故事，并将这些案例整理成公开的文档；利用社交媒体平台上的用户评价和推荐来展示产品的社会认同，增加产品的信任度和吸引力
-   邀请业内专家或知名人士来为产品背书，增加产品的可信度和吸引力；如果是B端面向企业内部可以邀请企业有声望的领导
-   可以通过提供额外的服务或优惠来回馈那些对产品做出贡献的用户，增加用户的忠诚度和推荐效果。可以是一个小公仔或产品创立几周年的纪念品
-   讲述产品背后的故事或品牌文化来建立情感连接，增加用户的忠诚度。例如，可以通过视频、文章或社交媒体等方式展示产品的创始人故事或产品开发历程
-   如果产品存在收费服务可以通过限时优惠、限量特供等方式营造产品的稀缺感，增加用户购买的决心和紧迫感

如果我的文章对你有帮助，您的👍就是对我的最大支持^_^。  
往期文章：<http://linglan01.cn/about>

《影响力》阅读总结+一些产品推广的思考

**睡后收入**是指躺着也有收入，你不用去做些什么，收入就会持续的增加。 

我们平时上班赚的钱叫"主动收入"，干一天才能有一天的工资收入，一旦你停止干活，收入随之停止了。



睡后收入的概念源于美国商业和投资大师罗伯特·基奥西亚的畅销书《富爸爸，穷爸爸》。罗伯特认为，睡后收入是财务自由的关键之一，因为它可以让人们获得更多的时间和自由，而不必为了赚钱而不断工作。

最直观的例子：收租，一种拥有睡后收入简单粗暴的方式，假如在04年你在北京东三环入手2套房产，当时价格为500万/套，如今它们的估价已攀升至2000万/套。如果出售，那么在过去19年间，你的2套房产已为你赚了3000万；如果选择出租一套的话，如今每月可以获得20000元/月的租金，这笔租金就是你的“睡后收入”啦！而且这笔租金还将随着市场而看涨，源源不断流入你的账户，就算提前退休也可以生活的安逸富足。

用于二次出售、收租的房子就是你的资产，你的资产在帮你赚钱，睡后收入的主要来源就是靠资产性收入，所以建立属于自己的资产是获取睡后收入的最重要的途径。

获取"睡后收入"前，往往需要长时间的劳动和积累。

**一个人要想真正赚到钱，就必须不断的建立自己的资产。**

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

往期文章：<http://linglan01.cn/about>

什么是睡后收入 

春风折好‮我了‬给你写的信，留给每个路过‮人的‬一首诗

夏日偷看了我‮你给‬写的信，蓝‮白天‬云日落‮时‬一眼深情

落叶弄丢‮我了‬给你‮的写‬信，惆怅‮努在‬力配合我的足音

晴雪听说了‮给我‬你写的信，以身犯险有关‮你于‬的细节

## 我的flag

2022年终总结[平淡无奇，2022年终总结](https://juejin.cn/post/7178098754254274618#heading-7)中立的flag：

-   完成15篇文章
-   搞钱



完成情况：

-   完成九篇原创技术类文章，一篇读书总结
    -   [学会Pointer指针事件 ，一套拖拽事件两端(PC端、移动端)跑](https://juejin.cn/post/7250268273639669821)
    -   [mitt用100行实现发布-订阅模式还收获了9k的Star](https://juejin.cn/post/7241114001323982903)
    -   [《软技能：代码以外的生存指南》阅读总结](https://juejin.cn/post/7234692426689249317)
    -   [Node.js版本管理工具，我选择n](https://juejin.cn/post/7231834021055250490)
    -   [从张鑫旭的demo中，我学到了图像拉伸的原理](https://juejin.cn/post/7227986137457229885)
    -   [前端切图仔入门Docker，三分钟上线自己的博客平台](https://juejin.cn/post/7224137483297734715)
    -   [Node.js搭建Https服务](https://juejin.cn/post/7213956241614159933)
    -   [【Node.js】ssh2.js+Shell一套组合拳下来，一年要花2080分钟做的工作竟然节省到52分钟～](https://juejin.cn/post/7194340178939347000)
    -   [【Node.js】写一个数据自动整理成表格的脚本](https://juejin.cn/post/7188320646412107835)
    -   [Node.js操作Dom ，轻松hold住简单爬虫](https://juejin.cn/post/7184260401139220536)

-   收入来源主要还是工资，过于单一，也在积极探索睡后收入的可能性，很多想法还停留在我电脑的备忘录里

## 其他的

-   完成2022年的一个flag：掘金创作者等级达到[Lv4](https://juejin.cn/pin/7229877399344807991) 。启航计划第五期活动中得到[优质证书](https://juejin.cn/pin/7239976106020732983)
    
  ![image.png](http://www.linglan01.cn/static/img/42ea409407a0a9181a779f190fff2bfc.image.webp)
-   坚持运动，无特殊情况频率会保持每周二至三次的跑步或骑车活动；体质怕冷，到冬天就不想动了；运动给我带来两处明显的改变：1. 皮肤改善，还被异性夸皮肤好；2. 自信，坚持做一件小事能增强自信心。
    

![image.png](http://www.linglan01.cn/static/img/218360ffd0064c9096d0db9d8e4c64e2.image.webp)
-   刻意培养阅读习惯，看完了4本书[《软能力》](https://book.douban.com/subject/35922870/)、[《代码之外的生存指南》、《影响力》](https://book.douban.com/subject/26835090/)、[《人性的弱点》](https://book.douban.com/subject/27048361/)，输出了一份阅读总结[《软技能：代码以外的生存指南》阅读总结](https://juejin.cn/post/7234692426689249317)，其他书籍也会输出阅读总结。题外话：认识了一位网友，他今年看了二十来本书，很强的自律能力。我向他问了两个问题，第一个问题：你是怎么做到这么自律的，他的回答：1. 个人成长五大法宝，早起、冥想、读书、写作、运动；2. 潜意识告诉自己读书很有用就好了，我是不用短视频相关的产品的，这省下我很多时间，已经将近两年了。我的第二个问题：推荐一本你认为对自己最有帮助的一本书，他的回答：《改变过我自己精神世界的》、《平凡的世界》、《活着》、《红与黑》、《百年孤独》、《人类简史》、《世界很喧嚣、做自己就好》。

![image.png](http://www.linglan01.cn/static/img/5099407c2ff9299dedd50da88747c9f0.image.webp)
-   尝试独立开发运营一个ChatGPT小程序，结果失败了。小程序服务只存在了一段时间，总结失败后有以下感悟：


    -   想凭借大火的ChatGPT变现，最快的方式是：运营一个知识星球收取报名费教普通人使用ChatGPT变现、卖课，而不是开发一个产品对个人来说投入的成本不小
    -   个人卷不过企业，除非你的想法特别新颖，其他人很难想到
    -   一个新事物大火时，尽早关注相关行业的龙头企业股票，股票往往会涨一波。在网络热度过去前反应及时，一般能小赚一笔

## 最后

不立新的flag，脚踏实地完成已有的flag，把自己的想法尝试落地下。

近期，有想做b站up主的想法，也可以去尝试下。

往期文章：[linglan01.cn/about](https://link.juejin.cn/?target=http%3A%2F%2Flinglan01.cn%2Fabout "http://linglan01.cn/about")