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 ...
随机推荐
- ConcurrentHashMap源码解析-Java7
目录 一.ConcurrentHashMap的模型图 二.源码分析-类定义 2.1 极简ConcurrentHashMap定义 2.2 Segment内部类 2.3 HashEntry内部类 2.4 ...
- 找到了两个联想的OEM XP镜像文件
今天在收拾移动硬盘的时候发现了两个XP镜像 还都是联想的,一个有OOBE,另一个无OOBE,全传网盘里了,需要的自取 有个疑问 2020年还有多少家庭电脑和ATM机器还在用XP??? link:htt ...
- OS_页面置换算法:C++实现
一.实验目的: 通过模拟实现请求页式存储管理的几种基本页面置换算法,了解虚拟存储技术的特点,掌握虚拟存储请求页式存储管理中几种页面置换算法的基本思想和实现过程,并比较它们的效率. 二.实验内容: 本实 ...
- Spring7——开发基于注解形式的spring
开发基于注解形式的spring SpringIOC容器的2种形式: (1)xml配置文件:applicationContext.xml; 存bean:<bean> 取bean: Appli ...
- 使用IDEA 发布项目搭配远程仓库 Gitee
本次讲解的是idea 发布到gitee上 一样的操作流程 没有基础的请先去学习 附上我的 gitee 地址 有资源会发布到gitee 俗话说关注走一走 活到999 https://gitee.com/ ...
- springBoot--集成RocketMQ
1.导入依赖 <dependency> <groupId>org.apache.rocketmq</groupId> <artifactId>sprin ...
- dll备份注意事项
test.dll20161111和test.dll同目录的时候,会报错!因为这样跟test1.dll(只是重名民)的效果是一样的,都会报错的. 同目录的情况下,应该改成test.dll.ddd. 为了 ...
- linux之文件基本操作
文件/目录管理命令: cd命令主要是改变目录的功能 cd ~ 返回登录目录 cd / 返回系统根目录 cd ../ 或者cd .. 返回上一级目录 cd - 返回上一次访问的目录 pwd命令用于显 ...
- Guava RateLimiter限流器使用示例
Guava中的RateLimiter可以限制单进程中某个方法的速率,本文主要介绍如何使用,实现原理请参考文档:推荐:超详细的Guava RateLimiter限流原理解析和推荐:RateLimiter ...
- 我是如何用 CSS 绘制各种形状的
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...