前端笔记之flex布局

display:'flex'

将对象作为弹性伸缩盒展示，用于块级元素；（div 也是块级元素）

flex-direction：row | row-reverse | column | column-reverse

用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置（决定主轴的方向（即项目的排列方向） 默认的主轴是 横向 的，从左到右排列，另一条轴叫做 交叉轴，也就是我们理解的纵向。

row（默认值）：主轴为水平方向，起点在容器的左端

row-reverse：主轴还是横向的，只是里面项目的 排列方式不一样， 是从右向左的

column :把主轴变成 纵向的，排列方式 也就变成了，从上向下,

column-reverse:主轴变成 纵向的，排列方式颠倒， 从下向上排列。

flex-wrap: nowrap | wrap | wrap-reverse

norwarp(默认值):规定灵活的项目不拆行或不拆列。

wrap : 规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse : 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序

flex-flow: flex-direction 和 flex-wrap 属性的复合属性。

justify-content: flex-start|flex-end|center|space-between|space-around

justify-content 定义了项目在主轴上的对齐方式。

flex-start(默认值):项目位于容器的开头。

flex-end:项目位于容器的结尾。

center ：项目位于容器的中心。

space-between：项目位于各行之间留有空白的容器内。

space-around ：项目位于各行之前、之间、之后都留有空白的容器内。

align-content： 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex-basis:设置弹性盒伸缩基准值。

flex-grow:设置弹性盒子的扩展比率。

flex-shrink:设置弹性盒子的缩小比率。

flex:flex-grow、flex-shrink 和 flex-basis 属性的简写属性。