css练习-容器内多元素水平居中-flexbox布局应用
想要实现这样一个父元素中的子元素都是居中的
只需在父元素上加样式
{display: flex;flex-direction: column;align-items:center;}
设置为flexbox布局,方向为纵向排列,第三句是使其居中。
如果三个子元素的距离要自己设定,就设置margin-top或margin-bottom就好了;
如果让其自动调整,可以给父元素的样式再加上
{justify-content:space-around;}
这样剩余的空间会自动分配到各元素周边:)
刚开始觉得没什么必要用sass,现在发现很多css代码还是复用性很高的
为这个案例就算攒了一个小小的传参的mixin了,默认自动调整,也可以传参false,不自动调整
@mixin multi-elements-center($auto:true){
display:flex;
flex-direction:column;
align-items:center;
@if $auto{justify-content:space-around;}
}
每天进步一点点,加油:)
更多flexbox内容参见阮老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
css练习-容器内多元素水平居中-flexbox布局应用的更多相关文章
- 【css系列】六种实现元素水平居中方法
一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS基础:内联元素
简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- CSS块级-内联元素,盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- html/css解决inline-block内联元素间隙的多种方法总汇
序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...
- Windows Phone 为指定容器内的元素设置样式
在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...
- c++随机排序容器中的元素
在各种程序语言中都提供了将容器元素随机排序的shuffle方法,c++也不例外. 不过c++将shuffle放在了<algorithm>中而不是像其他语言一样在random里,同时c++1 ...
随机推荐
- PHP至Document类操作 xml 文件
今天将项目上传到服务器后,打开项目发现报错 Error:undefined function appendChild()......, 根据提示查看源代码,发现 new Document()-> ...
- k3 cloud中如何把一个账套中的单据部署到另一个账套中
打开bos,依次点击->解决方案->部署包管理 填写部署包名称并点击下一步 选择需要部署的单据并点击下一步 确定后点击下一步: 点击完成 找到部署路径会成一个部署包: 部署:打开部署包安装 ...
- C# 同比缩放图片
/** * 无损缩放图片 * bitmap 需要缩放的图片 * w 需要缩放的宽度 * h 需要缩放的高度 * */ public static System.Drawing.Bitmap TBSca ...
- mailaddr - 关于邮件地址的描述
DESCRIPTION 描述 本手册给出的是 Internet 使用的 SMTP 邮件地址的简要描述.这些地址的通常的格式是 user@domain 这里的域 (domain) 是分级的子域的列表,子 ...
- 图像语义分割出的json文件和原图,用plt绘制图像mask
1.弱监督 由于公司最近准备开个新项目,用深度学习训练个能够自动标注的模型,但模型要求的训练集比较麻烦,,要先用ffmpeg从视频中截取一段视频,在用opencv抽帧得到图片,所以本人只能先用语义分割 ...
- RMQ 区间最大值最小值 最频繁次数
区间的最大值和最小值 #include <cstdio> #include <cstring> #include <cmath> #include <iost ...
- spring 管理bean
目录结构: Person.java package com.wss.entity; import com.wss.service.doHomeWork; public class Person { p ...
- 数列前n项和
等差数列 等比数列 常见的前n项和
- [window] Pyhton轻便好用的spyder IDE如何去除E501 line too long提示
spyder 使用pep8作为代码规范的标准,默认单行长度是89个字符以内. 作为一个完美控,在使用spyer有的进行coding时,每当看到以下这个小小的warning时,心情都不是很爽: 89个字 ...
- Redis实战(十一)Redis面试题
序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...