第五次作业

最新推荐文章于 2024-11-13 17:45:44 发布

m0_73967576

最新推荐文章于 2024-11-13 17:45:44 发布

阅读量387

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/m0_73967576/article/details/134760624

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<a href="#">小米澎湃OS</a>

<a href="#">小爱开放平台</a>

<a href="#">下载APP</a>

<a href="#">Select Location</a>

</div>

</div>

<ul>

<li><a href="#">Xiaomi手机</a></li>

<li><a href="#">Redmi手机</a></li>

</ul>

</div>

</div>

<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72d2f359aa032bc5f6372b3022b39a92.jpg?thumb=1&w=1269&h=476&f=webp&q=90"

alt="" width="1226px">

<ul>

<li><a href="#">智能路由器<span>></span></a></li>

</ul>

</div>

</body>

</html>

弹性盒子（父项变为弹性盒子）
display: flex;	变成弹性盒子
flex-direction: row-reverse;	主轴反转
flex-direction: column;	主轴改为竖主轴
flex-direction: column-reverse;	竖轴的反转
justify-content: center;	让弹性盒子居中
justify-content: space-between;	俩边贴边中间平分剩余空间
justify-content: flex-end;	让弹性盒子靠最右侧
justify-content: space-around;	子项平分剩余空间
align-items: center;	交叉轴对齐（子类选择器）垂直居中
flex布局·（弹性盒子）	强行将子项挤压在一行（一行八个）
flex-wrap: nowrap;	flex布局自动换行（自己把大小调一调）
align-content: center;	交叉轴在中间对齐
align-content: space-between;	交叉轴靠最上最下俩边（对齐）
align-content: flex-start;	交叉轴在最上方
.four{	子项排列顺序
order: -2;	order值越小排列越靠前
}	order值默认值为0
分剩余空间可以不设置宽度按比例分
flex-grow: 1;	平分所有
flex-shrink: 0;	子部分不会被压缩默认值为1
align-self: flex-end;	子项单独动（最下边）
布局
flex-wrap: nowrap;
flex-wrap: wrap;	自动换行
justify-content: space-between;	水平对齐