溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css彈性子元素屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
彈性子元素屬性
排序
語法
order:
各個值解析:
<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。
order 屬性設置彈性容器內彈性子元素的屬性:
實例
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
}
對齊
設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間。所以設置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
以下實例在第一個彈性子元素上設置了 margin-right: auto; 。 它將剩余的空間放置在元素的右側：
實例
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
}
完美的居中
以下實例將完美解決我們平時碰到的居中問題。
使用彈性盒子，居中變的很簡單，只需要設置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
實例
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
以上是“css彈性子元素屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
