css如何使用flexbox布局容器内多元素水平居中

发布时间:2021-09-14 11:46:29 作者:小新
来源:亿速云 阅读:199

小编给大家分享一下css如何使用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布局容器内多元素水平居中”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. css如何让浮动的元素水平居中
  2. CSS如何实现子元素div水平垂直居中

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css flexbox

上一篇:CSS样式覆盖规则的示例分析

下一篇:css中word-break和work-wrap有什么区别

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》