一.flex布局 实现3个div 左上 居中 右下
1.父元素上的属性
① display:flex;
开启弹性和
②flex-direction: row;
主轴排列 主轴为水平方向,起点在左端
③justify-content: space-between
项目在主轴的方向上的对齐方式 两端对齐,中间间隔相等,贴边
2.子元素上的属性
①align-self: center;
定义flex子项单独在侧轴(纵轴)方向上的对齐方式 居中
<body>
<div>
<div class="box">
<div class="son1 son">左边1</div>
<div class="son2 son">中间2</div>
<div class="son3 son">右边3</div>
</div>
</div>
<style>
.box{
width: 400px;
height: 400px;
border: 1px slategray solid;
display: flex; /* 开启弹性盒 */
flex-direction: row; /* 主轴排列 主轴为水平方向,起点在左端 */
justify-content: space-between ; /* 项目在主轴的方向上的对齐方式 两端对齐,中间间隔相等,贴边 */
}
.son{
width: 100px;
height: 100px;
background-color: bisque;
text-align: center;
margin: 1px;
}
.son2{
align-self: center; /* 定义flex子项单独在侧轴(纵轴)方向上的对齐方式 居中 */
}
.son3{
align-self: flex-end; /* 尾部 */
}
</style>
</body>
二.flex布局 文字居中
.box{
width: 300upx;
height: 300upx;
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
}
三. flex布局 盒子居中
.box{
display: flex;
background-color: darkgray;
height: 400px;
width: 400px;
/* 核心代码,就两行 */
justify-content: center;
align-items: center;
}