如何使用Flexbox访问并调整孙级元素的属性与布局位置

问题原因 #

你无法调整内部红色小方块的位置，核心问题是.flexbox-item使用了display: inline-block，没有开启flex布局，无法使用flex的对齐属性控制内部子元素的位置。

解决方法 #

步骤1：修改.flexbox-item的基础样式，将它设为flex容器

/* 子元素修改后 */
.flexbox-item {
    display: flex; /* 替换原有inline-block属性，开启flex布局控制内部元素 */
    width: 200px;
    margin: 50px;
    border: 3px solid black;
    background-color: cadetblue;
}

步骤2：给不同编号的容器设置对齐属性，实现不同位置效果

flex布局中，justify-content控制主轴（默认水平方向）的对齐方式，align-items控制交叉轴（默认垂直方向）的对齐方式，按需设置即可实现示例图的所有位置效果，参考配置如下：

/* 左上角 */
.flexbox-item-1 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 右上角 */
.flexbox-item-2 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
    align-items: flex-start;
}

/* 完全居中 */
.flexbox-item-3 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: center;
}

/* 左下角 */
.flexbox-item-4 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-start;
    align-items: flex-end;
}

/* 右下角 */
.flexbox-item-5 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
    align-items: flex-end;
}

/* 水平居中靠上 */
.flexbox-item-6 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: flex-start;
}

/* 水平居中靠下 */
.flexbox-item-7 {
    min-height: 200px;
    min-width: 200px;
    justify-content: center;
    align-items: flex-end;
}

/* 垂直居中靠右 */
.flexbox-item-8 {
    min-height: 200px;
    min-width: 200px;
    justify-content: flex-end;
    align-items: center;
}

补充说明 #

如果需要调整主轴方向，可给.flexbox-item添加flex-direction属性：默认值为row（水平为主轴），改为column后主轴变为垂直方向，justify-content和align-items的控制方向也会对应交换。

内容的提问来源于stack exchange，提问作者jujuju199