如何安全修改三列Flex布局：删除左侧侧边栏并适配移动端

第一步：删除左侧侧边栏HTML元素 #

直接删掉代码中标记“This must be deleted”的<aside class="sidebar">整个模块（包括内部所有内容）。

第二步：调整CSS的Flex布局规则 #

修改后的核心CSS代码如下：

.container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行，适配小屏幕 */
}

.content {
  flex: 1 1 auto; /* 自动填充剩余宽度，允许收缩适配移动端 */
  padding: 1rem;
  /* 保留原有的背景色、字体等样式 */
}

.ads {
  flex: 0 0 100px; /* 固定100px宽度，不放大不收缩 */
  padding: 1rem;
  /* 保留原有的背景色等样式 */
}

/* 移动端适配媒体查询 */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 垂直排列，内容在上、广告栏在下 */
  }
  .ads {
    width: 100%; /* 移动端让广告栏占满宽度，若要保持100px可替换为：
    width: 100px;
    margin: 1rem auto;
    */
  }
}

关键规则说明 #

• flex: 1 1 auto：给.content设置这个属性，它会自动占据容器内除.ads外的所有空间，同时在屏幕变窄时自动收缩，适配移动端。
• flex: 0 0 100px：给.ads设置这个属性，能确保它始终维持100px宽度，不会因容器空间变化被拉长或压缩，比直接用width更适配Flex布局。
• flex-wrap: wrap+媒体查询：flex-wrap让子元素空间不足时自动换行，媒体查询中修改flex-direction为column，让移动端下内容与广告栏垂直排列，符合移动端浏览习惯。

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