关于flex与grid的理解

关于flex与grid的理解

四月 21, 2019

flex

整体知识来源于阮一峰的博客

容器上的属性

  • display: flex/inline-flex;
  • flex-direction:不解释
  • flex-wrap:不解释
  • flex-flow:是flex-direction和flex-wrap的简写
  • justify-content:flex-start | flex-end | center | space-between | space-around
  • align-item:flex-start | flex-end | center | baseline | strench
  • align-content:flex-start | flex-end | center | strench | space-between | space-around

display: flex与inline-flex

容器可以定义flex与inline-flex。flex则容器还是display: block的效果,与其他display: block的元素各占一行。inline-flex则与多个inline的元素共占一行

align-content

多跟轴线的对其方式,即flex-wrap设置为wrap,且项目换行之后。否则无效

项目上的属性

order

定义项目的排列顺序。数值越小,排列越靠前,默认为0。但是项目中一般不用,因为用html的顺序更直观一些。

flex-grow(存在剩余空间)

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

默认为0,不放大。正整数的话代表方法,并且根据参数大小来均分剩余空间

flex-shrink(剩余空间不足)

定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

有两个值,0代表不启用,1代表启用;默认启用;即默认自动缩小;

换句话说,如果该值为0,则项目在交叉轴占用的空间就为项目的宽或高;设置为1时,才会利用flex去重新计算宽或高

flex-basis

定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它的表现与width在flex中的表现是一样的。但是它又与“width”的概念不一样。所以在flex中应该使用flex-basis而不是width或height;

其具体表现见文章:[翻译]Flex Basis与Width的区别

flex

flex-grow; flex-shrink; flex-basis的简写;

align-self

单独设置对齐方式

著名的flex: 1

在多个项目中,给某个项目设置flex: 1,就会得到神奇的自适应剩余空间的功能。往往也就记得这么设置就行了。这次得深究一下。

flex: 1在chrome中被解析为flex: 1 1 0%,即flex-grow: 1; flex-shrink: 1; flex-basis: 0%

而其中起作用的只是flex-grow而已。给要自适应的项目设置flex-grow: 1也能达到相同的效果

因为flex-grow代表着”如果存在剩余空间,是否放大“;即,如果存在剩余空间,则放大自己,占满剩余空间。而项目的默认值为flex-grow: 0;意思为不占用空间,如果给某个设置了flex-grow: 1则,设置了flex-grow: 1的项目则会沾满空间,达到自适应剩余空间的效果

grid

主要来源还是阮一峰的博客

概念

容器属性

  • grid-template-columns:分行
  • grid-template-rows:分列
  • grid-row-gap(row-gap):列间距
  • grid-column-gap(column-gap):行间距
  • grid-gap(gap):间距简写 <row column>
  • grid-template-areas:定义区域
  • grid-auto-flow:填充方法,行填充还是列填充等
  • justify-items:项目的水平对齐方式,start | end | center | stretch;
  • align-items:项目的垂直对齐方式,start | end | center | stretch;
  • place-items:上俩属性的简写 <align-item justify-items>
  • justify-content:每个网格的水平对齐方式
  • align-content:每个网格的垂直对齐方式
  • place-content:简写(align-content justify-content)
  • grid-auto-columns:网格外部的布局,参数与grid-template-columns一致
  • grid-auto-rows:网格外部的布局,参数与grid-template-rows一致
  • grid-template:简写 <grid-template-rows grid-template-columns grid-template-areas grid-auto-rows>
  • grid:简写 <grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow>

display: grid 与 inline-grid

同flex与inline-flex。

项目属性

  • grid-column-start:根据网格线定位位置
  • grid-column-end:根据网格线定位位置
  • grid-row-start:根据网格线定位位置
  • grid-row-end:根据网格线定位位置
  • grid-column:简写 <grid-column-start / grid-column-end>
  • grid-row:简写 <grid-row-start / grid-row-end>
  • grid-area:位置,应该时grid-template-area定义的位置,也可以是网格线
  • justify-self:单个项目的水平位置,参数同justify-content
  • align-self:单个项目的垂直位置,参数同align-content
  • place-self:简写<align-self justify-self>