flexbox布局下文本无法环绕图片、右侧aside未按预期隐藏问题求助

问题1：flex布局下无法实现文本环绕图片 #

原因 #

你给article、.article_home元素设置了display: flex，flex容器的直接子元素会被识别为flex项，flex布局会忽略子元素的float属性，导致你给.home_img设置的float: left不生效，无法实现文本环绕效果。

修复代码 #

修改对应CSS规则：

/* 移除article的display:flex属性 */
article {
    flex: 3;
    background-color: transparent;
}

/* 移除.article_home的display:flex和float:none属性 */
.article_home {
    padding: 0 10px;
}

/* 调整.home_img样式，覆盖全局img的居中margin，保留浮动 */
.home_img {
    height: 400px;
    margin: 0 15px 10px 0;
    padding: 5px;
    float: left;
}

问题2：视口宽度缩小时aside下沉不隐藏 #

原因 #

你给外层section设置了flex-wrap: wrap，当视口宽度不足以放下article和aside两个元素时，flex子项会自动换行，导致aside下沉到文本下方；同时你仅在视口宽度<=800px时才隐藏aside，800px到刚好放不下两个元素的宽度区间就会出现下沉问题。

修复代码 #

调整对应CSS规则：

/* 给section设置flex-wrap: nowrap，禁止默认换行 */
section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 99%;
    margin: 0 auto;
}

/* 新增媒体查询，在宽度不足以放下aside时提前隐藏，可根据实际布局调整断点数值 */
@media screen and (max-width: 1100px) {
    aside {
        display: none;
    }
    /* 小屏下恢复换行，适配CTA等模块的布局 */
    section {
        flex-wrap: wrap;
    }
}

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