和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的更多相关文章

  1. 用weexplus从0到1写一个app

    说明 基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我 ...

  2. display flex 和a标签不行

    父元素display: flex;  display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...

  3. 浅谈display:flex

    display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...

  4. 用C写一个web服务器(一) 基础功能

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  5. 用C写一个web服务器(二) I/O多路复用之epoll

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  6. 用C写一个web服务器(三) Linux下用GCC进行项目编译

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  7. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  8. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  9. 布局神器display:flex

    2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持.   flex浏览器支持 一.Flex布局是什么? Flex是Flexi ...

随机推荐

  1. Linux下安装java环境

    准备工作: linux环境 xshell6 1.在Windows本地www,oracle.com下载对应的linux系统的JDK安装包,我下载的是 2.下载下来后,通过xftp远程传输到linux服务 ...

  2. MySQL LOAD DATA INFILE—批量从文件(csv、txt)导入数据

    最近做的项目,有个需求(从Elastic Search取数据,业务运算后),每次要向MySQL插入1300万数据左右.最初用MySQL的executemany()一次插入10000条数据,统计的时间如 ...

  3. disruptor架构四 多生产者多消费者执行

    1.首先介绍下那个时候使用RingBuffer,那个时候使用disruptor ringBuffer比较适合场景比较简单的业务,disruptor比较适合场景较为复杂的业务,很多复杂的结果必须使用di ...

  4. idea中Junit的使用

    第一步:添加插件 添加插件:File->Settings->Plugins 第二步:修改设置 1.设置生成模式:File->Settings->Other Settings 指 ...

  5. Zookeeper分布式过程协同技术 - 群首选举

    Zookeeper分布式过程协同技术 - 群首选举 群首概念 群首为集群中服务器选择出来的一个服务器,并被集群认可.设置群首目的在与对客户端所发起的状态变更请求进行排序,包括:create.setDa ...

  6. python+opencv实现检测物体聚集区域

    内容涉及:二值图像转换 / 检测连通区域面积 / 在原图上画框等 import cv2 import numpy as np for n in open('list.txt'): # list.txt ...

  7. windows虚拟机安装mac

    在虚拟机上安装mac 首先参考这个:http://jingyan.baidu.com/article/7f41ecec039936593d095c87.html 如果完成不了,请参看下面的.     ...

  8. 小师妹学JVM之:JIT中的PrintAssembly

    目录 简介 使用PrintAssembly 输出过滤 总结 简介 想不想了解JVM最最底层的运行机制?想不想从本质上理解java代码的执行过程?想不想对你的代码进行进一步的优化和性能提升? 如果你的回 ...

  9. ORACLE数据库数据被修改或者删除恢复数据(闪回)

    1. SELECT * FROM CT_FIN_RiskItem  --先查询表,确定数据的确不对  (cfstatus 第一行缺少) 2. select * from CT_FIN_RiskItem ...

  10. tableau入门学习笔记--分页功能

    最近在使用tableau来制作报表,对于tableau也是第一次接触并使用,每天学习些新的功能来记录在博客里,给他人方便,也给自己方便 tableau分页功能 很多时候由于工作表过长而出现拖拽条,如果 ...