Heim > Web-Frontend > HTML-Tutorial > css练习-容器内多元素水平居中-flexbox布局应用_html/css_WEB-ITnose

css练习-容器内多元素水平居中-flexbox布局应用_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:24:18
Original
981 Leute haben es durchsucht

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

只需在父元素上加样式

{display: flex;flex-direction: column;align-items:center;}
Nach dem Login kopieren

设置为flexbox布局,方向为纵向排列,第三句是使其居中。

如果三个子元素的距离要自己设定,就设置margin-top或margin-bottom就好了;

如果让其自动调整,可以给父元素的样式再加上

{justify-content:space-around;}
Nach dem Login kopieren

这样剩余的空间会自动分配到各元素周边:)

刚开始觉得没什么必要用sass,现在发现很多css代码还是复用性很高的

为这个案例就算攒了一个小小的传参的mixin了,默认自动调整,也可以传参false,不自动调整

@mixin multi-elements-center($auto:true){display:flex;flex-direction:column;align-items:center;@if $auto{justify-content:space-around;}}
Nach dem Login kopieren

每天进步一点点,加油:)

更多flexbox内容参见阮老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage