flex布局

认识flex布局

开启了flex布局的元素叫flex container
flex container里面的直接子元素叫做flex items

开启flex布局方式:
设置display: flex; flex container以block-level形式存在
设置display: inline-flex; flex container以inline-level形式存在

flex布局模型

flex布局模型

flex相关属性

• flex-direction
  flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布。
  flex-direction决定了main axis的方向，有4个取值
  row(默认值)：从左到右
  row-reverse：从右到左
  column：从上到下
  column-reverse：从下到上
  

  row
  
  
  row-reverse
  
  
  column
  
  
  column-reverse

• Justify-content
  justify-content 决定了 flex items 在 main axis(主轴) 上的对齐方式。
  flex-start(默认值):与main start对齐
  flex-end:与main end对齐
  center：居中对齐
  space-between：flex items之间距离相等，与main start、main end两端对齐
  space-evenly：flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离
  space-around：flex items之间的距离相等，flex items与main start、main end之间的距离是flex items之间距离的一半
  

  flex-start
  
  
  flex-end
  
  
  center
  
  
  space-between
  
  
  space-evenly
  
  
  space-around

• align-items
  align-items决定了 flex items在cross axis(交叉轴)上的对齐方式。
  normal：在弹性布局中，效果和stretch一样
  stretch：在没有设置高度的情况下，当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
  flex-start：与cross start对齐
  flex-end：与cross end对齐
  center：居中对齐
  baseline：与基准线对齐, 第一行文本的基线
  

  stretch
  
  
  flex-start
  
  
  flex-end
  
  
  center
  
  
  baseline

• flex-wrap
  flex-wrap 决定了 flex container 是单行还是多行。
  nowrap(默认)：单行
  wrap：多行
  wrap-reverse：多行(对比wrap，cross start与cross end相反)

nowrap

wrap

wrap-reverse

• flex-flow
  flex-flow是 flex-direction || flex-wrap的简写，可以省略，顺序任意。
  flex-flow: column wrap;
  注：多行时，items最后一行比上一行少，没有对齐，可以增加个空白元素，使与上一行items个数相同

• align-content
  align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content 类似。
  stretch(默认值)：与align-items的stretch类似
  flex-start：与cross start对齐
  flex-end：与cross end对齐
  center：居中对齐
  space-between：flex items之间的距离相等，与cross start、cross end两端对齐
  space-around：flex items之间距离相等，flex items与cross start、cross end之间的距离是flex items之间距离的一半
  space-evenly：flex items之间距离相等，flex items与cross start、cross end之间的距离等于flex items之间距离
  

  space-between

• order
  order 决定了 flex items的排不顺序
  可以设置任意整数（正整数、负整数、0），值越小就越排在前面，默认值是0

• align-self
  flex items 可以通过 align-self 覆盖flex container设置的align-items。
  auto（默认值）：遵从flex container的align-items设置
  stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
  

  box中item居中对齐，设置itme3底部对齐

• flex-grow

1. flex-glow决定了flex items如何扩展
   可以设置任意非负数字（正小数、正整数、0），默认值是0;
   当flex container在main axis方向上有剩余size时，flex-grow属性才会生效;
2. 如果所有flex items的flex-grow总和sum 大于1，每个flex items扩展的size为flex container的剩余size * flex-grow / sum（按flex-grow比例分）;
3. 如果所有flex items的flex-grow总和sum 小于1，每个flex items扩展的size为flex container的剩余size * flex-grow（按flex-grow比例分）;
   flex items扩展后的最终size不能超过max-width\max-height；

• flex-shrink

1. flex-shrink 决定了flex items 如何收缩
   可以设置任意非负数字（正小数、正整数、0），默认值是1；
   当flex items 在main axis方向上超过了flex container 的 size，flex-shrink属性才会生效；
2. 如果所有flex items的flex-shrink总和大于1，每个flex items收缩的size为：
   flex items超出flex container的size * 收缩比例 / 所有flex items的收缩比例之和
3. 如果所有flex items的flex-shrink总和小于1，每个flex item收缩的size为：
   flex items超出flex container的size * sum * 所有flex items的收缩比例之和
   收缩比例 = flex-shrink * flex item的base size
   base size就是flex item放入flex container之前的size

注：flex items 收缩后的最终size不能小于min-width\min-height

• flex-basis
  flex-basis用来设置 flex items在 main axis方向上的base size:
  取值：auto（默认值）、具体的宽度数值

  决定flex items最终base size的因素，从优先级高到低：
   max-width\max-height\min-width\min-height
   flex-basis
   width\height
   内容本身的size

auto

200px

• flex
  flex 是 flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个或3个值。
   单值语法：值必须为以下其中之一：
     一个无单位数（）: 它会被当做的值
     一个有效的宽度（width）: 它会被当做的值
     关键字none，auto，initial
   双值语法：
     第一个值必须是一个无单位数。并且它会被当做的值
     第二个值必须是以下之一：
       一个无单位数：它会被当做的值
       一个有效的宽度（width）: 它会被当做的值
   三值语法：
     第一个值必须是一个无单位数。并且它会被当做的值
     第一个值必须是一个无单位数。并且它会被当做的值
     第三个值有效的宽度（width）: 它会被当做的值