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 ...
随机推荐
- Java中时间处理
旧 API:位于 java.util 包中,里面主要有 Date.Calendar.TimeZone 类 新 API:位于 java.time 包中,里面主要有 LocalDateTime.Zoned ...
- Appium定位元素
定位元素规则 和 Selenium Web自动化一样,要操作界面元,必须先定位(选择)元素. Appius是基于 Selenium的,所以和 Selenium代码定位元素的基本规则相同 find el ...
- NodeJs将异步方法改为同步以上传文件为例
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 下面这个例子既写 ...
- python多线程+生产者和消费者模型+queue使用
多线程简介 多线程:在一个进程内部,要同时干很多事情,就需要同时执行多个子任务,我们把进程内的这些子任务叫线程. 线程的内存空间是共享的,每个线程都共享同一个进程的资源 模块: 1._thread模块 ...
- SpringMVC 学习笔记(五)
47. 尚硅谷_佟刚_SpringMVC_文件上传.avi 参看博客https://www.cnblogs.com/hanfeihanfei/p/7931758.html相当的经典 我是陌生人关于Sp ...
- Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信
回顾:上一次已经把消息的布局以及样式做好了 效果图: 在removeList.js文件中,messageId就是发起这个消息的用户了 先查看一下自定义组件的生命周期 https://developer ...
- DataFrame索引和切片
import numpy as np import pandas as pd from pandas import DataFrame, Seriesdf = DataFrame(data=np.ra ...
- openstack Rocky 社区版部署1.4 安装数据库
在控制节点安装mariadb,也可以单独服务器安装数据库,假如多个控制节点就在第一台安装数据库,计算节点不需要安装. 1 安装mariadb相关安装包. yum install mariadb mar ...
- pxc搭建mysql集群
docker -y update yum install -y docker service docker satrt docker images 服务器:curl -sSL https://get. ...
- urllib库使用方法
这周打算把学过的内容重新总结一下,便于以后翻阅查找资料. urllib库是python的内置库,不需要单独下载.其主要分为四个模块: 1.urllib.request——请求模块 2.urllib.e ...