这是我参与「第四届青训营 」笔记创作活动的第7天。
我这拖拖拉拉的毛病真是没救了，上篇笔记编辑好后硬是拖着没发，下篇也迟迟没动笔，真想狠狠地打自己一下==
今天来给自己做个Flexbox布局的笔记吧……
Flexbox
Flexbox主要有三个方面的设定，它们分别是Flex Container,Flex item
flex container
flex-direction
flex-direction是指div在外面大的div里是怎么排列的。flex-direction值为row时，所有div排成一行，值为column时则排成一列。 flex-direction:row时，main-axis是row,cross-axis是column。 justify-content设为center，沿着主轴置中对齐。 align-items:center,则沿着交叉轴置中对齐。 除了center，还有flex-start,flex-end属性值，分别表示沿轴起始方向，沿轴结束方向。
flex-direction:column时，main-axis是column,cross-axis是row。 除此以外，还有align-content属性，它用来设定box多于1行时的对齐方式。 当属性值为space-between时，效果如图
当属性值为center时：盒子们直接被居中放置。 space-around vs space-evenly
接下来谈谈Flex Item……
Flex Item
- order
order用来调整item的排列顺序，默认order值为0,order值大的放在后面，小的放在前面。
- align-self
该属性用来覆改flex container的align-items设定值
- flex-basis
该属性设置主轴方向的元素大小。flex-basis设置为auto，元素的大小则有本身width和height决定
Grid
Grid和FlexBox的最大不同在于：FlexBox是一维排版方式，而Grid是二维排版方式。Flex Box只能控制一个方向，而Grid可以控制两个方向。
设置grid布局，则需display:grid
如何在grid-container里设定“分格”？
grid-template-rows:100px 100px 100px 100px 100px;表示垂直方向分出5个高度100px的空间。
grid-template-columns:100px 100px 100px 100px 100px;表示水平方向分出5个高度100px的空间。
将元素填充进去，例如：
如果想要表示从某线延伸几格到哪个线可以写成grid-row:1/span 3;从1开始延伸3格
Grid line
类似于坐标尺
fr
这是一个专门用在grid里的比例单位
