文档章节

less : 写一个display:flex的mixin

o
 osc_fmg49rzg
发布于 2019/03/20 10:38
字数 167
阅读 0
收藏 0

和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)
}

以上。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Vue-插槽slot/具名插槽

插槽的基本使用: <div id="app"> <cpn> <span>我是替换slot的元素1</span> </cpn>------------------------------------- <cpn2> <span>......

心田已荒
14分钟前
6
0
标准Android按钮具有不同的颜色 - Standard Android Button with a different color

问题: I'd like to change the color of a standard Android button slightly in order to better match a client's branding. 我想稍微更改标准Android按钮的颜色,以便更好地匹配客户的品......

技术盛宴
32分钟前
24
0
如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部