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)
}
以上。
less : 写一个display:flex的mixin的更多相关文章
- 用weexplus从0到1写一个app
说明 基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我 ...
- display flex 和a标签不行
父元素display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...
- 浅谈display:flex
display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...
- 用C写一个web服务器(一) 基础功能
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- 用C写一个web服务器(二) I/O多路复用之epoll
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- 用C写一个web服务器(三) Linux下用GCC进行项目编译
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- display:box和display:flex填坑之路
背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...
- 布局神器display:flex
2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持. flex浏览器支持 一.Flex布局是什么? Flex是Flexi ...
随机推荐
- [转载] WLAN:BSS,ESS,SSID
转载地址:http://blog.sina.com.cn/s/blog_71c6e0ea0100l686.html (2010-05-24 15:20:47) SSID(Service Set Ide ...
- WeChair——团队展示
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次 这个作业的目标 团队合作,项目开发 作业正文 如下 其他参考文献 ...
- Unable to resolve dependency for ':app@debug/compileClasspath': Could not find any version that matc
错误展示: 错误提示: Unable to resolve dependency for ':app@debug/compileClasspath': Could not find any versi ...
- 说说TCP的三次握手和四次挥手
一.传输控制协议TCP简介 1.1 简介 TCP(Transmission Control Protocol) 传输控制协议,是一种 面向连接的.可靠的.基于字节流的传输层 通信协议. TCP是一种面 ...
- SpringCloud之初识Feign
在前面的学习中,我们使用了Ribbon的负载均衡功能,大大简化了远程调用时的代码: String baseUrl = "http://user-service/user/"; Us ...
- python 模块 来了 (调包侠 修炼手册一)
模块 什么是模块 模块:就是一系列功能的结合体 ,也可以说 一个.py文件包含了 Python 对象定义和Python语 那么 他就 可以说是 一个模块 模块的三种来源: 1.内置的(python解释 ...
- 常用电子邮件协议服务POP3/IMAP/SMTP/Exchange
标题: 常用电子邮件协议服务POP3/IMAP/SMTP/Exchange 作者: 梦幻之心星 347369787@QQ.com 标签: [电子邮件, 服务, 协议] 目录: [客户端] 日期: 20 ...
- java中的Arrays这个工具类你真的会用吗
Java源码系列三-工具类Arrays 今天分享java的源码的第三弹,Arrays这个工具类的源码.因为近期在复习数据结构,了解到Arrays里面的排序算法和二分查找等的实现,收益匪浅,决定研读 ...
- Bootstrap 3.3
https://jeesite.gitee.io/front/bootstrap/3.3/v3.bootcss.com/index.htm
- GAN网络从入门教程(一)之GAN网络介绍
GAN网络从入门教程(一)之GAN网络介绍 稍微的开一个新坑,同样也是入门教程(因此教程的内容不会是从入门到精通,而是从入门到入土).主要是为了完成数据挖掘的课程设计,然后就把挖掘榔头挖到了GAN网络 ...