grid布局和flex布局

grid布局

网格布局(grid)是最强大多的CSS布局方案

Grid布局则是将容器划分成”行”和”列”，产生单元格，如果指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比Flex布局强大

容器属性

display属性

display: grid指定一个容器采用网格布局

设置为网格布局以后，容器子元素的float，display: inline-block，display: table-cell，vertical-align和column-*等设置都将失效

grid-tempalte-columms/row

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns和属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

指定了一个三行三列的网格，列宽和行高都是100px

Code

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

repeat

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。

Code

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

Code

1	grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

Code

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr

fr类似于百分比

表示两个同等宽度的列

Code

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围内。他接受连个参数，分别是最小值和最大值

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

Code

1	grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto

auto关键字表示由浏览器自己决定长度

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于子哦大宽度

Code

1	grid-template-columns:100px auto 100px;

grid-row-gap

grid-row-gap属性是设置行于行的间隔(行间距)，grid-column-gap属性是设置列与列的间隔
grid-gap 是以上两个属性的缩写

Code

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

===

.container {
	grid-gap: 20px 20px;
}

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格，默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行，以此类推

这个顺序由grid-auto-flow属性决定，默认值是row，即“先行后列”，变成“先列后行”

row dense,表示“先行后列”，并且尽可能紧密填满，尽量不出现空格

Code

grid-auto-flow: column

grid-auto-flow: row dense;
grid-auto-flow: column dense;

place-items

操作的是单元格里的内容的位置

justify-items属性设置单元格内容的水平位置
align-items属性设置单元格内容的垂直位置
- 这两个属性的写法相同，都可以取以下这些值
  - start 对齐单元格的起始边缘。
  - end 对齐单元格的结束边缘。
  - center 单元格内部居中。
  - stretch 拉伸，占满单元格的整个宽度（默认值）
place-items属性是以上两个属性的缩写

Code

.container {
  justify-items: center;
  align-items: center;
}

===

.container {
	place-items: center center;
}

place-content

操作的是单元格的位置

justify-content属性是整个内容区域再容器里面的水平位置
align-content属性是整个内容区域的垂直位置
- 这两个属性的写法相同，都可以取以下这些值
  - start 对齐单元格的起始边框。
  - end 对齐单元格的结束边框。
  - stretch 项目大小没有指定时，拉伸占据整个网格容器
  - space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
  - space-between 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  - space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
  - center 单元格内部居中。
place-content属性是以上两个属性的缩写

Code

.container {
  justify-content: center;
  align-content: center;
}

===

.container {
	place-content: center center;
}

grid-auto-row/columns

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}

grid/grid-template

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

grid-template-areas

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
配合项目上的grid-area属性使用

Code

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

项目属性

grid-column/row

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

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的合并简写形式。

Code

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

===

.item-1 {
	grid-column: 1/3;
	grid-row: 2/4;
}

grid-area

grid-area属性指定项目放在哪一个区域。

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

Code

1
2
3

.item-1 {
  grid-area: e;
}

place-self

justify-self属性设置单元格内容的水平位置，跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置，跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self属性是align-self属性和justify-self属性的合并简写形式。

布局实例

bootstrap上的一个实例

Code

1	grid-template-columns: 30% 70%

flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

Flex布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始叫做cross start，结束位置叫做cross end

容器属性

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)

值分别是

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

默认情况下，项目都排在一条线(又称”轴线”)上，flex-wrao属性定义，如果一条轴线排不下，如何换行

值分别为

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content

justify-content属性定义了项目再主轴的对其方式

值分别为

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items属性定义项目再交叉轴上如何对其

值分别为

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align=content属性定义了多根轴线的对其方式，如果项目只有一根轴线，该属性不起作用

值分别为

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目属性

order

order属性定义项目的排序顺序。数值越小，，排列月靠前，默认值是0

flex-grow

flex=grow属性定义项目的放大比例，默认值0，即如果存在剩余空间也不放大

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis

flex

flex属性是flex-grow，flex-shrink和flex-basis的缩写，默认值为0 1 auto，后两个属性可选

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。