和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. [白话解析] 通过实例来梳理概念 :准确率 (Accuracy)、精准率(Precision)、召回率(Recall)和F值(F-Measure)

    [白话解析] 通过实例来梳理概念 :准确率 (Accuracy).精准率(Precision).召回率(Recall)和F值(F-Measure) 目录 [白话解析] 通过实例来梳理概念 :准确率 ( ...

  2. 手机U盘制作成系统启动盘后在手机端无法识别

    本人最近用手机U盘做了个系统启动盘,突然发现U盘再次插到手机的时候,手机无法识别出U盘了,于是百度了一下,百度结果大概是跟U盘的格式有关.结果我想起了之前用的DiskGenius可以看到u盘的隐藏盘符 ...

  3. jquery-form详解

    jQuery-Form 概观 jQuery表单插件允许您轻松而不显眼地升级HTML表单以使用AJAX.主要方法ajaxForm和ajaxSubmit从表单元素收集信息以确定如何管理提交过程.这两种方法 ...

  4. 15.DRF-分页

    Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...

  5. 5、struct2的支持ModelDriver获得参数

    1.在以前的代码中我们我们需要获得jsp传递过来的参数我们采用下面的方式获得 package com.weiyuan.test; /** * struct2的action可以不继承任何框架的接口 * ...

  6. ES6 promise用法总结

    一   什么时候promise? promise是异步编程的一个解决方案,是一个构造函数,身上带着all,resolve,reject,原型上有cath,then等方法 promise有两个特点: 1 ...

  7. JS判断 函数是否定义/变量是否定义

    函数是否定义: <script type="text/javascript"> try { if(typeof FunName === "function&q ...

  8. 微信开发_Exception_02_"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint

    ip查询网址: http://www.ip.cn/ 一.异常现象 今天开始做微信开发,在办公室时能正常获取access_token,晚上回家之后获取access_token时却报出下列错误信息: {& ...

  9. JavaScript图形实例:递归生成树

    观察自然界中树的分叉,一根主干生长出两个侧干,每个侧干又长出两个侧干,以此类推,便生长出疏密有致的结构.这样的生长结构,使用递归算法可以模拟出来. 例如,分叉的侧干按45°的偏转角度进行生长的递归示意 ...

  10. 初探RabbitMQ消息队列

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...