css flex 笔记

flex 布局笔记

flex-direction

决定主轴的方向

flex-direction

• row
• row-reverse
• column
• column-reverse

justify-content

决定了flex items在main axis上的对齐方式

• flex-start（默认值），与main start 对齐

• flex-end，与main end 对齐

• center，居中对齐

• space-between

  • 1-1-1
  • flex items 之间的距离相等
  • 与main start，main end对齐

• space-evenly

  • -1-1-1-
  • flex items 之间的距离相等
  • flex items 与main start，main end之间的距离 等于flex items之间的距离

• space-around

  • .1-1-1.
  • flex items 之间的距离相等
  • flex items与main start，main end 之间的距离是flex items之间的距离的一半

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之间的距离

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

flex-wrap

flex-items 是否换行

• wrap，换行 多行
• wrap-reverse，多行 反转
• nowrap，不换行 单行

flex-flow

是flex-direction和flex-wrap的简写

• flex-flow： row wrap

flex-contaier 总结

• display:flex/inline-flex
  • 开启flex 布局
• flex-direction
  • 决定主轴的方向
• justify-content
  • 决定主轴上flex-items如何排布
• align-items
  • 决定flex-items 在交叉轴上的对齐发方式
  • normal
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
• flex-wrap
  • nowrap
  • wrap
• flex-flow
  • flex-direction
  • flex-wrap

order

决定flex items 排列的顺序

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

• order：1

• order：-1

align-self

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

• auto（默认值），遵从flex container的align-items设置
• stretch，flex-start，flex-end，center，baseline，效果与align-items一致

flex-grow

items 自动填充。

决定了flex-items如何扩展

• 可以设置任意非负数字，默认值是0

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

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

• flex-grow：1

• flex-grow：.2

flex-shrink

决定了flex items 如何收缩

• 可以设置任意非负数字（正小数，正整数，0），默认值为1
• 当flex items在main axis 方向上超过flex container的size，flex-shrink属性才会有效
• flex-shrink：2

flex-basis

• 用来设置flex items在main axis 方向上的base size
  • auto（默认值），具体的宽度数值为（100px
• 决定flex items 最终base size的因素，从优先级高到低
  • max-width，max-height，min-width，min-height
  • flex-basis
  • width，height
  • 内容本身的size

flex

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

• 单值语法：值必须为一下其中之一

  • 一个无单位数（number）：他会被当做 flex-grow的值
  • 一个有效的宽度（width）值：它会被当作 flex-basis 的值
  • 关键字 none，auto或initial
  • flex：1
  • flex：100px

• 双值语法：第一个值必须为一个无单位数，并且它会被当作 flex-grow的值

  • 第二个值必须为以下之一
    • 一个无单位数：它会被当作 flex-shrink的值
    • 一个有效的宽度值：它会被当作 flex-basis 的值

• 三值语法

  • 第一个值必须为一个无单位的数，并且它会被当作 flex-grow的值
  • 第二个值必须为一个无单位的数，并且它会被当作 flex-shrink的值
  • 第一个值必须为一个有效的宽度值，并且它会被当作 flex-basis的值
  • felx：1 2 200px