css使用flexbox布局容器內(nèi)多元素水平居中
發(fā)布時(shí)間：2016-03-17 09:45:45 作者：五木十架 
我要評(píng)論
我要評(píng)論這篇文章主要為大家詳細(xì)介紹了css使用flexbox布局容器內(nèi)多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文為大家進(jìn)行解答，感興趣的小伙伴們可以參考一下
想要實(shí)現(xiàn)這樣一個(gè)父元素中的子元素都是居中的
只需在父元素上加樣式
復(fù)制代碼
代碼如下:{display: flex;flex-direction: column;align-items:center;}
設(shè)置為flexbox布局，方向?yàn)榭v向排列，第三句是使其居中。
如果三個(gè)子元素的距離要自己設(shè)定，就設(shè)置margin-top或margin-bottom就好了；
如果讓其自動(dòng)調(diào)整，可以給父元素的樣式再加上
復(fù)制代碼
代碼如下:{justify-content：space-around;}
這樣剩余的空間會(huì)自動(dòng)分配到各元素周邊：）
剛開(kāi)始覺(jué)得沒(méi)什么必要用sass，現(xiàn)在發(fā)現(xiàn)很多css代碼還是復(fù)用性很高的
為這個(gè)案例就算攢了一個(gè)小小的傳參的mixin了，默認(rèn)自動(dòng)調(diào)整，也可以傳參false，不自動(dòng)調(diào)整
CSS Code復(fù)制內(nèi)容到剪貼板
- @mixin multi-elements-center($auto:true){
- display:flex;
- flex-direction:column;
- align-items:center;
- @if $auto{justify-content:space-around;}
- }
每天進(jìn)步一點(diǎn)點(diǎn)，大家一起努力加油，提高自己的技術(shù)水平。
原文：http://www.cnblogs.com/wzls/p/5273100.html
相關(guān)文章
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁(yè)腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-27CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解
骰子布局顧名思義,就是好比骰子的一面最多可以放置9個(gè)點(diǎn),而每個(gè)面放置的點(diǎn)數(shù)正好就是一個(gè)布局的模型圖,這里我們就帶來(lái)CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解:2016-06-27基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例
這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例,文中最后也提到了解決兼容性問(wèn)題的基本方法,需要的朋友可以參考下2016-04-08CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南
這篇文章主要介紹了CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南,Flexbox在"布局界"可謂風(fēng)光無(wú)限,近來(lái)Facebook開(kāi)源的React Native也采用Flexbox來(lái)布局,需要的朋友可以參考下2016-04-08
這篇文章主要介紹了淺談最全面的水平垂直居中方案與flexbox布局 的相關(guān)資料，主要介紹了定長(zhǎng)定寬或不定長(zhǎng)寬的各類(lèi)容器的垂直居中以及flexbox，非常具有實(shí)用價(jià)值，需要的朋2018-08-20
