你不知道的CSS布局之 grid & flex

Posted 2023-04-22

参考技术A [toc]

默认子元素按行排列

Flexbox 布局是一维布局方式，要么按行排列，要么按列排列。

align-items 控制交叉轴， justify-content 控制主轴,始终不变。

flex-basis是用来设置 main size 的。使用 flex-basis，可以同时管理行模式下的宽度和列模式下的高度。

此时 width 失效，但是可以用 min-width 限制

在列模式下，设置高度

flex 容器在有剩余空间的时候，子元素占据剩余空间的占比。适合一些浮动的布局。

超过边界自动换行

关于基本布局之——Grid布局

Gird布局

一、关于概念

网格布局（Grid）是一个很强大的 CSS 布局方案。它可以将网页划分为多个网格任意拼接的布局，可以灵活的运用并实现出多种布局形式。

(grid和inline-grid区别在于，inline-grid容器为inline特性，因此可以和图片文字一行显示；grid容器保持块状特性，宽度默认100%，不和内联元素一行显示。)

 

二、关于属性

Grid布局的属性和Flex相似 也分为两种，即作用域容器上和作用于子项上：

 

作用在Grid容器上	作用在Grid子项上
grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap justify-items align-items place-items justify-content align-content place-content grid-auto-columns grid-auto-rows grid-auto-flow grid	grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row grid-area justify-self align-self place-self

看到这么多的属性时，内心是排斥加恐惧的；但是...仔细的浏览一遍，回味过后松下一口气。看样子大都是分布和聚合的关系，和flex有些点还是很类似的，那么话不多说，开始细嚼！

 

· 作用在容器上的属性

2.1 grid-template-columns和grid-template-rows：分别决定了网格的每列的列宽和行高；例如：

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

上述代码被定义为Grid容器，然后分为两行三列共6个网格，每列的列宽为100px,每行的行高为100px；

当然，这两个属性的赋值非常灵活；

• 绝对单位 ：简单粗暴的赋值，对于定宽or定高可直接写定；
• 百分比 ： 根据容器的宽高，按百分占比进行分配；

• repeat() ：针对需重复进行赋值的场景，可利用repeat函数简化； – 函数接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
  

当然也可去重复一组网格规律，效果如下：

• fr 关键字 ：fr为fraction的缩写，意为分数、部分；可与相应的绝对单位一起使用，如下：
  

可见第一列的宽度为100像素，第二列的宽度是第三列的一半。

• minmax() ：函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
  

2.1 grid-row-gap：