15天前端学习-第十四天（个人记录）

这些天陆陆续续学的比较杂,还是需要来总结一下。

flex在子项上设置的属性

order:0;子项排列顺序,默认0,越小排列越靠前。
flex-grow:0;定义剩余空间分配,默认0,值越大子项占比的空间就越大。
flex-shrink:1;定义空间不足的情况,默认1,就是空间不足等比缩小,设定为0时空间不足也不会缩小。
flex-basis:auto;设定子项占据的位置,有点像width。
flex:0 1 auto;flex-grow,flex-shrink,flex-basis的复合写法。
align-self:auto;让子项有不同的排列方向,默认继承父项的align-items;

flex用的还不是很熟,但理解起来并不是很难,有写过几个小页面,还需要多加使用。

网格布局

作用于父容器的属性:
网格线的命名:grid-template-row:[a]10px [b]10px [c];
网格线的数量为行或列的数量+1,可以作用于网格的定位。
网格的初始化:
grid-template-row:100px 100px;定义每一行的高
grid-template-column:100px 100px;定义每一行的宽
这两个属性每写一个就定义了一个行或是高,两个组合起来就形成了网格,值也可以用%来写。
上面这个就相当于定义了两行两列。
这个值也可以用函数repeat()来写
grid-template-row:repeat(2,100px);效果相当于上面的设定,写了2个100px。
重复某个模式:repeat(2,100px 50px);
自适应:repeat(auto-fill,100px);每一行100px,直到容器装不下。
单位fr，表示比例关系。
grid-template-row:1fr 2fr;表示第二行是第一行的两倍
长度范围：minmax（min，max);表示长度在这两个之间取值。
网格区域:grid-template-ares:
‘a b c’
‘d e f’;
定义了6个网格。
网格的间距
row-gap:1px;行间距
column-gap:1px;列间距
复合写法:gap:row column;

网格排列,默认先行后列。
grid-auto-flow:column:设定为先列后行的排列。
grid-auto-flow:column dense;默认情况下,排列可能会有间隙,设置dense能让小的项目填到间隙。

单元格内容位置:
垂直位置：align-items 水平位置:justify-items 复合写法:place-items:align justify；
可选值：start | end | center | stretch;
子项内容在父容器的位置：垂直位置：align-content 水平位置：justify-items
可选值：:start | end | center | stretch | space-around | space-between | space-evenly;

网格也是比较好理解,但是用的少了还是会忘记,学习阶段应该多用。