彈性盒子：flex佈局
- 彈性盒子是一種佈局方式
- 特點：改變元素的排列方式
- 採用flex佈局的元素：稱爲flex容器，簡稱“容器”。它的所有子元素自動成爲容器成員，成爲flex項目（簡稱“項目”）
- 彈性盒子中的項目可以是塊級元素、行內元素、行內塊級元素
- 並且行內元素在彈性盒子中可以設置寬高
- display:inline-flex ：轉成行內彈性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 400px; height: 400px; background: bisque;
margin: 50px auto; overflow: hidden;
/* 轉成彈性盒子 */
display: flex;
}
.zxw{
width: 120px; height: 50px; line-height: 50px;
background: red; text-align: center; color: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="box">
<li class="zxw">zxw1</li>
<li class="zxw">zxw2</li>
<li class="zxw">zxw3</li>
</ul>
</body>
</html>
主軸、交叉軸方向
x軸稱爲主軸；y軸稱爲交叉軸
flex-direction:row | column | row-reverse | column-reverse;：定義彈性元素排列方向及順序
- row：默認值；表示主軸是水平正向
- column：表示主軸是垂直正向
- row-reverse：表示主軸是水平方向
- column-reverse：表示主軸是垂直方向
換行、及換行方式
flex-wrap: nowrap | wrap | wrap-reverse;：定義是否換行，換行方式都是交叉軸方向
- nowrap：默認值；不換行
- wrap：換行；默認交叉軸正向換行
- flex-wrap：換行；交叉軸反向換行
主軸方向對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;：子元素在主軸方向上的對齊方式
- flex-start：默認值；開始方向對齊
- flex-end：結束方法對齊
- center：居中對齊
- space-between：兩端對齊，項目之間的間隔都相等
- space-around：項目會平均地分佈在行裏，兩端保留項目與項目之間間距大小的一半
交叉軸方向對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;：子元素在交叉軸方向上的對齊方式
- flex-start：開始方向對齊
- flex-end：結束方法對齊
- center：居中對齊
- baseline：項目的第一行文字的基線對齊
- stretch：默認值；如果項目沒設置高度或設爲auto，將佔滿整個容器的高度
多行內容在交叉軸上對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around | stretch;：多行子元素在交叉軸方向上的對齊方式
- flex-start：開始方向對齊
- flex-end：結束方法對齊
- center：居中對齊
- space-between：兩端對齊，項目之間的間隔都相等
- space-around：項目會平均地分佈在行裏，兩端保留項目與項目之間間距大小的一半
- stretch：默認值；會拉伸容器內每一個項目佔用空間，填充方式爲給每個項目下方增加空白，佔滿整個交叉軸
設置彈性元素的順序
order：默認值0
- 元素按照order屬性的值增序進行佈局
- 值越小排列越靠前，擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行佈局
彈性元素的擴展比率
flex-grow:0：默認值爲0；設置彈性元素的擴展比率來分配剩餘空間
彈性元素的收縮比率
flex-shrink:1：默認值爲1；設置彈性元素的收縮比率來收縮空間
- 多出來的尺寸
- 總權重：元素1尺寸 * 收縮比率 + 元素2尺寸 * 收縮比率…
- 收縮空間：元素尺寸 * 收縮比率 * 多出來的尺寸 / 總權重
最大和最小寬高度
max-width：定義元素最大寬度
該屬性值會對元素的寬度設置一個最大限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負值
min-width：定義元素最小寬度
該屬性值會對元素的寬度設置一個最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負值
max-height：定義元素最大高度
該屬性值會對元素的高度設置一個最大限制。因此，元素可以比指定值矮，但不能比其高。不允許指定負值
min-height：定義元素最小高度
該屬性值會對元素的高度設置一個最小限制。因此，元素可以比指定值高，但不能比其矮。不允許指定負值