基礎知識
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 0;
height: 600px;
border: 1px solid gray;
/* 1. 使用彈性佈局 需要在 父盒子中 開啓 彈性佈局
彈性佈局 開啓以後 元素默認分爲 兩個軸排布
主軸 默認是x方向
副軸 默認是y方向
*/
display: flex;
/* 調整元素 在主軸上的 排布方式
flex-end 到主軸的末尾
flex-start 默認值
center 居中
space-between 左右靠邊,中間間隙 相等排布
space-around 左右 間隙相等
*/
justify-content: space-between;
/* 設置副軸的 對其方式
如果 只有一行 設置 元素 在副軸上的對其方式
flex-start
flex-end
center
stretch：拉伸，是默認值，在不設置高的時候出現效果，如果設置了高就沒有用了
*/
align-items: stretch;
}
li{
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid gray;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 900;
}
/* 設置 第二個li標籤 居中 */
li:nth-child(2){
/* 單獨設置元素 在副軸上的對其方式 會覆蓋父元素的 align-items */
/* 如果父級盒子使用的是在側軸上拉伸的效果的話，用完這個屬性會取消拉伸的效果 */
align-self: center;
}
/* 設置第三個li標籤 頂部 */
li:nth-child(3){
/* 單獨設置元素 在副軸上的對其方式 會覆蓋父元素的 align-items */
align-self: flex-end;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
//將主軸變成縱向的，order換順序，（是不是要換行flex-wrap: nowrap;）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 0;
height: 400px;
border: 1px solid gray;
/* 1. 使用彈性佈局 需要在 父盒子中 開啓 彈性佈局
彈性佈局 開啓以後 元素默認分爲 兩個軸排布
主軸 默認是x方向
副軸 默認是 y方向
*/
display: flex;
/* 調整主軸方向 變爲 垂直
主軸 變爲是y方向
副軸 變爲是x方向
*/
flex-wrap: nowrap;
flex-direction: column;
/* 設置主軸的排布 哪怕方向改變 */
justify-content: space-between;
/* 設置副軸的排布 方向改變之後 依舊是設置副軸 */
align-items: center;
}
li{
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid gray;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 900;
}
/* order:改變盒子的排列順序 默認是order:1 */
li:nth-child(1){
align-self: flex-start;
order: 3;
}
li:nth-child(2){
align-self: flex-end;
order: 1;
}
li:nth-child(3){
align-self: center;
order: 2;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
//開啓換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 0;
height: 300px;
border: 1px solid gray;
/* 1. 使用彈性佈局 需要在 父盒子中 開啓 彈性佈局
彈性佈局 開啓以後 元素默認分爲 兩個軸排布
主軸 默認是x方向
副軸 默認是 y方向
默認 只能在一行 待着 無法換行
*/
display: flex;
/* 開啓彈性佈局的換行 */
flex-wrap: wrap;
/* 變爲多行了 無法使用 align-items 進行位置設置
align-content 在多行的時候 設置屬性 跟 justify-content 一模一樣
如果只有 一行時 無法生效
*/
align-content: space-around;
}
li{
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid gray;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 900;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>