CSS-Flex布局-Grid布局

372 阅读2分钟

总结Flex与Grid布局,Flex总结较为全面 参考以下网址: www.ruanyifeng.com/blog/2015/0… www.ruanyifeng.com/blog/2019/0… Flex布局:用来为盒模型提供最大灵活性(任何一个容器都可以指定为flex布局,设为flex布局后,子元素的float、clear和vertical-align属性将失效)
flex布局包含flex container(flex 容器)+flex item(flex 项目) image.png 水平主轴:main axis(主轴) 项目默认沿着主轴排列
垂直交叉轴:cross axis(交叉轴)

  1. flex container属性(6个)

    • flex-direction:决定主轴方向,即项目的排列方向
    • flex-wrap:如果一条轴线排不下如何换行(默认情况项目排在一条线上)
    • flex-flow:flex-direction + flex-wrap
    • justify-content:定义项目在主轴上的对齐方式
    • align-items:定义项目在交叉轴上的对齐方式
    • align-content:定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
  2. flex item属性(6个)

    • order:定义项目排列顺序,数值越小,排列越靠前,默认为0

    • flex-grow:定义项目放大比例,默认为0(如果存在剩余空间也不放大)

    • flex-shrink:定义项目缩小比例,默认为1(如果空间不足缩小该项目),负值对该属性无效

    • flex-basis:定义在分配多余空间之前,项目占据的主轴,默认auto(项目本来的大小)

    • flex:flex-grow + flex-shrink + flex-basis, 默认值是0 1 auto,后两个属性可选(建议优先使用此属性)

    • align-self:允许单个项目与其他项目有不一样的对齐方式,可覆盖align-items,默认auto(继承父元素align-items属性,无父元素则等同于stretch

Grid布局:grid网格布局,将页面划分成一个个网格,可以任意组合不同的网格
由容器和项目两部分组成,容器默认为块级元素,也可以通过inline-grid设置为行内元素;
项目只能是容器的顶层子元素,不包含项目的子元素
(设为网格布局后,容器子元素的float、display:inline-block | table-cell、vertical-align和column-*等设置都将失效)

Grid布局只对项目生效 水平区域称为行,垂直区域称为列,行列交叉区域,称为单元格

Flex和Grid布局的异同点:
Grid布局与Flex布局有一定相似性,都可以指定容器内部多个项目的位置。
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大