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）第二个块
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
标签：flex,项目,align,布局,gird,grid,属性 来源： https://www.cnblogs.com/jiangxin123/p/16264284.html