flex布局：
设置flex布局display：flex；写在父盒子：容器。
主轴和交叉轴
设置主轴方向flex-direction：row（从左往右）/row-reverse（从右往左）/column（从上往下）/column-reverse（从下往上）
换行flex-wrap：nowrap（不换行）/wrap（换行）/wrap-reverse（反向换行）
主轴的方向对齐方式justify-content：flex-start（开始位置）/flex-end（结束位置）/center（居中）
space-between（两端对齐）/space-around（环绕对齐、拉手对齐）
交叉轴上的操作
交叉轴上的方向align-items：center（居中）/flex-start（开始)/flex-end（结束）
换行后有多条轴线，对项目进行平排列：
align-content：flex-start（开始位置）/flex-end（结束位置）/center（居中）
space-between（两端对齐）/space-around（环绕对齐、拉手对齐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐网站</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 100px;
border: 1px solid red;
margin: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.box div{
width: 150px;
height: 50px;
background-color: darkred;
color: #FFFFFF;
font-size: 24px;
text-align: center;
line-height: 50px;
border: 2px #FFFFFF solid;
/* flex-grow: 定义项目的放大比例,默认值是0(存在剩余空间也不放大); */
flex-grow: 1; /* 设置为1后所有项目等比例放大 */
}
.box .box5{
/* order: 定义项目的排列顺序。值越小越靠近前，取整数，默认值0; */
order: -2;
flex-grow: 2;
}
.box .box3{
order: -1;
/* flex-shrink: 定义项目的缩小比例,默认值为1,即容器宽度不足,该项目将缩小; */
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">音乐</div>
<div class="box2">云村</div>
<div class="box3">视频</div>
<div class="box4">发现</div>
<div class="box5">首页</div>
</div>
</body>
</html>
4437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
