CSS3彈性盒子布局方式

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

CSS3 彈性盒子常用屬性：

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

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

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

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

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

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

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

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

四、flex-wrap：指定彈性盒子的子元素?fù)Q行方式。

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

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

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

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

常用屬性值有： 1.auto：默認(rèn)繼承父元素的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:一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行擴(kuò)展的量。 flex-shrink：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行收縮的量。 flex-basis ：項(xiàng)目的長度。合法值："auto"、"inherit" 或一個(gè)后跟 "%"、"px"、"em" 或任何其他長度單位的數(shù)字。 auto：等效于1 1 auto。 initial：設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto。 inherit：從父元素繼承該屬性。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。