CSS3彈性盒子布局方式

CSS3 彈性盒子（Flex Box）是一種適應不同屏幕大小及設備類型的一種布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。使用flex布局的元素，被稱為flex容器。使用flex布局后，子元素的float、clear和vertical-align屬性都將失效。

CSS3 彈性盒子常用屬性：

flex-direction：指定彈性容器中子元素的排列方式。
justify-content ：設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items： 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap：用于指定彈性盒子的子元素換行方式。
align-content：設置各個行的對齊。
align-self：設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
flex：用于指定彈性子元素如何分配空間。

彈性盒子屬性的具體用法：

一、flex-direction :指定彈性容器中子元素的排列方式。

常用屬性值有： 1.row：橫向從左到右排列（左對齊），默認的排列方式。 2.row-reverse：橫向排列從右到左排列。 3.column：縱向排列。 4.column-reverse： 縱向反向排列。

二、justify-content：設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。

常用屬性值有： 1.flex-start：左對齊（默認對齊方式）。 2.flex-end：右對齊。 3.center：居中對齊。 4.space-between：兩端對齊，項目直接間隔都相等。 5.space-around：項目兩側間隔相等，項目與項目之間的間隔是項目與邊框的間隔的兩倍。

三、align-items：設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。

常用屬性值有： 1.flex-start：側軸的起點對齊。 2.flex-end：側軸終點對齊。 3.center：側軸的中點對齊。 4.baseline：側軸兩端對齊。 5.stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

四、flex-wrap：指定彈性盒子的子元素換行方式。

常用屬性值有： 1.nowrap：在彈性容器內單行顯示（默認）。 2.wrap：彈性容器內溢出部分會換行顯示。 3.wrap-reverse：反向wrap排列。

五、align-content：align-content 屬性用于修改 flex-wrap 屬性的行為，設置各行元素的在側軸上的對齊。

常用屬性值有： 1.stretch：各行元素都被拉伸以適應容器。 2.flex-start：各行元素都緊挨著，且以頭部位置為標準。 3.flex-end：各行元素都緊挨著，且以尾部位置為標準。 4.center：各行元素都緊挨著，且以中間位置為標準。 5.space-between：除首位兩行元素緊挨邊框外，其他各行元素均勻分布剩余空白位置，且每行元素的間隔都相等。 6.space-around：各行元素直接都有間隔，且間隔相等，但首尾各行元素與邊框之間的間隔是其他間隔的一半。

六、align-self：設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

常用屬性值有： 1.auto：默認繼承父元素的align-items屬性，如果沒有父容器則為 "stretch"。 2.stretch：元素被拉伸已適用容器。 3.center：元素位于容器中心。 4.flex-start：元素位于容器頭部。 5.flex-end：元素位于容器尾部。 6.baseline：元素位于容器基線上。

七、flex：用于指定彈性子元素如何分配空間。

語法：flex-grow flex-shrink flex-basis | auto | initial | inherit; flex-grow:一個數字，規定項目將相對于其他元素進行擴展的量。 flex-shrink：一個數字，規定項目將相對于其他元素進行收縮的量。 flex-basis ：項目的長度。合法值："auto"、"inherit" 或一個后跟 "%"、"px"、"em" 或任何其他長度單位的數字。 auto：等效于1 1 auto。 initial：設置該屬性為它的默認值，即為 0 1 auto。 inherit：從父元素繼承該屬性。

總結

以上是生活随笔為你收集整理的CSS3弹性盒布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。