传统模型、Flex和Grid布局

前言

说到布局,大多数人都会想到传统的模型布局,但在实际开发过程中会显得比较不方便,就例如实现垂直居中这一问题上;而flex弹性布局的出现使得现阶段网页开发的布局变得更加轻便,现在更是开发的布局首选。

这篇文章主要是让我们理解grid、flex和传统模型这三种布局的概念及其区别,并且会在之后的文章中对这三种布局进行实践。

由于本文重点在告诉你这些布局的特点以及构成方案,想要具体教程的,在这附上阮一峰大大的链接(本文许多专业词汇的理解也是引用以下文章):
CSS Grid 网格布局教程
Flex 布局教程:语法篇


传统模型布局

在说传统模型布局前,你必须要深刻了解什么是盒模型,在我的另一篇文章中针对盒模型有详细的说明:标准盒模型和IE盒模型

传统模型布局分三种模型,并且这三种模型紧密联系:

  1. 流动模型(Flow)
    流动模型是默认的网页布局模式,即块级元素自上而下按顺序垂直延伸分布,因为在默认情况下块级元素宽度总是100%;行内元素都会在所处的包含元素内从左到右水平分布显示。
  2. 浮动模型 (Float)
    当元素css属性中设置了float,则它将依照浮动的位置进行特定的定位。
  3. 层模型(Layer)
    层模型即三种position形式:
    1.position:relative(相对定位)
    当元素设置了该属性,则它的位置会相对在父元素以及兄弟元素间进行偏移。
    2.position: absolute(绝对定位)
    将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块(就是它前面的div并没有设置定位的属性),则相对于body元素,即相对于浏览器窗口。
    3.position: fixed(固定定位)
    absolute相似,它只相对于浏览器的视口进行定位,而不会受其他块级元素的影响。

因此,我们可以得出传统模型布局的具体操作方案为:

盒模型+display属性+float属性+position属性


flex布局

flex布局是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
flex布局的作用仅在设定display:flex属性的元素以及它的所有子元素上,并且子元素的floatclearvertical-align属性将失效。其中所设定的元素又称为容器(flex container),子元素称为项目(flex item)。

容器的设定存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)。项目默认沿主轴排列。

flex容器
  • flex-direction:指定项目的轴方向
  • flex-wrap:项目是否换行
  • flex-flowflex-directionflex-wrap的合成形式
  • justify-content:定义了项目在主轴上的对齐方式
  • align-items:定义项目在交叉轴上如何对齐
  • align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
flex项目
  • order:定义项目的排列顺序。数值越小,排列越靠前,默认为0
  • flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
  • flexflex-grow,flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。
  • align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性

在实际开发过程中,习惯用:

容器属性:
    display:flex/inline-flex;
    flex-flow、justify-content、align-items
项目属性:
    flex、order、align-self

Grid布局

grid布局又叫网格布局,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。

Grid布局和Flex布局的区别

grid和flex布局十分相似,但却有极大的不同。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局

在二维布局里,正常情况下,n行和m列会产生n x m个单元格。n行有n + 1根水平网格线,m列有m + 1根垂直网格线。grid布局的作用仍然在容器项目中。

grid容器
  • display: grid/inline-grid:指定容器采用grid布局
  • grid-template-columns:定义每一列的列宽
  • grid-template-rows:定义每一行的行高
  • grid-row-gap:设置行与行的间隔(行间距)
  • grid-column-gap:设置列与列的间隔(列间距)
  • grid-gapgrid-row-gapgrid-column-gap的合成简写
  • grid-template-areas:用于定义区域
  • grid-auto-flow:子元素的放置顺序,默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行
  • justify-items:设置单元格内容的水平位置(左中右)
  • align-items:设置单元格内容的垂直位置(上中下)
  • place-itemsjustify-itemsalign-items的合成简写
grid项目
  • grid-column-start:左边框所在的垂直网格线
  • grid-column-end:右边框所在的垂直网格线
  • grid-row-start:上边框所在的水平网格线
  • grid-row-end:下边框所在的水平网格线
  • grid-columngrid-column-startgrid-column-end的简写
  • grid-rowgrid-row-startgrid-row-end的简写
  • grid-area:指定项目放在哪一个区域
  • justify-self:设置单元格内容的水平位置(左中右)
  • align-self:设置单元格内容的垂直位置(上中下)
  • place-selfalign-self属性和justify-self属性的合并简写形式

可以看出,二维的布局跟一维有十分相似的,即一维时(flex)你只能规定一个方向(轴)而要充分考虑另外一个方向的排版,而二维则包括了两个轴,因此grid布局更加地简便。

在9102年的今天,grid布局并不能完全兼容所有浏览器,又或者说需要的浏览器版本较高,但它已经可以普遍兼容了,各位可以在日后的工作中考虑是否应用。

你可能感兴趣的:(传统模型、Flex和Grid布局)