1.布局原理
flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以 指定為 flex 布局。
當我們為父盒子設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 =flex布局
2.flex布局父項常見屬性
flex-direction：
主軸和側軸：
默認主軸是x軸方向，水平向右；
默認側軸是y軸方向，水平向下
<style>div {/* 給父級添加flex屬性 */display: flex;width: 800px;height: 300px;background-color: pink;/* 默認的主軸是 x 軸 行 row 那么y軸就是側軸嘍 *//* 我們的元素是跟著主軸來排列的 *//* flex-direction: row; *//* 簡單了解 翻轉 */flex-direction: row-reverse;/* 我們可以把我們的主軸設置為 y軸 那么 x 軸就成了側軸 */flex-direction: column;}div span {width: 150px;height: 100px;background-color: purple;}</style>justify-content(設置主軸上的子元素的排列方式)
flex-wrap 設置子元素是否換行
默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex布局中默認是不換行的
屬性值：no-wrap（換行）、wrap（默認值換行）
align-items
設置側軸上的子元素排列方式（單行 ）
div {display: flex;width: 800px;height: 400px;background-color: pink;/* 默認的主軸是 x 軸 row */flex-direction: column;justify-content: center;/* 我們需要一個側軸居中 *//* 拉伸，但是子盒子不要給高度 /* align-items: stretch; */align-items: center;/* align-content: center; */
}align-content
適應于換行（多行）的情況下，可設置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
單行找align-item多行找align-conten
flex:屬性定義子項目分配剩余空間，用flex來表示占多少份數
align-self:控制子項在自己在側軸上的排列方式
order:定義項目的排列順序
<style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;/* justify-content: center; *//* align-items: center; */}section div {background-color: purple;margin-right: 5px;width: 100px;height: 50px;}section div:nth-child(2) {/* 默認是0 -1比0小所以在前面 */order: -1;background-color: greenyellow;}section div:nth-child(3) {align-self: flex-end;}</style>?背景漸變必須添加瀏覽器私有前綴?
/* background: -webkit-linear-gradient(left, red, blue); */
/* background: -webkit-linear-gradient(red, blue); */
background: -webkit-linear-gradient(top left, rgb(22, 173, 67), rgb(71, 10, 212));
