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 ...
随机推荐
- 关于 JOIN 耐心总结,学不会你打我系列
现在随着各种数据库框架的盛行,在提高效率的同时也让我们忽略了很多底层的连接过程,这篇文章是对 SQL 连接过程梳理,并涉及到了现在常用的 SQL 标准. 其实标准就是在不同的时间,制定的一些写法或规范 ...
- Lucene5多条件查询
lucene是一个很强大的搜索工具,最近公司项目上用到,结合JAVA1234所讲,对多条件查询做出总结 先描述一下我的多条件需求,如果和您的类似,继续往下看. 1.我的Lucene搜索会在很多地方使用 ...
- 修改VirtualBox中mac的分辨率
转自 http://www.ztyhome.com/virtualbox-mac-fen-bian-lv/?replytocom=3162 最近在windows上用VirtualBox安装了MAC o ...
- 看完这篇 HashMap,和面试官扯皮就没问题了
HashMap 概述 如果你没有时间细抠本文,可以直接看 HashMap 概述,能让你对 HashMap 有个大致的了解. HashMap 是 Map 接口的实现,HashMap 允许空的 key-v ...
- git提交时报错:Updates were rejected because the tip of your current branch is behind
有如下3种解决方法: 1.使用强制push的方法:git push -u origin master -f这样会使远程修改丢失,一般是不可取的,尤其是多人协作开发的时候. 2.push前先将远程rep ...
- 【解读】Http协议
一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...
- 在maven项目中使用Junit进行单元测试(一)
https://blog.csdn.net/ai_xue_xi/article/details/51819729 这篇文章相当的经典,最好使用的maven生成单元测试报告,不要在使用ant脚本生成单元 ...
- Python3-threading模块-多线程
什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 P ...
- 测试同学动手搭个简易web开发项目
技术栈 node.js, vue.js, axios, python, django, orm, restful api, djangorestframework, mysql, nginx, jen ...
- Python 简明教程 --- 7,Python 字符串
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 过早的优化代码是罪恶之源. -- Donald Knuth 目录 无论哪种编程语言,字符串处理都是最 ...