/* 加了flex是弹性容器 */
.box{
display: flex;
height: 300px;
/* justify-content: start; 默认情况 */
/* justify-content: flex-end; 从右边开始 */
/* justify-content: center; 盒子居中 */
/* justify-content: space-between; 空白间距均分在弹性盒子之间 */
/* justify-content: space-between; 弹性盒子与容器之间间距相等,父级剩余的尺寸分配间距分配 */
/* justify-content: space-around; 空白间距均分在弹性盒子两侧 */
/* justify-content: space-evenly; 弹性盒子与容器之间间距相等 */
border: 1px solid black;
/* align-items: center; 居中 */
/* align-items: flex-end; */
/* align-items: flex-start; */
}
/* 让第二个div,侧轴居中对齐 */
.box div:nth-child(2){
align-self: center;
}
/* 子级div是弹性盒子:沿着主轴方向排列,默认是水平的 */
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
1
2
3
猜你喜欢
网友评论
- 搜索
- 最新文章
- 热门文章