flex布局与gird布局

grid和flex区别是什么？

Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
Grid 是二维布局系统，通常用于整个页面的规划。flex布局和grid布局是现在的主流的两种布局方式。
二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。
flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

对Flex布局的理解及其使用场景

简单来说： flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局。

flex布局

.div {

display：flex；

}

justify-content 设置行内位置

align-items 单行位置

align-content多行位置

flex-wrap：warp 换行

flex-direction 决定行排还是列排 默认行排

background：-webkit-linear-gradient（ color，color）从什么颜色渐变到什么颜色

div:nth-child（1）第一个块

div:nth-child（2）第二个块

Grid 布局（网格布局）

Grid布局与Flex布局有一定的相似性，都可以指定，容器内部多个项目的位置

Flex布局：轴线布局，可以看做是一维布局。

Grid布局：则是将容器划分分成“行”和“列”，产生单元格，指定的项目所在的单元格，可以看做是二维布局。

1、grid-template-columns/row 属性

columns  是定义了每一列的宽

row  是定义了每一行的高

2、repeat()  两个参数  (重复n次，重复的值)

 .box{

　　display：grid；

　　grid-template-columns：repeat（3，33.33%）

　　grid-template-row：repeat（3，33.33%）

}

3、可以给网格线起名字

.box{

　　display：grid；

　　grid-template-columns：[ ]  100px  [ ]  100px  [ ]  100px  [ ]

　　grid-template-row：[ ]  100px  [ ]  100px  [ ]  100px  [ ]

}

4、grid-row-gap属性，grid-columns-gap属性

grid-row-gap设置行与行的间隔（行间距）、

grid-columns-gap设置列与列的间隔（列间距）

5、网格布局允许指定区域（area），一个区域由单个或者多个单元格组成

grid-templace-area：header  header  header

　　　　　　　　　  main      main     sidebar

  　　　　　　　　　footer    footer     footer

如果某些区域不需要利用，则用点（.）表示。

6、justify-items，align-items，place-items 属性

justify-items 设置单元格内容的水平位置

align-items 设置单元格内容的垂直位置

7、justify-content，align-content，place-content

justify-content 整个内容区域在容器里面的水平位置

align-content 整个内容区域在容器里面的垂直位置

8、grid-auto-columns，grid-auto-rows属性

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

gird布局关于网格状分布

定义父盒子display:grid即可，小盒子就能成网格分布

.grid {

display：grid；

grid-template-colums：100px 100px 100px；

}

.grid {

display：grid；

grid-template-colums：1fr 1fr 1fr；

}

fr是grid专用单位

.grid {

display：grid；

grid-template-colums：1fr 2fr 1fr；

}

.grid {

display：grid；

grid-template-colums：1fr 2fr 1fr；

row-gap：24px；

column-gap：24px；设置行间距列间距

}

grid-temple-areas