详细认识下flex布局父元素身上的属性

上一节简单介绍了下flex的作用以及关于flex的两个小案例，来超链接自适应布局之初识flex（一），接着上章节的进度，我继续去描述所谓的66大顺（父子元素flex属性的配置）的含义，另外便于理解，新增flex中的两条轴介绍。

两条轴

这两条轴划定了flex布局总的方向，有了大方向才能指引孩子们的排列方式对不对？主轴（main-axis） and 交叉轴（cross-axis）

其实简单讲：flex-direction 定义的方向就是主轴方向！默认row

交叉轴方向与主轴方向垂直！

这里如果不明白的话，那么请接着看~

指定子项元素是如何在flex容器中布局的，通俗的讲是规定子元素横向排列 还是 纵向排列，默认值（row），这里定义的就是主轴方向（横向or纵向，如下图所示）

首先方向有两个横向或者纵向，其次还配有取反操作，所以共有四个属性值

flex-direction: 'column-reverse' | 'column' |  'row(默认值)' | 'row-reverse'

可以让子元素在必要时换行，默认值（no-wrap），这里必要时是指子元素太多了，父元素的宽度不够，子元素应不应该换行

flex-wrap: 	'nowrap' (默认值) | 'wrap' | 'wrap-reverse';

没有特殊的功能，仅仅提供 flex-direction + flex-wrap 的简写形式

flex-flow: 	<'flex-direction'>  <'flex-wrap'>;

定义主轴方向如何对齐，这个属性和 flex-direction的属性值有很大关系！

justify-content: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 						 'inherit';

flex-start，子元素左对齐（向左贴合靠拢），子元素之间是没有空隙的；
flex-end，子元素右对齐（都向右贴合靠拢了）；
center，项目在父元素中居中；
space-between，两边子元素两端对齐，其余的子元素均分剩余宽度（这个是指父元素宽度减去所有子元素宽度之和后的多余宽度，将有中间的子元素去均分它，比如当前中间有一个子元素，那么剩余宽度将一分为二，围绕在中间子元素两边，依次类推，中间有两个子元素时，剩余空间将分成三等分）；
space-around，剩余分配空间比例如图上所示！道理和上面的space-between一样；
space-evenly，剩余分配空间比例如图上所示！道理和上面的space-between一样；

justify-content小结：主要定义子项在主轴上如何排列，常用属性一加粗，当然这个属性的值并不是只有列举出来的6个，更多请看MDN

定义子项在交叉轴（侧轴）上如何对齐，我常用的有center、flex-end、flex-start，最好你能去MDN上看看它提供的实例，以便于自己的理解。

align-items: 'flex-start' | 'center' | 'flex-end';

定义多条轴线时，轴线之间该如何排列，属性值和justify-content差不多，我常用的有center、end、start，最好你能去MDN上看看它提供的实例，以便于自己的理解，我这里就不赘述了。

注意点：单根轴线时，你设置什么值都无效！！

align-content: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';

通过上面几个属性的介绍，我们不难看出，容器（父元素）身上的属性都是在定义大的方向上的方针，对于项目（子元素）身上的细节不做处理，就像我们写作文一样，先把框架构思好，然后再去实现细节类似~~~下面一章就将进入到子项属性介绍了！