鉴于近日群里有一些小伙伴对于flex布局不是很清楚，我决定总结flex的相关知识点，希望能加深大家的印象，同时也是对自身的知识点的再次梳理。
本系列文章共有三篇，这是第一篇，介绍父容器上的flex属性，在看文章之前，请大家先在脑海中建立一个直角坐标系，这样会有助于更好的理解和记忆。
属性点梳理
"工欲善其事必先利其器"，在这里我们还是很有必要进行知识点的梳理。
一个大前提是：我们国家的书写方向是从左往右，从上往下 。
>容器盒子属性
** 1）：flex-direction **
规定盒子容器主轴方向，可以是水平方向和垂直方向，另外侧轴一定是垂直于主轴方向的。
** 2）：flex-wrap **
规定flex容器主轴上放不下项目的时候，要不要进行换行，以及怎么换行。
**3）：flex-flow **
前面两个属性的集合，可以一并设置主轴和换行的属性。
**4）：align-items **
控制了项目在flex容器侧轴方向上的对齐方式。
**5）：justify-content **
控制了项目在flex容器主轴方向上的对齐方式。
**6）：align-content **
本属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
时刻牢记这个概念：盒模型直角坐标系中，无论主轴方向是水平还是竖直方向，侧轴永远垂直于主轴，侧轴方向只有两种选择：从上到下、从左到右。
记忆和理解
理解是建立在记忆的基础上，如果没有正确的去记忆和理解，那么在项目中运用就比较困难。
我们从生活中的一个小例子进行形象的理解。
某一天你去街边小摊上买了一串羊肉串，当别人都在大快朵颐的时候，你却盯着这个肉串发呆，你的脑海中正在构建着一些Flex的知识视图模型：
flex-direction排布方向属性理解：
> flex-direction:row
你左手拿着肉串，将它横着摆放在自己的眼前，你发现：咦，这不就是flex容器的主轴为row的方向吗？ 没错了 这个样子就是我们日常书写方式下的主轴默认值：水平从左往右。
> flex-direction:row-reverse
肉串太大了，你左手保持这个姿势有点累，你换成了右手，你发现：咦，这不就是flex容器方向的水平从右往左吗？没错了，row-reverse就是和平时的书写方式反向的呈现。
> flex-direction:column-reverse
诶，右手又累了，换到左手吧，这个时候发现肉油要滴下来了，你赶忙把羊肉串竖立了起来，你发现：咦，这不就是flex容器主轴为column垂直从下到上的方向吗？没错了，主轴的方向这个时候就是从下往上，侧轴变成了水平垂直方向从左往右。
> flex-direction: column
好吧，我实在想象不出来有谁会把羊肉串从上到下这么拿着，姑且你就是这么拿着的吧。这个时候，你发现，咦？这个不就是flex主轴从上到下的方向吗？没错了，这个时候主轴方向还是垂直方向，只是变成了从上到下。侧轴没有变化依然是水平方向从左往右。
flex-wrap项目换行属性理解：
> flex-wrap:wrap
运气不好，竹签断了一节，羊肉粒排不下了，没办法只能假装吃两根羊肉串了，这时候，你发现，这不就是换行吗？项目在flex一行中排列不下了，那么wrap属性值就指定了，这个时候可以进行换行，第一行在上，第二行在下方。
> flex-wrap:wrap-reverse
有了之前的经验，很自然的就想到了，反转换行，将原本是最后一行的内容换到最上面来。这个属性并不是很常用，掌握了wrap稍加思考就能掌握reverse。
> flex-wrap:nowrap
如果你有强迫症，认为分行就失去了羊肉串的意义，ok满足你的需求，本属性概念就是无论flex容器多么挤，都不进行换行。就好比，哪怕竹签断了一节，都要把肉粒挤在原本的那根竹签里面。
flex-flow flex-direction、flex-wrap属性的集合：
这个属性是方便偷懒的属性，就好比margin属性可以设置top、left、bottom、right四个值。
justify-content规定项目在主轴对齐方式属性理解：
> justify-content:flex-start
项目从flex容器沿着主轴方向的起始点到终点进行依次紧密排列。将整个羊肉串作为容器，主轴方向从拿着竹签的手开始到竹签尖头作为结束，距离手最近的一粒肉作为项目的开始，尖头处作为项目排队列的末尾。 类似word里面的左对齐。
> justify-content:flex-end
你发现最上面那一粒距离竹签尖头部位还有好长一段 为了能够轻松的吃到羊肉粒，你把羊肉粒都往尖头处移动，这个时候，主轴起点就是你的手，主轴末尾就是竹签的尖头处，你发现羊肉粒距离你的手越来越远了，离竹签尖头处越来越近，那么这个就是flex-end对齐，类似于word里面的右对齐。
> justify-content: center
这个就简单了，所有内部项目沿着flex容器的主轴方向进行居中对齐。
当你对你的羊肉串设置justify-content：center属性后，你会发现，你手到最近一颗肉粒的距离和竹签尖头到最近一颗肉粒的距离都是相同的，类似于word里面的居中对齐。
> justify-content:space-around
开吃吧，吃第一粒的时候你又发现了一个问题，每一粒排列这么紧密，会沾到嘴巴旁边，感觉不爽。你开始一粒粒将他们分开，然而这个时候你的强迫症又犯了，感觉随便分开每粒之间的距离，没有美感。你开始等距离分开每一粒肉，结果是保证每一粒肉之间的距离都相同，并且首尾两粒到主轴起点和终点的距离也都相同。这个在你看来是完美的分段比例。
> justify-content:space-between
这个例子有点脏，中间的肉粒之间的距离保持相同，距离手最近的那一粒肉直接接触到了你的手，也就是手和肉粒之间的距离是0，同样的，距离竹签尖头最近的肉粒和竹签的距离也是0。实现了两端对齐，不知道是怎么想的，我感觉有点脏，手会变得很油腻诶。
align-items项目侧轴排列方式
> align-items:flex-start
项目在侧轴上对齐的方式是：从侧轴的起点开始进行布局。flex容器内项目紧紧贴住容器侧轴的起始位置（有margin之类的值，会导致出现空缺，符合逻辑）。
> align-items:flex-end
项目在侧轴上的对齐方式是：从侧轴的结束位置开始进行布局。flex容器内项目紧紧贴在容器侧轴的结束位置（有margin之类的值，会导致出现空缺，符合逻辑）。
> align-items:flex-center
项目在容器内部的对齐方式是：侧轴方向居中对齐的布局的样式。flex容器内项目距离侧轴起点和侧轴终点的距离相等。
> align-items:flex-stretch
项目在容器内部的对齐方式是：侧轴方向的空间将被整个项目所充满。
当然要想stretch能起到作用，要满足的条件是（这里的条件仅在主轴是水平方向适用）：1、flex容器高度最好是一个固定值；2、容器内部项目不要设置高度（这个高度由强大的浏览器来进行计算）。 如下图所示：每一个item高度都不是固定值。
> align-items:flex-baseline
咋看一下baseline，翻译是“基线”，提到这个基线，相信很多同学是深恶痛绝，太难控制。
在flex容器中设置baseline，就会比较简单合乎常理，我们通过一个简单的例子来进行理解：
体育课上，老师要求同学一排站好，然后这个老师也天马行空，认为这样还是不整齐，然后他搬来了很多高矮不一的凳子，大家都不知道他要干嘛。后来我才发现，这哥们认为只有每个人的下巴在同一条水平线上，这样才好看，才整齐，那么好了，以谁的下巴为基准呢？我们很自然的得出，以身高最高的那个同学的下巴作为基准线，那么矮的同学站在凳子上吧，争取下巴能达到基准线。
回到我们的baseline上面来，这里的基准线要想有效果，需要满足这么个条件：1、item项目内部最好有内容；2、item项目内部的lineheight属性需要设置。
那么满足这样的条件后，基准线就是lineheight值最大的那个项目作为基准线。其他的Item只能搬凳子了。
align-content项目在多跟轴线上的对齐方式，如果只有一根轴线则不起作用，也意思就是要想该属性发挥作用的前提就是必须要让项目进行分行。要更好的理解这个属性，我们需要建立一个整体法的思考方式，就像我们高中物理受力分析所运用的整体法一样。
> align-content:flex-start
每一行的项目，从侧轴顶部开始排列，每一行之间没有行间距，看起来和aligin-items:flex-start有点像，我们通过效果图的方式来进行分别。
> align-content:center
项目所有行作为一个整体，距离侧轴的起点和距离侧轴的终点距离相同。
> align-content:flex-end
多行项目整体对齐到侧轴底部。
> align-content:space-around
每一行项目在侧轴方向，均匀分布，两端距离相等，每一行之间的间距相等。
> align-content:space-between
项目整体沿着侧轴方向两端对齐布局，项目内部每行之间的距离都相等。
总结
讲了这么多，平时一定要刻意地去思考，去建立坐标模型，只要是二维直角坐标系的物体，都能成为我们建立模型的一个实物参照。
下一篇将介绍项目items的相关属性。
