弹性盒布局案例
1-6筛⼦布局
div{
width: 100px;
height: 100px;
background: #ccc;
margin: 100px;
border-radius:10px;
box-shadow:1px 1px 3px 1px #000;
}
p{
/
background: yellow;/
}
span{
width: 20px;
height: 20px;
background: #000;
border-radius:10px;
}
/*⼀个点*/
.box1{
display: flex;/*设置为弹性盒*/
justify-content:center;/*设置在主轴上居中*/
align-items:center;/*设置⼦元素在侧轴居中*/
}
/*两个点*/
.box2{
display:flex;/*设置为弹性盒*/
justify-content:space-around;/*设置p标签在主轴两端对齐*/
padding:10px;
box-sizing:border-box;/*怪异盒模型*/
}
.box2 p{
/
*height:20px;
width: 100px;*/
/*background: yellow;*/
display:flex;/*设置为弹性盒*/
}
.box2 p:nth-child(2){
align-items:flex-end;/*span在侧轴上的终点位置*/
}
/*三个点*/
.box3{
display:flex;
flex-direction: column;/*设置主轴为y轴*/
justify-content:space-between;/*在主轴两端对齐*/
}
.box3 p{
display:flex;
}
.box3 p:nth-child(2){
justify-content:center;
justify-content:center;
}
.box3 p:nth-child(3){
justify-content:flex-end;
}
/*四个点⽅式⼀*/
.box4{
display:flex;/*设置为弹性盒*/
flex-direction: column;/*设置主轴为垂直⽅向*/
justify-content: space-between;
}
.box4 p{
display:flex;/*设置为弹性盒*/
justify-content:space-between;
}
/*四个点⽅式⼆*/
.box4-1{
display:flex;/*设置为弹性盒*/
justify-content:space-between;
}
.box4-1 p{
display:flex;/*设置为弹性盒*/
width:20px;
flex-wrap:wrap;/*⼦元素换⾏*/
align-content:space-between;/*多⾏⼦元素的对齐⽅式*/
}
/*五个点*/
.box5{
display:flex;
flex-direction:column;/*设置主轴为y*/
justify-content:space-between;
}
.box5 p{
display:flex;
/*justify-content:space-around;*/
justify-content:space-between;
}
.box5 p:nth-child(2){
justify-content: center;
}
/*六个点*/
.box6{
display:flex;
justify-content:space-between;
}
.box6 p{
display:flex;
flex-direction:column;
justify-content: space-between;
}
/*两个点使⽤项⽬属性*/
.box2-1{
display:flex;
justify-content:space-between;
}
.box2-1 span:nth-child(2){
align-self: flex-end;/*给⾃⼰添加，改变⾃⼰在侧轴上的对齐⽅式*/        }
</style>
</head>
<body>
<!--⼀点-->
<div class="box1">
<span></span>
</div>
<!--两个点-->
<div class="box2">
flex布局对齐方式
<p><span></span></p>
<p><span></span></p>
</div>
<!--三个点-->
<div class="box3">
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>
<!--四个点⽅式⼀-->
<div class="box4">
<p><span></span><span></span></p>        <p><span></span><span></span></p>    </div>
<!--四个点⽅式⼆-->
<div class="box4-1">
<p><span></span><span></span></p>        <p><span></span><span></span></p>    </div>
<!--五个点-->
<div class="box5">
<p><span></span><span></span></p>        <p><span></span></p>
<p><span></span><span></span></p>    </div>
<!--六个点-->
<div class="box6">
<p>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
</p>
</div>
<div class="box2-1">
<span></span>
<span></span>
</div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。