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

我有一个模块.m-standout，它使用display:flex并包含标题，子文本和图像。基本上我想用flex来定位标题和子文本，但是让图像占用100％以下的宽度，但此时图像占据第3列。任何人都可以告诉我如何防止图像使用flex，我正在尝试类似flex:0和flex:none没有喜悦。使用flexbox如何防止特定元素继承flex布局？

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

来源

2014-09-02 styler

尝试将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

来源

2014-09-02 09:24:47

我建议包装在一个新的Flex容器的标题和说明（我把它命名为Flexbox的）和间消除弯曲特性脱颖而出，这是您的笔的修改 -

.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

来源

2014-09-02 09:23:51 Vishu

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

回答

相关问题