开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情
大家好，我是林家少爷，是一位专注于前端技术，立志成为前端技术专家的热血青年。
从2023年2月17日开始，我决定开辟一个新的专栏【刷爆LeetCode】，每天至少刷一道LeetCode原题，并且使用Typescript和原生JS来编写代码。
今天是第6天ヾ(◍°∇°◍)ﾉﾞ
不知不觉已经持续更新了10天，现在是晚上23:12，估计写完这篇文章又得踩点。
刚好今天接了一个小私单，我花了两个小时完成，800大洋到手。
私单是做小程序，小程序默认就是使用flex布局，虽然有3个月时间没写过小程序代码，但是对于小程序的语法还是还是很熟悉的，基本上看着需求就已经大致知道怎么写，有哪些坑。
不如借着这个机会跟大家好好讲讲Flexbox布局。
Flexbox布局概念
Flex布局是一个完整的模块，它包括了一整套完整的属性。其中才用Flex布局的元素，成为Flex容器。它的所有子元素就是容器成员，成为Flex项目。
Flexbox布局也叫作Flex布局，弹性盒子布局，它的目标就是提供一个更加有效的布局、对齐方式，并且能够使父元素在子元素的大小动态变化的情况下，仍然能够分配好子元素之间的空隙。
主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素，使得子元素既可以尽可能填充可用空间，也可以收缩子元素使之不溢出。
Flex布局更适合小规模的布局，但是，设为Flex布局之后，其子元素的float、clear和vertical-align属性将会失效！
ps：浮动布局失效了好，让我想起当年适配IE的不堪往事o(╥﹏╥)o
容器默认存在两个轴：水平轴和垂直轴。
项目中默认是沿主轴排列，也就是水平轴。
这里涉及几个重要知识点，敲黑板！！
main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
main size: 单个项目占据主轴的长度大小。
cross axis: 交叉轴，与主轴垂直。
cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
cross size: 子元素在交叉轴方向上的大小。
父元素属性
先上一段小程序源码：
<view class="container"></>
.container {
display: flex | inline-flex;
}
在这里有两种方式可以设置flex布局，使用display:flex;会生成一个块状的flex容器盒子，使用
display:inline-flex;
会生成一个行内的flex容器盒子。
如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。
多数情况下，我们都会使用display:flex;
父元素（容器）可以设置六个属性：
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
下面我会逐一来讲讲这6个属性。
flex-direction
flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿
flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿
flex-direction: column：沿垂直主轴从上到下排列，起点在上沿
flex-direction: column-reverse：沿垂直主轴从下到上排列，起点在下沿
flex-wrap
flex-wrap：容器内元素是否可以换行，它有三个属性值：
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap: nowrap：默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行。
flex-wrap: wrap：换行，第一行在上面
flex-wrap: wrap-reverse：换行，第一行在下面
flex-flow
flex-flow :
flex-direction属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap，用处不大，最好还是分开来写。该属性的书写格式如下：
.container {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content
justify-content：元素在主轴的对齐方式，它有五个属性值
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
这里以水平方向为主轴进行举例，即flex-direction: row。
justify-content : flex-start：默认值，元素在主轴上左对齐（上对齐）
justify-content : flex-end：元素在主轴上右对齐（下对齐）
justify-content : center ：元素在主轴上居中对齐
justify-content : space-between：元素在主轴上两端对齐，元素之间间隔相等
justify-content : space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
align-item：元素在交叉轴上的对齐方式，它有五个属性值：
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
这里以水平方向为主轴进行举例，即flex-direction: row。
align-item：flex-start：交叉轴的起点对齐（上面或左边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px。
align-item：flex-end：交叉轴的终点对齐（下面或右边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px。
align-item：center：交叉轴的中点对齐。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px。
align-item：stretch：默认值、如果元素未设置高度或设为auto，将占满整个容器的高度。假设容器高度设置为 100px，而项目没有设置高度，则项目的高度也为 100px。
align-item：baseline：以元素的第一行文字的基线对齐。
align-content
align-content：多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。它有六个属性值
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
那么问题来了，那这个轴线数怎么确定呢？
实际上这主要是由flex-wrap属性决定的。
当flex-wrap 设置为 nowrap 时，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。当 flex-wrap 设置为 wrap 时，容器可能会出现多条轴线，这时就需要去设置多条轴线之间的对齐方式。
这里以水平方向为主轴时举例，即：flex-direction: row; flex-wrap: wrap;
align-content: stretch：默认值，轴线占满整个交叉轴。这里我们先设置每个项目都是固定宽度。
align-content: flex-start：从交叉轴开始位置填充
align-content: flex-end：从交叉轴结尾位置填充
align-content: center：与交叉轴中点对齐
align-content: space-between：与交叉轴两端对齐，轴线之前的间隔平均分布
align-content: space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
原本我还打算没写一行代码就配个图片，加以说明，但是我看了看写到现在的时间：
还剩15分钟极限冲刺，看来原本计划写的子元素的布局，留给下一期了。
前面说到我接了一些小私单，其实是两个，一个是做校园的交互小程序，带有一点任务性质的，用于工作展示用的，虽然没有UI界面，但是并不难。
还有一个是独自开得小项目，300大洋写8个页面，预计一晚上两个小时做完。
再拖太久就没亏本了！
我一天的日薪都不止1000块，所以两个小私单（800+300），我是计算过绝对不可以超过一天。
虽然是小钱，但是有钱赚为什么不赚，任何一个一百万都是从一块钱开始赚起来的，千万不要嫌弃这些小钱，这些都是我的原始积累。
有机会跟大家交流一下我的理财观，以及我过往做过哪些副业尝试，哪些赚到钱，哪些血本无归，重点讲教训。
分享一下这两个私单，收钱的感觉实在太美妙了！
以后有私单欢迎来砸我，我爱钱，有钱才能更好的生活(*^▽^*)
今天的分享到这里就结束啦，下一期继续分享我的所思所想，喜欢我的文章务必一键三连。
