Flexbox

707 阅读3分钟

Flexbox的布局方式主要分为两个角色

  • Flex Container(Flex 容器)
  • Flex Item (Flex 项目)

Flex Container

属性一:flex-direction是用来定义里面flex items的排序方向

  • 预设值是row,横向
  • 将它改为column,即是纵向的意思
  • row-reserve、column-reserve 翻转
  • main-axis(主轴),flex-direction是row时为row,是column为column
  • cross-axis(交叉轴),flex-direction是row时为column,是column时为row
  • justfy-content是设定主轴的排序方向
    • center、flex-star、flex-end
    • 方向是根据flex-direction的设定值决定的,所以不能用top、bottom、left、right
      • 主轴是row-reserve时,justfy-content:flex-stat就是由右至左
      • 主轴是column时,justfy-content:flex-stat就是由上至下
  • align-items是设定交叉轴的排序方向
    • center、flex-star、flex-end

属性二:flex-wrap指是否分行

  • 预设值是nowrap,自动将items的宽度缩小
  • 改为warp、超出的部分会自动换行,并且可以调整justfy-content、align-items会有不同的对齐效果

属性三:flex-flow是flex-direction和flex-wrap的组合

  • flex-flow:row wrap

属性四:align-content,当flex-wrap的值是wrap,且有多于一行flex-items时才会生效,用来设定行与行之间的对齐方式

  • center、flex-star、flex-end、initial、space-arpund(item左右都有相同的空间隔开)、space-evenly、(item之间都有相同的间距)space-between(取消了container最左和最右的空间)

Flex Item

属性一:order,可将个别fiex -item的位置改变

  • flex item order属性的预设值是0
  • 排序是根绝order由小至大排列的,小的数字排先,大的数字排后
  • 例如5个box,将其中一个boder设为1,则排到最后,将其中一个boder设为-1,则排到最前

属性二:align-self

  • 用于【覆写】flex container的align-items
  • center、flex-star、flex-end

属性三:flex-basis

  • 设定flex item主轴方向的基础大小
  • 主轴是row时相当于设置flex item的宽度,column相当于设置flex item的高度
  • 0时flex item大小为本身内容的大小(例如字母size大小)
  • auto代表按照本身box的大小去计算

属性四:flex-grow(扩大比例)

  • 当flex container主轴方向有剩余空间时,flex item沿主轴方向扩大的设定
  • flex-grow:1 表示各自占有剩余空间的一份,例如主轴是row,小div各60px,大div300px,那么他们会平摊剩余120px,宽度铺满大div,0则表示保持原有大小不变

属性五:flex-shrink(缩小比例),与flex-grow相反

  • 指当flex item 主轴方向的大小总和超出flex container时,flex item沿主轴方向怎么缩小
  • 预设值是1,各自分担一份被缩小的空间,不会超出container
  • folex-shrink:0 当主轴方向空间不足时,都不能缩小对应的flex item

属性六:flex(flex-grow+flex-shrink+flex-basis)

  • flex:0 1 150px,代表每一个flex item宽度最多为150px,只会因为flex container空间不足而缩小,不会因为有剩余空间而扩大
  • flex:0 0 200px,固定每个flex item大小为200px,不缩小也不扩大