less : 写一个display:flex的mixin

和scss一样,less也是一个好用的css预处理语言,语法也很相近。

而我们在使用display:flex的时候,很容易苦恼于里面的设置的单词很难记(尤其是对我这种英语很差的人来说)。

所以我们可以写一个display:flex的mixin。

上代码。

.flex_init_func(@jc: flex-start, @ai: stretch){
    display: flex;
    justify-content: @jc;
    align-items: @ai;
}

flex的设置有很多,但这两个是最常用的。

参数的默认值和原标准相同,方便使用。

.news-container {    
    .flex_init_func(center; center)
}

如果需要不同的设置,传不同的参数就可以了。

或者:

.news-container {    
    .flex_init_func(@justify-content:center; @align-items:center)
}

以上。

posted on 2019-03-20 10:38  fox_charon  阅读(794)  评论(0编辑  收藏  举报

导航