flex布局

基础

• 开启了flex布局的元素叫做 flex container

• flex container里面的直接子元素叫做flex items

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

  • flex: flex container以block-level形式存在 (单独占一行，下一个元素会换行显示)
  • inline flex : flex container 以inline-level 形式存在（可以与下一个元素在一行内）

常用css属性

• 应用在flex container上的css属性

  • flex-flow
  • flex-direction
  • flex-warp
  • justify-content
  • align-items
  • align-content

• 应用在flex items上的css属性

  • flex
  • flex-grow
  • flex-basis
  • flex-shrink
  • order
  • align-self

flex 布局模型

image.png

flex-direction

• flex items 默认都是沿着main axis (主轴) 从 main start 开始往 main end 方向排布
• flex-direction 决定了main axis 的方向，有四个取值
• row(默认值)、row-reverse、column、column-reverse

row

row-reverse

columu

columu-reverse

justify-content

justify-content 决定了flex items 在 main axis 上的对齐方式
- flex-start（默认值) : 与main start对齐
- flex-end : 与main end 对齐
- center : 居中对齐
- space-betueen:
1. flex items 之间的距离相等
2. 与main start、main end 两端对齐
- space-evenly:
1. flex items 之间距离相等
2. flex items 与main start、main end 之间的距离 等于 flex items 之间的距离
- space-around:
1. flex items 之间距离相等
2. flex items 与main start、main end 之间的距离 等于 flex items 之间距离的一半

image.png

align-items

align-items决定了flex items 在 cross axis 上的对齐方式

• strech(默认值):当flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充flex container
• flex-start 与 cross start 对齐
• flex-end: 与 cross end 对齐
• center: 居中对齐
• baseline: 与基线对齐
  
  image.png

flex-wrap

flex-wrap决定了flex container 是单行还是多行

• nowrap(默认)：单行
• wrap:多行
• wrap-reverse:多行（对比wrap， cross start 与 cross end 相反）

flex-flow

flex-flow 是 flex-direction ||flex-wrap 的简写

// flex-flow: column wrap 等价于

flex-direction:column;
flex-wrap:wrap;

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与justfiy-content类似

• stretch（默认值）：与align-items的stretch类似
• flex-start: 与 cross start 对齐
• flex-end: 与 cross end 对齐
• center: 居中对齐
• space-betueen:
  1. flex items 之间的距离相等
  2. 与cross start、cross end 两端对齐
• space-evenly:
  1. flex items 之间距离相等
  2. flex items 与cross start、cross end 之间的距离 等于 flex items 之间的距离
• space-around:
  1. flex items 之间距离相等
  2. flex items 与cross start、cross end 之间的距离 等于 flex items 之间距离的一半

image.png

order

order决定了 flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
• 默认值是0

align-self

flex items 可以通过align-self覆盖flex-container设置align-items

• auto(默认值):遵从flex-container设置的align-items
• strech、flex-start、flex-end、center、baseline, 效果与align-items一致

flex-grow

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

• 可以设置任意非负数字（正小数、正整数、0）

• 当flex container在main axis 方向上有剩余size时，flex-grow才有效

• 如果所有flex items 的flex-grow总和超过1，每个flex item扩展的size为flex container的剩余size * flex-grow / sum

• 如果所有flex items 的 flex-grow总和不超过1，每个flex item 扩展的size为 flex container 的剩余size * flex-grow

• flex items 扩展后的最终size不能超过max-width/max-height

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 items 超出 flex container的size * 收缩比例 / 所有flex items的收缩比例总和

• 如果所有flex items 的 flex-shrink总和(sum)不超过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 (默认值)：、content: 取决于内容本身的 size
• 决定 flex items 最终base size 的因素，优先级从高到低
  1. max-width/max-height/min-width/min-height
  2. flex-basis
  3. width/height
  4. 内容本身的 size

flex

flex 是 flex-grow flex-shrink? || flex basis 的简写

• 默认值是 0 1 auto
• none : 0 0 auto