什麼是彈性佈局？
彈性佈局（Flex佈局）是一種現代的CSS佈局方式，通過使用display: flex屬性來創建一個彈性容器，並在其中使用靈活的盒子模型來進行元素的排列和定位。
彈性佈局的特點？
彈性佈局具有以下特點：
- 主軸與交叉軸：彈性容器具有主軸（main axis）和交叉軸（cross axis）。默認情況下，主軸是水平方向，交叉軸是垂直方向。
- 彈性容器：通過將父元素的display屬性設置為flex或inline-flex來創建彈性容器。 子元素的彈性項目：彈性容器中的每個子元素都成為彈性項目。子元素可以指定各自在主軸和交叉軸上的大小、順序以及對齊方式等。
- 主軸對齊：彈性項目可以在主軸上按照一定比例分配空間，也可以使用justify-content屬性定義主軸的對齊方式。
- 交叉軸對齊：彈性項目可以在交叉軸上進行對齊，包括頂部對齊、底部對齊、居中對齊等，使用align-items屬性定義交叉軸對齊方式。
- 換行與自動調整：可控制彈性項目是否換行，並且具備自動調整元素大小的能力。
彈性佈局簡化了網頁佈局的開發過程，提供了更靈活、響應式的佈局方式。它適用於各種屏幕尺寸和設備類型，並能夠快速適應不同的佈局需求。
容器的屬性
justify-content
justify-content屬性定義了項目在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items
align-items屬性定義項目在交叉軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將佔滿整個容器的高度。
flex-direction
決定主軸的方向，水平或者垂直
.box {
flex-direction: row | row-reverse | column | column-reverse;
}- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap
換行不換行以及換行的方向
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}- nowrap（默認）：不換行
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
flex-flow
以上兩種的簡寫方式
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}align-content
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線佔滿整個交叉軸。
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
.item {
order: <integer>;
}
flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩餘空間，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}如果所有項目的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值為auto，即項目的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}它可以設為跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
附件
附0：t0.html
附1：t1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 0;
margin: 0;
display: flex;
/* 元素沿着主軸居中*/
justify-content: center;
/* 元素沿着交叉軸居中*/
align-items: center;
height: 100vh;
font-size: 2rem;
}
.parent{
/* 彈性佈局:默認橫向佈局
子元素成為項目元素,項目元素它的一些各種狀態就受flex佈局的相關屬性設置的影響
*/
display:flex;
/* 讓子元素之間產生一定的間隙 */
gap: 30px;
/* flex-direction: column; */
/* 內邊距padding */
padding: 60px;
/* 背景顏色 */
background-color: rgb(236, 216, 255);
/* 寬度 */
width: 800px;
/* 高度 */
height: 340px;
}
.box1{
/* 背景顏色 */
background-color: blueviolet;
/* 高度/寬度與主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔1份 */
flex-grow: 1;
}
.box2{
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔2份 */
flex-grow: 2;
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 改變默認的排列方向 （水平-垂直）*/
flex-direction: column;
/* 讓子元素之間產生一定的間隙 */
gap: 20px;
/* 元素沿着主軸分佈，前後兩個元素抵達父元素的邊界，剩餘的空間夾在元素的中間，並平均分*/
justify-content: space-between;
}
.box2-box1{
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 讓子元素之間產生一定的間隙 */
gap: 20px;
}
.box2-box1-box{
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔2份 */
flex-grow: 2;
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 改變默認的排列方向 （水平-垂直）*/
flex-direction: column;
/* 讓子元素之間產生一定的間隙 */
gap: 20px;
}
.box2-box1-box-box{
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 讓子元素之間產生一定的間隙 */
gap: 20px;
}
.box2-box1-box-box-item{
/* 背景顏色 */
background-color: blueviolet;
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成5份，佔3份 */
flex-grow: 3;
/* 高度 */
height: 60px;
}
.box2-box1-box-box-item2{
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成5份，佔2份 */
flex-grow: 2;
}
.box2-box1-box-item{
/* 背景顏色 */
background-color: blueviolet;
/* 高度 */
height: 80px;
}
.box2-box1-item{
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔1份 */
flex-grow: 1;
/* 高度 */
height: 260px;
/* 背景顏色 */
background-color: blueviolet;
}
.box2-box2{
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 讓子元素之間產生一定的間隙 */
gap: 60px;
}
.box2-box2-item{
/* 背景顏色 */
background-color: blueviolet;
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成2份，佔1份 */
flex-grow: 1;
/* 高度 */
height: 30px;
}
.box2-box2-box{
/* 彈性佈局:默認橫向佈局 */
display: flex;
/* 讓子元素之間產生一定的間隙 */
gap: 20px;
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成2份，佔1份 */
flex-grow: 1;
}
.box2-box2-box-item{
/* 背景顏色 */
background-color: blueviolet;
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔1份 */
flex-grow: 1;
}
.box2-box2-box-item2{
/* 高度/寬度向主軸的方向伸長（用於設置寬度），寬度：剩餘空間總共分成3份，佔2份 */
flex-grow: 2;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1 box"></div>
<div class="box2 box">
<div class="box2-box1">
<div class="box2-box1-box">
<div class="box2-box1-box-box">
<div class="box2-box1-box-box-item"></div>
<div class="box2-box1-box-box-item box2-box1-box-box-item2"></div>
</div>
<div class="box2-box1-box-item"></div>
</div>
<div class="box2-box1-item"></div>
</div>
<div class="box2-box2">
<div class="box2-box2-item"></div>
<div class="box2-box2-box">
<div class="box2-box2-box-item"></div>
<div class="box2-box2-box-item box2-box2-box-item2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
