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

只需在父元素上加样式

{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. linux常用的小命令

    查看linux版本 uname -a 图上可知,linux内核版本为2.6.32 查看cpu核数 cat /proc/cpuinfo |grep "cores"| uniq 系统中 ...

  2. 02java基础——类和方法

    1.类的定义 /* 定义类: 使用类的形式,对现实中的事物进行描述 事物: 属性,方法 属性: 变量 方法: 这个事物具备的功能 格式: public class 类名{ 属性定义 修饰符 数据类型 ...

  3. Codeforces 950 010子序列拆分 数列跳棋

    A B a,b两个序列分成K段 每一段的值相等 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset ...

  4. 可持久化+Trie || BZOJ 3261最大异或和 || Luogu P4735 最大异或和

    题面:最大异或和 代码: #include<cstdio> #include<cstring> #include<iostream> using namespace ...

  5. Centos7.5 ZABBIX4.0.3版本的编译安装

    Zabbix监控的搭建理论 1.      Zabbix Server会去采集监控数据,采集的监控数据会写入到SQL数据库 2.      Zabbix的WEB后端采用php语言开发,所有配置信息.用 ...

  6. 作用域变量 var

    var没有块级作用域,定义后在当前闭包中都可以访问,如果变量名重复,就会覆盖前面定义的变量,并且也有可能被其他人更改. 变量名重复,就会覆盖前面定义的变量,并且也有可能被其他人更改: console. ...

  7. day03记 angular代码

    一.AngularJs AngularJS 是一个 JavaScript 框架.通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 1.四大特征 MVC模式.模块化.自动化双向数据绑 ...

  8. mysql——批量插入数据

    要测试一下新功能,需要测试环境下的数据库有大量的数据,一个个插入显然不现实,需要了解一下存储过程 https://www.cnblogs.com/endtel/p/5407455.html Navic ...

  9. delphi 10.3 IOS中英文错位

    delphi 每回升级都会遇到各种问题, 在安卓和windows下正常,ios遇到排版问题. 解决办法:将附件文件放至程序目录下. 百度网盘下载附件 链接: https://pan.baidu.com ...

  10. permutation 1

    permutation 1 #include<bits/stdc++.h> using namespace std; ]; void init() { ; i<=; i++)A[i] ...