flex
在容器上设置的属性
-
需要在父元素也就是容器上设置 display:flex 或 display:inline-flex才能使用flex布局
-
设置子元素的布局方向，需要在父元素上设置flex-direction属性，这个属性的取值为 row（默认的，左至右水平布局） | row-reverse（右至左水平布局） | column（上至下垂直布局） | column-reverse（下至上垂直布局）
-
在水平布局时可以设置子元素大小超过父元素时的换行方式，flex-wrap: nowrap（默认的，不换行，所有子元素在一行） | wrap（换行第一行在上方） | wrap-reverse（换行第一行在下方）
-
flex-flow:flex-direction flex-wrap默认值为row nowrap是简写形式，（flex-flow:换行方式 是否换行）
-
justify-content只有在有多余空间时才会生效，flex-start（默认值，左对齐）| flex-end（右对齐）| center（居中） | space-between（两端对齐，项目之间的间隔都相等）space-around（所有项目间隔一样，距离边框是项目间隔的一半）
-
align-items定义项目在交叉轴的对齐方式，把每个项目设置的align-self设置为值，比如父元素上定义的对齐方式是水平对齐，这个属性定义的就是水平对齐的方式，有如下几个属性 flex-start（左对齐或者上对齐） | flex-end（右对齐或下对齐） | center（居中对齐） | baseline（文字底部对齐） | stretch（项目未设置宽度高度将铺满容器，水平对齐时高度铺面，垂直对齐时铺满宽度）
在项目上的定义
-
order : 数字，定义了项目的排列位置，值越小排的越靠前
-
flex-grow 规定了项目如何分配父元素剩余空间，默认为0
-
flex-shrink 规定了项目空间不足时缩小比例，默认为1，全部项目一起缩小
-
flex-basis 设置这个属性和父元素水平时设置width一样，如果父元素是垂直这个属性就是定义的高度，优先级比width和height高
-
flex : flex-grow flex-shrink flex-basis , flex是放大，缩小，宽高的缩写，默认值为0 1 auto
-
align-self 覆盖 flex-items 的设置
-
align-items: center 设置在项目上会规定项目内的内容的布局方式，baseline（文字底部对齐），center(居中对齐)，flex-end（对齐父元素底部），flex-start（对齐父元素顶部）
