Flex弹性布局

Flex弹性布局

---

1. 基本概念：

兼容性，IE10 往上

• flex布局是目前web开发中使用最多的布局方案：

  • flex布局（Flexible布局，弹性布局）
  • 目前特别在移动端用的最多，目前PC端也使用越来越多了

• 两个重要的概念：

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

• 设置display属性为flex或者inline-flex，可以成为flex container

  • flex：flex container以block-level形式存在
  • inline-flex：flex container以inline-level形式存在

2. flex布局模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArRWcVdx-1591418369054)(C:\Users\Mole\AppData\Roaming\Typora\typora-user-images\image-20200603140001735.png)]

2.1 应用在flex container上的CSS属性

• flex-flow

  是flex-direction和flex-warp的缩写属性

• flex-direction

  flex items默认都是沿着main axis从main start到main end的方向排列

  flex-direction决定了main axis的方向，有4个取值

  • row（默认值）、row-reverse（主轴反向，从右向左）、column（从上往下）、column-reverse（纵向反向），如下图所示：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5TZ2Lp1-1591418369057)(C:\Users\Mole\AppData\Roaming\Typora\typora-user-images\image-20200603143812759.png)]

• flex-warp

  flex-warp决定了flex container是单行还是多行，默认情况下，所有的flex item都会在同一行显示，放不下的时候就会进行收缩

  • nowrap（默认）：单行
  • warp：多行
  • warp-reverse：多行（对比wrap，cross start与cross end相反，也就是在交叉轴上进行了反转）

  如下图所示：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0IJsBYJq-1591418369058)(C:\Users\Mole\AppData\Roaming\Typora\typora-user-images\image-20200603154738304.png)]

• 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与main start/main end距离等于flex items之间的距离
  • space-between：flex items与main start/main end距离等于flex items之间距离的一般

  如下图所示：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dDgt7fk-1591418369061)(C:\Users\Mole\AppData\Roaming\Typora\typora-user-images\image-20200603150022984.png)]

• 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：与基准线对齐

  具体想过如下图所示：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P0Xx1ntI-1591418369062)(C:\Users\Mole\AppData\Roaming\Typora\typora-user-images\image-20200603152138518.png)]

• 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之间的距离相等，与cross start/cross end之间的距离是flex items之间距离的一半
  • space-around：flex items之间的距离相等，与cross start/cross end之间的距离等于flex items之间距离的

2.2 应用在flex items上的CSS属性

• flex

  flexshi flex-grow flex-shrink flex-basis的简写，flex属性可以指定1个，2个或3个值

  单值语法：值必须为以下其中之一，平时基本不会用到

  • 一个无单位数（)：它会被当做的值
  • 一个有效的宽度值（width)：它会被当做的值
  • 关键字none、auto、initial

  双值语法：第一个值必须为无单位数，并且它会被当成的值

  • 第二个值必须为以下之一：
    • 一个无单位数，它会被当做的值
    • 一个有效的宽度值，它会被当成的值
  • 三值写法：
    • 第一个值必须为一个无单位数，并且它会被当成的值
    • 第二个值必须为一个无单位数，并且它会被当成的值
    • 第三个值必须为一个有效的宽度值，并且它会被当作的值

• flex-grow

  flex-grow决定了flex items如何扩展

  • 可以设置任意非负数字（正小数、正整数、0），默认值是0
  • 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
    • 如果所有flex items的flex-grow总合sum超过1，每个flex item扩展的size为flex container剩余的size*（flex-grow/sum)，有点类似栅格系统
    • 如果所有flex items的flex-grow总合sum不超过1，每个flex item扩展的size为flex container剩余的size*flex-grow
    • flex items扩展后的最终size不能超过max-width\max-height

• flex-basis

  flex-basis可以决定flex items在主轴上的最终大小，auto是默认值，可以设置具体的宽度数值(100px)优先级从高到低如下所示

  • max-width\max-height\min-width\min-height
  • flex-basis
  • width\height
  • 内容本身的size

• flex-shrink

  flex-shrink决定了flex items如何收缩

  • 可以设置任意非负数字（正小数、正整数、0），默认值是1
  • 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效
    • 如果所有flex items的flex-shrink总合sum超过1，每个flex item收縮的size为超出flex container的size*（flex-shrink/sum)
    • 如果所有flex items的flex-shrink总合sum小于1，每个flex item收縮的size为超出flex container的size*flex-shrink，一般不常用，因为这样还是会超出flex container
    • flex items收缩后的最终size不能小于min-width/min-height

• order

  决定了items排布的顺序，可以设置任意整数（正整数、负整数、0），值越小就排的越前

• align-self

  可以通过此属性覆盖flex container中设置的align-items，用来单个items的特殊化

  • auto（默认值）：继承flex container的align-items设置
  • stretch、flex-start、flex-end、center、baseline，效果类似align-items