flex弹性盒子布局基础知识

flex布局

容器的属性

• 容器的属性
  1.flex-direction 决定item的排列方向
  row 、row-reverse、 column、 column-reverse
  2.flex-wrap 排列不下时，item如何换行
  nowrap、wrap、wrap-reverse
  3.flex-flow flex-direction和flex-wrap的简写，
  row nowrap
  4.justify-content item在主轴上的对齐方式
  flex-start flex-end center space-between space-around
  5.align-items item在交叉轴上的对其方式
  flex-start flex-end center baseline(文字对齐) stretch(伸缩)
  6.align-content 多根轴线的对其方式
  flex-start flex-end center space-between space-around stretch
• item的属性
  1.order 定义item的排列顺序，默认为0，越小越靠前
  2.flex-grow 当有多余空间时，item的放大比例，默认为0，即有多余空间也不放大
  flex-grow:2 flex-grow:2 flex-grow:1
  即把多余空间分成5分，第一、二个项目增加2份，第三个项目增加1份
  3.flex-shrink 当空间不足时，item的缩小比例，默认为1，即空间不足时所辖
  flex-shrink:2 flex-shrink:2 flex-shrink:1
  把需要缩放的空间分成5份，例如：要缩放200px，则第一个item要缩小80px,最后一个项目缩小40px
  4.flex-basis 项目在主轴上占据的空间，长度值，默认为auto
  5.flex:grow shrink basis的缩写，默认：0 1 auto
  6.align-self 单个item的独特对齐方式，同align-items，可覆盖align-items属性