css flex 布局 笔记

622 阅读3分钟

flex 布局笔记

flex-direction

决定主轴的方向

flex-direction

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

justify-content

设置主轴上的子元素排列方式

  • 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