首页 >web前端 >css教程 >css使用flexbox布局容器内多元素水平居中的方法

css使用flexbox布局容器内多元素水平居中的方法

高洛峰
高洛峰原创
2017-03-10 10:41:571301浏览

这篇文章主要为大家详细介绍了css使用flexbox布局容器内多元素水平居中的方法,如何使用flexbox布局多元素水平居中?本文为大家进行解答,感兴趣的小伙伴们可以参考一下

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

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;}   
}

每天进步一点点,大家一起努力加油,提高自己的技术水平。


以上是css使用flexbox布局容器内多元素水平居中的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn