一、CSS3彈性盒子

彈性盒子是CSS3的一種新布局模式。
CSS3 彈性盒，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br /> 引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。

二、css3彈性盒子的所有屬性

*1.flex-direction屬性====>>決定項(xiàng)目的方向*
flex-direction有四個(gè)屬性值分別為：row || row-reserve || column || column-reverse
[row]:默認(rèn)值，元素水平顯示，一行排列
[row-reserve]:和row一樣一行排列，但是它和row的排列方向相反
[column]:元素垂直顯示，就是一列
[column-reverse]:和column一樣是一列，但是排列順序的顛倒的
*2.flex-wrap屬性====>>決定元素單行還是多行*
flex-wrap有三個(gè)屬性值分別為：nowrap || wrap || wrap-reserve
[nowrap]:默認(rèn)值，元素在一行排布，不換行
[wrap]:元素在必要的時(shí)候進(jìn)行換行
[wrap-reserve]:元素在必要的時(shí)候進(jìn)行換行，但是它是以相反的順序排列的
3.flex-flow屬性
flex-flow屬性是flex-directio和flex-wrap的簡(jiǎn)寫(xiě)形式，默認(rèn)值是 row nowrap
*4.align-items屬性====>>定義盒子在在縱軸上的對(duì)齊方式*
align-items有五個(gè)屬性值分別為：stretch || center || flex-start || flex-end || baseline
[stretch ]:默認(rèn)值，拉伸項(xiàng)目來(lái)適應(yīng)布局
[center ]:項(xiàng)目在容器的中心排列
[lex-start]:項(xiàng)目從容器的開(kāi)始位置排列
[flex-end]:項(xiàng)目從容器的結(jié)尾地方開(kāi)始排列
[baseline]:項(xiàng)目的位置在容器的基線上
容器基線：
*5.justify-content屬性====>>定義盒子在橫軸上的對(duì)齊方式*
justify-content屬性有五個(gè)屬性分別為：flex-start || flex-end || center ||| space-around || space-between
[flex-star]:默認(rèn)屬性，項(xiàng)目位于盒子的開(kāi)頭
[flex-end]:項(xiàng)目位于容器的結(jié)尾
[center]:項(xiàng)目位于容器的中心
[space-around]:項(xiàng)目在每一行的前后左右都留有空白的位置
[space-between]:在容器內(nèi)。各行之前都留有空白

三、彈性子元素屬性

彈性子元素屬性一共有六種分別為：order || flex-grow || flex-shrink || flex-basis || flex || align-self
[order ]:設(shè)置彈性盒子子元素的排列順序
[flex-grow ]:設(shè)置或者檢索彈性盒子元素的擴(kuò)展比率
[flex-shrink]:指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容 器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。
[flex-basis ]:用于設(shè)置或是檢索彈性盒子伸縮基準(zhǔn)值
[flex]:設(shè)置彈性和盒子的子元素如何分配空間
[align-self`]:在彈性子元素上使用，覆蓋容器的align-items屬性

1.order屬性
用整數(shù)定義排列的順序，數(shù)值小的在前面，默認(rèn)值為0
2.flex-grow
一個(gè)數(shù)字規(guī)定一個(gè)項(xiàng)目相對(duì)于其他項(xiàng)目的擴(kuò)展值，默認(rèn)值為0
3.flex-shrink屬性
一個(gè)數(shù)字規(guī)定一個(gè)項(xiàng)目相對(duì)于其他項(xiàng)目的收縮值，默認(rèn)值為0
4.flex-basis
一個(gè)長(zhǎng)度單位或者一個(gè)百分比單位，規(guī)定元素的初始值 auto默認(rèn)值，長(zhǎng)度等于元素的長(zhǎng)度，如果該項(xiàng)目未指定長(zhǎng)度，則長(zhǎng)度將根據(jù)內(nèi)容決定
5.flex屬性
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性,共有七個(gè)屬性值：flex-grow || flex-shrink || flex-basis || auto || none || initial || inherit
[flex-grow]:一個(gè)數(shù)字，規(guī)定項(xiàng)目相對(duì)于其他元素的擴(kuò)展量
[flex-shrink]:一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行收縮的量
[flex-basis]:項(xiàng)目的長(zhǎng)度。合法值：“auto”、“inherit” 或一個(gè)后跟 “%”、“px”、“em” 或任何其他長(zhǎng)度單位的數(shù)字
[auto]:與 1 1 auto 相同
[none]:與 0 0 auto 相同
[initial]:設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto。
[inherit]:從父元素繼承該屬性。
6.align-self 屬性
[auto]:默認(rèn)值，元素繼承了它的父容器的align-items屬性，如果沒(méi)有父容器則為“stretch”
[stretch]:元素被拉伸以適應(yīng)容器
[cnter]:元素位于容器的中心
[flex-start]:元素位于容器的開(kāi)頭
[flex-end]:元素位于容器的結(jié)尾
[baseline]:元素位于容器的基線
[initial]:設(shè)置改元素的默認(rèn)值
[inherit]:從父元素繼承屬性

四、flex布局的使用場(chǎng)景

1.骰子布局
2.網(wǎng)格布局
1.網(wǎng)格布局：最簡(jiǎn)單的網(wǎng)格布局，就是平均分布。在容器里面平均分配空間，骰子布局很像，但是需要設(shè)置項(xiàng)目的自動(dòng)縮放 2.百分比布局：某個(gè)網(wǎng)格的寬度為固定的百分比，其余網(wǎng)格平均分配剩余的空間
3.圣杯布局
圣杯布局指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下，分成三個(gè)部分：頭部，軀干，尾部。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄
在這里插入圖片描述
4.流式布局
5.底部固定
有時(shí)，頁(yè)面內(nèi)容太少，無(wú)法占滿一屏的高度，底欄就會(huì)抬高到頁(yè)面的中間。這時(shí)可以采用Flex布局，讓底欄總是出現(xiàn)在頁(yè)面的底部
6.懸掛式布局

總結(jié)

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

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