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

Posted 2023-03-07

【中文标题】使用 flexbox 如何防止特定元素继承 flex 布局？

【英文标题】：Using flexbox how do I prevent a specific element from inheriting flex layout?

【发布时间】：2014-10-26 12:14:18

【问题描述】：

我有一个模块.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

【参考方案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" >

收件人：

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

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