基础知识
<!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>
