小編給大家分享一下css如何使用flexbox布局容器內(nèi)多元素水平居中，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來(lái)巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，創(chuàng)新互聯(lián)建站面向各種領(lǐng)域：陽(yáng)光房等網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

想要實(shí)現(xiàn)這樣一個(gè)父元素中的子元素都是居中的

只需在父元素上加樣式

{display: flex;flex-direction: column;align-items:center;}

設(shè)置為flexbox布局，方向?yàn)榭v向排列，第三句是使其居中。

如果三個(gè)子元素的距離要自己設(shè)定，就設(shè)置margin-top或margin-bottom就好了；

如果讓其自動(dòng)調(diào)整，可以給父元素的樣式再加上

{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)整

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

看完了這篇文章，相信你對(duì)“css如何使用flexbox布局容器內(nèi)多元素水平居中”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：css如何使用flexbox布局容器內(nèi)多元素水平居中-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article36/dgjdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、服務(wù)器托管、建站公司、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)