想要实现这样一个父元素中的子元素都是居中的

只需在父元素上加样式

{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布局应用的更多相关文章

  1. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  2. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  3. CSS 中的内联元素、块级元素、display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  4. CSS基础:内联元素

    简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...

  5. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  6. CSS块级-内联元素,盒子模型

    CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...

  7. html/css解决inline-block内联元素间隙的多种方法总汇

    序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...

  8. Windows Phone 为指定容器内的元素设置样式

    在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...

  9. c++随机排序容器中的元素

    在各种程序语言中都提供了将容器元素随机排序的shuffle方法,c++也不例外. 不过c++将shuffle放在了<algorithm>中而不是像其他语言一样在random里,同时c++1 ...

随机推荐

  1. PHP至Document类操作 xml 文件

    今天将项目上传到服务器后,打开项目发现报错 Error:undefined function appendChild()......, 根据提示查看源代码,发现 new Document()-> ...

  2. k3 cloud中如何把一个账套中的单据部署到另一个账套中

    打开bos,依次点击->解决方案->部署包管理 填写部署包名称并点击下一步 选择需要部署的单据并点击下一步 确定后点击下一步: 点击完成 找到部署路径会成一个部署包: 部署:打开部署包安装 ...

  3. C# 同比缩放图片

    /** * 无损缩放图片 * bitmap 需要缩放的图片 * w 需要缩放的宽度 * h 需要缩放的高度 * */ public static System.Drawing.Bitmap TBSca ...

  4. mailaddr - 关于邮件地址的描述

    DESCRIPTION 描述 本手册给出的是 Internet 使用的 SMTP 邮件地址的简要描述.这些地址的通常的格式是 user@domain 这里的域 (domain) 是分级的子域的列表,子 ...

  5. 图像语义分割出的json文件和原图,用plt绘制图像mask

    1.弱监督 由于公司最近准备开个新项目,用深度学习训练个能够自动标注的模型,但模型要求的训练集比较麻烦,,要先用ffmpeg从视频中截取一段视频,在用opencv抽帧得到图片,所以本人只能先用语义分割 ...

  6. RMQ 区间最大值最小值 最频繁次数

    区间的最大值和最小值 #include <cstdio> #include <cstring> #include <cmath> #include <iost ...

  7. spring 管理bean

    目录结构: Person.java package com.wss.entity; import com.wss.service.doHomeWork; public class Person { p ...

  8. 数列前n项和

    等差数列 等比数列 常见的前n项和

  9. [window] Pyhton轻便好用的spyder IDE如何去除E501 line too long提示

    spyder 使用pep8作为代码规范的标准,默认单行长度是89个字符以内. 作为一个完美控,在使用spyer有的进行coding时,每当看到以下这个小小的warning时,心情都不是很爽: 89个字 ...

  10. Redis实战(十一)Redis面试题

    序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...