一、CSS3彈性盒子

彈性盒子是CSS3的一種新布局模式。
CSS3 彈性盒，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。

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

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

三、彈性子元素屬性

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

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

四、flex布局的使用場景

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

總結

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

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