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 ...
随机推荐
- linux最小化安装命令补全
bash-completion 需要安装bash-completion才能补全,安装后,重新打开一个窗口就能生效.
- 一个非侵入的Go事务管理库——工作原理
在上一篇文章"一个非侵入的Go事务管理库--如何使用"中,我讲述了如何使用事务库.有些读者可能读过"清晰架构(Clean Architecture)的Go微服务: 事物管 ...
- 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏
项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...
- ubuntu镜像源切换
换源准备: 换源之前明确使用平台,X86架构.ARM架构的源,ubuntu18.04和unbuntu16.04等源均不同,切忌病急乱投医,看到一个源复制过来添加后没用. 分析一条源: deb http ...
- LIMS产品 - Labware
软件架构 客户端:Labware软件,部分C/S功能 Web服务:Apache Tomcat等,部分B/S功能 后台服务:计划.调度程序,环境监控样.稳定性研究等 数据库驱动:ODBC 报表工具:水晶 ...
- mybatis源码配置文件解析之四:解析plugins标签
在前边的博客在分析了mybatis解析typeAliases标签,<mybatis源码配置文件解析之三:解析typeAliases标签>.下面来看解析plugins标签的过程. 一.概述 ...
- Centos7安装部署openstack--nova计算服务
一.概述 使用OpenStack计算服务来托管和管理云计算系统.OpenStack计算服务是基础设施即服务(IaaS)系统的主要部分,模块主要由Python实现. OpenStack计算组件请求Ope ...
- Python之浅谈多态和封装
目录 组合 什么是组合 为什么使用组合 多态和多态性 多态 什么是多态? 多态性 好处 多态性 什么是多态性 封装 封装是什么意思? 隐藏 如何用代码实现隐藏 python 实际上是可以访问隐藏属性的 ...
- code first 更新字段
protected override void Up(MigrationBuilder migrationBuilder) { migrationBuilder.AddColumn<string ...
- VMware实现宿主机和虚拟机处于同一网段
打开虚拟网络编辑器 选择VMnet0桥接模式,在VMnet信息中,选择可以选择的网卡,然后保存. 打开虚拟机设置,在“硬件”选项卡的网络适配器中选择桥接模式即可.