总结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 项目)
水平主轴:main axis(主轴) 项目默认沿着主轴排列
垂直交叉轴:cross axis(交叉轴)
-
flex container属性(6个)
- flex-direction:决定主轴方向,即项目的排列方向
- flex-wrap:如果一条轴线排不下如何换行(默认情况项目排在一条线上)
- flex-flow:flex-direction + flex-wrap
- justify-content:定义项目在主轴上的对齐方式
- align-items:定义项目在交叉轴上的对齐方式
- align-content:定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
-
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 布局强大