js基础--flex弹性布局的属性

容器属性：

1. flex-direction 属性 决定主轴的方向（即项目的排列方向）
   row(默认值): 主轴为水平方向，起点在左端；
   row-reverse: 主轴在水平方向，起点在右端；
   column: 主轴为垂直方向，起点在上沿；
   column-reverse: 主轴为垂直方向，起点在下沿；
2. flex-wrap属性 （定义是否换行）
   nowrap(默认): 不换行，当容器宽度不够时，每个项目会被挤压宽度；
   wrap: 换行，并且第一行在容器最上方；
   wrap-reserve: 换行，并且第一行在容器最下方
3. flex-flow 属性
   flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap
4. jusitify-content属性 定义了项目在主轴上的对齐方式
   flex-start(默认值): 左对齐
   flex-end: 右对齐
   center: 居中
   space-between: 两端对齐，项目之间都相等
   space-evenly: 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍
5. align-items属性 单根轴线
   flex-start: 交叉轴的起点对齐
   flex-end: 交叉轴的终点对齐
   center: 交叉轴的中点对齐
   baseline: 项目的第一行文字的基线对齐
   stretch(默认值): 如果项目未设置高度或设为auto，将占满整个容器的高度
6. align-content属性 多根轴线
   flex-start
   flex-end
   center
   space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
   space-around: 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比边框的间隔大一倍
   stretch(默认值): 轴线占满整个交叉轴

项目属性：

1. order
   属性设置{order: 数字;}
   给该子项添加了该属性，他们会按照order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow
   属性设置{flex-grow: 数字;}
   默认为0，即如果存在剩余空间，也不放大。
   设置给谁，谁就分配剩余空间，一个元素就占满剩余空间，多个元素就按照设置的数值大小比列来平分元素剩余空间。
3. flex-shrink
   属性设置 {flex-shrink: 数字;}
   属性定义了项目 的缩小比例，默认为1，即如果空间不足，该项目将缩小。明显这与flex-grow正好相反。
   这个属性是在项目占满容器的时候使用，并且设置元素的缩小。
4. flex-basis
   属性设置 {flex-basis: 单位;} 默认是auto
   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。实际就是给项目设置的宽度，我们使用width一样可以设置，但是如果设置了width又设置了这个属性，flex-basis > width(优先级)。
5. flex
   属性设置 {flex: flex-grow flex-shrink flex-basis;}
   flex属性是flex-grow、flex-shrink、flex-basis的简写。
   flex: 1是什么意思？
   flex-grow(定义弹性盒子项的拉伸因子)、flex-shrink(flex元素的收缩规则)、flex-basis(决定flex元素的内容盒的尺寸)的简写
   页面自适应，伸缩也方便。
6. align-self
   属性设置 {align-self: auto | flex-start | flex-end | center | baseline | stretch;}
   align-self属性允许某个项目有与其他项目不一样的对齐方式，可覆盖align-item属性。
   对某子项单独设置交叉轴的对齐方式可以使用改善属性。