Flexbox将flex-direction从row改为column时背景图片消失问题求助

问题原因 #

当flex容器的flex-direction为row类属性时，flex子项的高度默认会拉伸匹配容器高度，容器高度由内容较多的.content区块撑开，所以空的.image元素也会自动获得高度，背景图可以正常显示。
当你把flex-direction改为column后，flex子项的高度默认由自身内容决定：.image是空元素，你只设置了宽度100%，没有指定高度规则，所以它的高度会变成0，背景图自然无法显示。

修复方案 #

你可以给.image添加高度相关规则，同时补充背景图的适配属性，可选方案如下：

• 方案1：使用aspect-ratio固定图片比例（推荐，适配响应式场景），同时添加background-size: cover让背景图填满容器
• 方案2：直接设置固定高度，比如height: 300px
• 方案3：如果需要兼容旧版浏览器，可以用padding-top百分比法模拟比例

修正后的完整代码 #

CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(104, 92, 76);
}

.container {
  display: flex;
  /* 修改为column也能正常显示 */
  flex-direction: column;
  background-color: black;
  max-width: 700px;
  margin: 20vh auto;
}

.content {
  width: 100%;
}

.text {
  color: white;
}

.image {
  background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
  /* 补充背景适配属性 */
  background-size: cover;
  background-position: center;
  width: 100%;
  /* 新增高度规则，这里用aspect-ratio匹配原图比例，也可以自行调整 */
  aspect-ratio: 16/7;
}

HTML代码 #

<div class="container">
  <div class="image"></div>

  <div class="content">
    <div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
      autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
      mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
      elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
      nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
  </div>
</div>

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