前端-flex布局

虽然平时写项目使用了flex布局，但是个人感觉只是用了flex布局的一些基础功能，例如flex-direction、justify-content、align-items等常用属性，趁着考试，好好复习了一下flex布局的其他一些属性，好在适当的场合下使用,常用属性如下

• flex-direction
  • 设置主轴方向
  • row(默认)、row-reverse、column、column-reverse
• flex-wrap
  • 默认所有的item在一行排列，当空间不足时，会缩放
  • nowrap(默认)、wrap(多的部分向下换行)、wrap-reverse(多的部分向上换行)
• flex-flow
  • flex-flow: flex-direction 、 flex-wrap 的简写
• justify-content
  • 设置元素在主轴上的排列方式
  • flex-start 、 flex-end 、 center
  • space-between(最前和最后两个元素贴边，之后相邻的两个元素间距相等）
  • space-around(每个item的左右margin相同，故最前和最后的两个元素距到边的距离是任意两个item距离的一半)
  • space-evenly ( 最前和最后两个元素到边的距离和相邻两个item的距离相等)
• align-items
  • 单列下使用，设置items在纵轴上的排列方式
  • flex布局下的item，没有设置高度的话默认高度为父元素的高度
  • stretch(默认)、flex-start、flex-end、center
  • baseline（文字的底部对齐）
• align-content
  • 多列布局下使用
  • 在多列下，若item没有设置height，那么每个item的height是父元素的height平分
  • stretch(默认)、flex-start、flex-end、center
  • space-between、space-around、space-evenly
• order
  • order用于设置item的排列顺序，每个item的默认order为0，order值越小，排列越靠前
  • Integer
• flex-grow
  • 设置当宽度存在剩余时，设置的当前拉伸程度，默认值为0，即有剩余不拉伸
  • Integer
• flex-shrink
  • 设置当空间不足时，对应的item的收缩程度，默认值为1，即空间不够默认收缩
  • 可以设置为0实现响应式
• align-self
  • 设置align-items可以设置item的纵轴排列，通过align-self对单独的某一个item设置在纵轴的排列方式
  • 属性值同align-items值
• flex
  • flex属性是flex-grow、flex-shrink、flex-basis的合写形式
  • 后两个属性可写，一般适用flex: 1，是对于的item宽度自适应
  • flex: auto (1 , 1 , auto) === flex: 1
  • flex: none(0,0,auto) == flex-shrink: 0,