总结

Flexbox 对同一层次的元素做一维布局。

CSSgrid 将显示二维显示空间做网格分割，然后再作为CSS指定到特定元素上。

对于不支持的浏览器客户端，回退到display table是最好的方案。

CSS grid

指定容器使用grid来布局

1
2
3
4
5
6
7
8
9
10

.container {    	/* 在容器上 */
  display: grid; 	/* 指定使用grid方式，做如下网格分割：*/
  grid-template-columns: repeat(3, 1fr); 		/* 三列，每列都一样大 */
  grid-template-rows: 100px 100px 100px; 		/* 三行，每行100pox高 */
}

.item-1 { 				/* 指定容器中的的一个元素，附着在下面的网格上： */
  grid-column: 1 / span 2;  /* 从（最左边）第一条参考线开始，占用两格 */
  grid-row: 1 / span 2; 		/* 从（最上面）第一条参考线开始，占用两格 */
}

Flexbox

Flexbox是一维的布局，意味着每一个层级只能有一个维度。两个层级才能表达二维布局。

当前层级的维度方向用flex-direction 指定，可以指定正交垂直的四个方向：row,row-reverse,column,column-reverse

注意：轴向不一定是显示方向，中文/英文从左到右书写，阿拉伯文从右到左书写。同样为row，子元素的排布方向根据语言的不同是不同的

使用的时候制定显示属性为flex或者inline-flex就可以。

默认的行为是：

• 主维度方向为row
• 同层级的子元素从start edge开始排布
• 子元素在主维度上不会拉伸，可能压缩
• 所有子元素在正交维度上拉伸达到最大的那个子元素长度。
• 子元素初始化大小设置为auto
• 子元素默认不能wrap，超出部分不显示。

多行显示

通过嵌套不同方向的层级，来进行二维布局。

或者在同个层级中，指定flex-wrap为wrap的时候如果一行显示不下才会切花到第二行去。

调整同一层级的子元素的布局。

• flex-basic 指定元素的基础大小，默认为元素本身的大小。
• flex-grow在基础空间有多余的时候，需要拉伸的时候，指定当前元素可以拉伸的比例
• flex-shrink在需要压缩的时候，指定当前元素可以压缩的比列

上面三个参数可以用一个flex变量来表达，同时输入空格分割的三个值，按顺序为 flex-grow, flex-shrink, flex-basis.

其中可以指定几个预定义的值，

initial = 0 1 auto 元素不扩展，只压缩，默认用自己的大小。

auto = 1 1 auto 元素可以扩展，也可以压缩，默认用自己的大小。

none = 0 0 auto 元素不可以扩展，也不可以压缩，默认用自己的大小。

调整元素

主轴方向调整布局位置justify-content

使用justify-content: 来调整，可选多种方式：

• flex-start

  默认，从书写开始位置排布

• flex-end

  从书写结束位置排布

• center

  所有元素居中

• space-between

  平均分布元素，每个元素之间间隔一样

• space-around

  平均分布元素，每个元素左右间隔一样。（最左和最右到边距，是两个元素之间的一半）

• space-evenly

  平均分布元素，元素和边距之间，元素自身之间的间隔都一样。