大家好，我是讯享网，很高兴认识大家。



1. Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
2. Grid 是二维布局系统，通常用于整个页面的规划。
3. 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

讯享网

Flexbox布局（Flexible Box)模块旨在提供一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。

浏览器兼容性比较差，只能兼容到ie9以上。

• 按作用目标划分

• flex容器 flexbox 的区域就叫做 flex 容器。创建 flex 容器， 应把一个容器的 属性值改为 或者 。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。子元素CSS属性都会有一个初始值，以下属性默认值会设置如下：

讯享网

1. display:flex
   • 设置flex容器：

讯享网

2. flex-direction
   • 主轴方向由 flex-direction 定义，可以取4个值：

如图：

• 交叉轴 交叉轴垂直于主轴，如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。 如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

3. flex-wrap
   • 是否换行，由 flex-wrap 设置，可以取3个值：

讯享网

4. flex-flow
   • flex-flow 是 flex-direction 和 flex-wrap 组合的简写属性 。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。

5. align-items
   • align-items 属性可以使元素在交叉轴方向对齐。

讯享网

6. align-content
   • align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
   • 该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
   • align-content 和 align-items 实现效果相同，区别在于前者对flex容器内的多行flex元素生效，后者单行或者多行都会生效：

7. justify-content
   • justify-content属性用来使元素在主轴方向上对齐

讯享网

1. flex-gow
   • 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

讯享网

3. flex-basis
   • 给上面两个属性分配多余空间之前，计算项目是否有多余空间，默认值为auto,即项目本身的大小

4. flex
   • flex属性是 、、的简写，默认为 0，1，auto。

讯享网

5. align-self
   • align-self 属性则施加在 flex 容器中的 item 上,允许单个项目有与其他项目不一样的对齐方式,如果想设置某一个item有不一样的对齐方式的时候，可以用它。

6. order
   • 规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。值越小排序越往前。

讯享网

1. 固定和灵活的轨道尺寸；
2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。

兼容性比较差。

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。

1. display: grid
   • 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

讯享网

2. grid-template-columns
   • 定义每一列的列宽

3. grid-template-rows
   • 定义每一行的行高

讯享网

4. repeat() & auto-fill 关键字 & fr 关键字 & minmax() & auto 关键字 & 网格线的名称

grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat()这个函数简化重复的值

5. grid-row-gap
   • 设置行与行的间隔（行间距）

讯享网

6. grid-column-gap
   • 设置列与列的间隔（列间距）

7. grid-gap
   • grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

讯享网

8. grid-template-areas
   • 网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

9. grid-auto-flow
   • 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。

讯享网

10. justify-items
    • justify-items属性设置单元格内容的水平位置（左中右）

11. align-items
    • align-items属性设置单元格内容的垂直位置（上中下）

讯享网

12. place-items
    • place-items属性是align-items属性和justify-items属性的合并简写形式。

13. justify-content
    • justify-content属性是整个内容区域在容器里面的水平位置（左中右）

讯享网

14. align-content
    • align-content属性是整个内容区域的垂直位置（上中下）

15. place-content
    • place-content属性是align-content属性和justify-content属性的合并简写形式。

讯享网

16. grid-auto-columns & grid-auto-rows
    • 用来设置，浏览器自动创建的多余网格的列宽和行高。

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

讯享网

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

1. grid-column-start
   • 项目左边框所在的垂直网格线

讯享网

2. grid-column-end
   • 项目右边框所在的垂直网格线

3. grid-row-start
   • 项目上边框所在的水平网格线

讯享网

4. grid-row-end
   • 项目下边框所在的水平网格线

上述四个项目属性值既可以为数字也可以为网格线名

讯享网

5. grid-column
   • grid-column属性是grid-column-start和grid-column-end的合并简写形式

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

讯享网

7. justify-self & align-self & place-self
   • 属性设置单元格内容的水平位置（左中右），跟属性的用法完全一致，但只作用于单个项目。
   • 属性设置单元格内容的垂直位置（上中下）， 跟属性的用法完全一致，也是只作用于单个项目。
   • 属性是属性和属性的合并简写形式。

• Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
• Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。
• 综上所述，可以根据业务场景需要选择相应布局。