css练习-容器内多元素水平居中-flexbox布局应用_html/css_WEB-ITnose
Jun 24, 2016 am 11:24 AM
想要实现这样一个父元素中的子元素都是居中的
只需在父元素上加样式
{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

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element?

What are the best practices for cross-browser compatibility in HTML5?

What is the purpose of the <datalist> element?

What is the purpose of the <progress> element?
