这些天陆陆续续学的比较杂,仍是须要来总结一下。web
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;svg
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;flex
网格也是比较好理解,可是用的少了仍是会忘记,学习阶段应该多用。spa