溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css如何使用flexbox布局容器內多元素水平居中，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
想要實現這樣一個父元素中的子元素都是居中的
只需在父元素上加樣式
{display: flex;flex-direction: column;align-items:center;}設置為flexbox布局，方向為縱向排列，第三句是使其居中。
如果三個子元素的距離要自己設定，就設置margin-top或margin-bottom就好了；
如果讓其自動調整，可以給父元素的樣式再加上
{justify-content：space-around;}這樣剩余的空間會自動分配到各元素周邊：）
剛開始覺得沒什么必要用sass，現在發(fā)現很多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布局容器內多元素水平居中”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
