学习整理--flex布局（1）

父元素容器属性

• flex-direction： row(默认)、row-reverse、column、column-reverse
  
  row： 横向正序排列子元素
  
  colimn： 竖向正序排列子元素
  
  row-reverse 横向倒序排列子元素
  
  column-reverse 竖向倒序排列子元素
• flex-wrap：nowrap（默认）、wrap、wrap-reverse
  
  nowrap： 不换行（子元素强行等分容器宽度）
  
  wrap： 换行（子元素固定宽度，超出即换行从顶部向下）
  
  wrap-reverse： 同wrap，超出从底部向上换行
• flex-flow：flex-direction和flex-wrap的简写集合，默认为横向不换行
  
  值==》flex-direction,flex-wrap
• （设置x轴）justify-content：flex-start（默认）、flex-end、center、space-between、space-around、space-evenly
  
  flex-start：左对齐
  
  flex-end： 右对齐
  
  center： 居中
  
  space-between：左右两侧紧贴容器，子元素间距相同
  
  space-around： 子元素间距为左右两侧距离容器边侧两倍值
  
  space-evenly： 子元素间距与边距相同
• （设置y轴）align-items：flex-start、flex-end、center、baseline、stretch（默认）
  
  stretch：子元素不设置高度（高度与容器相同）
  
  flex-start：子元素紧贴容器顶部
  
  flex-end： 子元素紧贴容器底部
  
  center： 子元素居中排列
  
  baseline： 以子元素第一行文字高度为基线排列
• align-content：flex-start、flex-end、center、space-between、space-around、space-evenly、stretch（默认）
  
  控制多行项目对齐方式，只有一行不起作用
  
  stretch：项目未设置高度或高度为auto时填满整个容器
  
  flex-start、center、flex-end与align-items相同
  
  space-around、space-between、space-evenly与justify-content相同

子元素属性

order（排列顺序）、flex-grow（是否放大）、flex-shrink（是否缩小）、flex-basis（设置width，权重高于width属性）、flex（缩放宽度属性集合）、align-self（继承父元素的align-items属性）

• order： 默认0，数值越小排列越靠前
• flex-grow： 默认0，有剩余空间时是否放大（默认不放大，值为数字）
• flex-shrink： 默认1，空间不足时等比缩小，为0时空间不足自身也不会缩小
• flex-basis： 默认auto，保持默认宽度或以width为自身宽度，值等同于width且权重高于width
• flex： 默认0 1 auto ，flex-grow、flex-shrink、flex-arsis集合缩写，定义项目放大、缩小、宽度
  
  快捷值：auto（1 1 auto）等分放大缩小 none（0 0 auto）不放大，但等分缩小
• align-self： 默认auto（无父元素默认值为stretch），与align-items相同