flex
布局是 css3 中使用最頻繁也是最出色的功能,有點複雜,分為應用在容器上的屬性和項目上的屬性,即父元素上的與子項目上的屬性。
父元素上的屬性
display: flex
<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> <p> <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b> </p></body>
當父元素設定為 flex
後,其父元素自身會表現成區塊層級元素,如果想表現為行內元素,可以使用 inline-flex
。 所有子項目不管是塊級的還是行內的,會立即變成行內布局,這是其他屬性的預設值所致的,後面可以修改。
flex-direction
<style>p{display: flex; background-color: yellow; margin: 5px;}p.row{ flex-direction: row;}p.row-reverse{ flex-direction: row-reverse;}p.column{ flex-direction: column;}p.column-reverse{ flex-direction: column-reverse;}b{background-color: red;}</style><body> <p class="row"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="row-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>
flex-direction
決定子項目的排列方向,預設值 row
。
flex-wrap
<style>p{display: flex; background-color: yellow; margin: 5px; }p.nowrap{ flex-wrap: nowrap;}p.wrap{ flex-wrap: wrap;}p.wrap-reverse{ flex-wrap: wrap-reverse;}b{background-color: red; width: 100px;}</style><body> <p class="nowrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>
flex-wrap
決定子項目超出一行時應該如何處理,預設值 nowrap
會壓縮子項目的寬度,wrap
是換行,wrap-reverse
則是向上增加新一行。注意:這是在主軸為X軸的前提下討論的。
justify-content
<style>b{background-color: red; }p{display: flex; background-color: yellow; margin: 5px; }p.start{ justify-content: flex-start;}p.end{justify-content: flex-end;}p.center{ justify-content: center;}p.space-between{ justify-content: space-between;}p.space-around{ justify-content: space-around;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>
justify-content
決定子項目在主軸(當前是X軸)上的位置,預設值 flex-start
。space-between
與 space-around
的間隔是多餘空間平分出來的,但後者會為左右端也計入空間。
align-items
<style>b{background-color: red; width: 40px;}b:nth-child(1){}b:nth-child(2){font-size: 30px; height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }p.start{ align-items: flex-start;}p.end{ align-items: flex-end;}p.center{ align-items: center;}p.baseline{ align-items: baseline;}p.stretch{ align-items: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="baseline"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>
align-items
決定副軸(當前為Y軸)上元素的對其方式。預設值 stretch
,表示當子項目不設定高度時,充滿父類高度。
align-content
<style>b{background-color: red; width: 100px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}p.start{ align-content: flex-start;}p.end{ align-content: flex-end;}p.center{ align-content: center;}p.space-between{ align-content: space-between;}p.space-around{ align-content: space-around;}p.stretch{ align-content: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>
align-content
表示子項目有多行時,每行在副軸(當前為Y軸)上的位置。預設值 stretch
,表示變動子項目每行的高度,直到充滿父元素。
子項目上的屬性
order
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{order: -1;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>
order
表示從小到大排列同級元素,預設值 0
。
flex-grow
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>
flex-grow
表示當主軸(當前為X軸)上有剩餘空間時,平分空間時所佔的比例。預設值 0
,表示不佔空間。當前空間平分比例為 0 : 0 : 1 : 0
,所以 c 佔據所有剩餘空間。
flex-shrink
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; width: 100px; flex-shrink: 0;}b.test{flex-shrink: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>
flex-shrink
表示當主軸(當前為X軸)空間不足以填充所有子項目時,應該如何壓縮子項目,預設值 1
,表示 1 : 1 : 1 : 1
,即等比壓縮,當前比例為 0 : 0 : 1 : 0
,表示所有空間由 c 來壓縮。
flex-basis
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b.test{flex-basis: 100px; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>
flex-basis
表示當主軸(當前為X軸)上平分空間前,先佔據的位置,當主軸為X軸,與設定 width
是等效的,當主軸為Y軸,與設定 height
是等效的。預設值 auto
,表示與 width
或 height
相等。
align-self
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>
align-self
表示當前元素可以覆蓋父元素 align-items
所決定的副軸(當前為Y軸)上的方向。預設 auto
,即不設定。可選擇與 align-items
一致,auto | flex-start | flex-end | center | baseline | stretch
。
特別注意,為簡化布局理解,上面案例都使用了預設的 flex-direction:row
作為子項目排序方向為基礎。如果改為 flex-direction:column
,主軸將為變成 Y 軸,而副軸將變成 X 軸,所有屬性的效果將會改變,這個留給讀者自行實踐。
學習過程中遇到什麼問題或者想擷取學習資源的話,歡迎加入學習交流群
343599877,我們一起學前端!