DIV使用CSS flex布局出现空白及右对齐失效问题如何解决？

问题1：flex-left和flex-right之间有空隙的解决方法 #

• 根源原因：你给.flex-right设置了margin-left: 5px，这是两个元素之间空白的直接来源；同时你给两个元素设置的宽度总和超出了父容器范围（.flex-left75% + .flex-right95% = 170%），不合理的宽度设置也会导致布局错位。
• 修改方案：
  1. 删掉.flex-right的margin-left: 5px属性
  2. 放弃手动设置百分比宽度，改用flex弹性规则分配空间：给.flex-left加flex: 1让它自动占满剩余空间，.flex-right新增flex-shrink: 0保证宽度跟随内容自适应、不会被压缩。

问题2：.av2宽度调大后flex-right无法延伸、文本右对齐失效的解决方法 #

• 根源原因：你给.flex-container设置了固定宽度width: 800px，无论父容器.av2调整为多宽，flex容器始终只有800px，自然无法铺满父容器，文本右对齐也只能在800px的容器范围内生效。
• 修改方案：把.flex-container的固定宽度改成width: 100%，同时新增box-sizing: border-box属性，避免padding把容器撑宽超出父元素范围。

修改后的完整CSS参考 #

body {
  font-family: Helvetica, Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%; /* 替换原固定800px，铺满父容器 */
  padding: 20px;
  box-sizing: border-box; /* 新增，避免padding撑宽容器 */
}
.flex-left {
  flex: 1; /* 新增，自动占满剩余空间，替换原75%宽度设置 */
  background-color: red;
  color: white;
  padding: 10px;
}

.flex-right {
  background-color: red;
  padding: 10px;
  color: white;
  flex-shrink: 0; /* 新增，保证内容宽度不被压缩 */
  text-align: right;
  /* 删掉原width:95%、margin-left:5px属性 */
}

.flex-left1 {
  width: 50%;
  flex-shrink: 0; /* 可选，避免图片区域被压缩 */
}

.flex-left1 img {
  width: 330px;
  max-width: 100%; /* 可选，避免图片超出容器范围 */
}

.flex-right1 {
  flex: 1; /* 替换原90%宽度设置，自动占满剩余空间 */
  margin-left: 10px;
}

.av2 {
  margin: 70px;
  margin-right: 130px;
  width: 830px; /* 此处调整为1050px也可正常适配 */
  border: 2px solid;
  height: auto;
}

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