使用 flexbox 如何防止特定元素继承 flex 布局？答案

【问题标题】：Using flexbox how do I prevent a specific element from inheriting flex layout?使用 flexbox 如何防止特定元素继承 flex 布局？
【发布时间】：2023-03-24 09:17:01
【问题描述】：

我有一个模块.m-standout，它使用display:flex，由标题、子文本和图像组成。基本上我想使用 flex 来定位标题和子文本，然后让图像在下面占据 100% 的宽度，但目前图像占据了第三列。谁能建议我如何防止图像使用 flex，我正在尝试flex:0 和flex:none 之类的东西，但没有任何乐趣。

CSS

.m-standout {
    display: flex;

    .standout-heading {
        font-size: 34px;
        width: 31.28834%;
        align-self: center;

    }

     .standout-desc {
        width: 52.76074%;
        align-self: center;
    }

    .standout-image {

    }
}

Codepen： http://codepen.io/styler/pen/gLaCw

【问题讨论】：

标签： css sass flexbox

【解决方案1】：

我建议将 header 和 desc 包装在一个新的 flex 容器中（我将其命名为 flexbox）并从 m-standout 中删除 flex 属性，这是对您的笔的修改 -

.m-standout {
    .flexbox {
     display: flex;
      .standout-heading {
        flex: 1;
          font-size: 34px;
          width: 31.28834%;
          align-self: center;

      }

       .standout-desc {
         flex: 1;
          width: 52.76074%;
        align-self: center;
      }
    }

    .standout-image {
      width: 100%; /* Remove this if you want the image to take it's natural width */
    }
}

Codepen： http://codepen.io/anon/pen/cHmIC

【讨论】：

【解决方案2】：

尝试将flex-wrap: wrap; 添加到.m-standout。

SCSS：

.m-standout {
    display: flex;
    flex-wrap: wrap;
    .standout-heading {
        font-size: 34px;
        width: 31.28834%;
        align-self: center;
    }
    .standout-desc {
        width: 52.76074%;
        align-self: center;
    }
    .standout-image {
    }
}

Codepen：http://codepen.io/anon/pen/sDGxy

编辑刚刚注意到您希望图像跨越容器的整个宽度来执行此操作，需要进行更多更改：

SCSS：

更改：

.standout-image {
}

收件人：

.standout-image, .standout-image img {
    width: 100%;
}

HTML：

更改：

<img src="http://dummyimage.com/600x400/000/fff" alt="">

收件人：

<div class="standout-image"><img src="http://dummyimage.com/600x400/000/fff" alt=""></div>

Codepen：http://codepen.io/anon/pen/kgxdA

【讨论】：