CSS布局

Flex布局

 

容器属性 

flex-direaction ：定义主轴方向，默认水平

 justify-content：定义子元素在主轴方向的对齐方式

align-item：定义子元素在交叉轴的对齐方式

flex-wrap：超出容器轴线长度自动换行，默认不换行

align-content：定义多行元素在交叉轴的对齐方式 

 元素属性

order：排序顺序

 align-center：自身的交叉轴对齐方式

flex：flex-grow  flex-shrink flex-basis

flex-grow：按剩余空间比例放大元素填充容器

flex-shrink：按被挤压空间比例缩小元素

flex-basis：元素初始大小，默认auto 根据主轴长度分配

flex布局痛点：当缺少元素时不能对齐

解决办法： 这里一行四个元素，我们可以在末尾添加四个元素，设置同样的宽度，但不设置高度，就可以解决。

Grid布局

容器属性

display：grid；

grip-template-columns：  

        ----》  1fr 200px 1fr 1fr ；  分成四份，等分剩余空间，（200px固定）

        ----》 1fr 2fr 1fr 1fr；分成5份，第二个占2份

        ----》repeat(5,1fr) ；重复函数, 重复5份，每份1fr

        ----》repeat(auto-fill,minmax(260px,1fr)); 自动填充，每行元素最小260px, 最大1fr

gap：30px ；   四周30像素分隔，不包含边界

元素属性

grid-row：1/1+2； 第一行第一个元素开始，占两个元素空间

grid-column: 1/3;  第一列第一个元素开始，占两个元素空间