似乎无法使显示：flex工作，因此3个div的高度相同

Question

我需要确保我的 3 页脚小部件的高度相同，即使站点用户决定在其中一个小部件中放置更多内容，以便它们调整高度。我理解使用显示：flex是最好的解决方案。我似乎无法让它工作。

我的网页：

<div class="footer-widgets"><div class="wrap"><div class="footer-widgets-1 widget-area"><section id="testimonial_footer-3" class="widget widget_testimonial_footer"><div class="widget-wrap"><div id="testimonial_widget"><h4 class="widget-title widgettitle">Testimonial</h4><p class="myclass">Loved being a student at derby skill build. They really helped me grow as a</p><div id='tinyname'> </p> - Louise findlay, former student </div>  </div></section>
</div><div class="footer-widgets-2 widget-area"><section id="blog_widget-2" class="widget widget_blog_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Blog</h4>
<ul class="realty_widget">
       <div class="titleblogcolor"> <a href="http://localhost/wordpress/?blog_posts=this-is-a-blog-by-a-student" title="this is a blog by a student">
this is a blog by a student</a></a> </div>
   Find out more about this in our blog. We have lots going on here at Derby Skill Build</ul></div></section>
</div><div class="footer-widgets-3 widget-area"><section id="black-studio-tinymce-2" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Associated with:</h4>
<div class="textwidget"><p><a href="http://localhost/wordpress/wp-content/uploads/2015/03/council.png"><img class="alignnone size-full wp-image-244" src="http://localhost/wordpress/wp-content/uploads/2015/03/council.png" alt="council" width="80" height="43" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/edexcel.png"><img class="alignnone size-medium wp-image-245" src="http://localhost/wordpress/wp-content/uploads/2015/03/edexcel.png" alt="edexcel" width="80" height="15" /></a>  <a href="http://localhost/wordpress/wp-content/uploads/2015/03/ofsted.png"><img class="alignnone size-medium wp-image-247" src="http://localhost/wordpress/wp-content/uploads/2015/03/ofsted.png" alt="ofsted" width="80" height="69" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/woodhead.png"><img class="alignnone size-medium wp-image-248" src="http://localhost/wordpress/wp-content/uploads/2015/03/woodhead.png" alt="woodhead" width="80" height="29" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/ascentis.png"><img class="alignnone size-medium wp-image-249" src="http://localhost/wordpress/wp-content/uploads/2015/03/ascentis.png" alt="ascentis" width="80" height="49" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/beauty2.png"><img class="alignnone size-medium wp-image-250" src="http://localhost/wordpress/wp-content/uploads/2015/03/beauty2.png" alt="beauty" width="80" height="35" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/connexions.png"><img class="alignnone size-medium wp-image-251" src="http://localhost/wordpress/wp-content/uploads/2015/03/connexions.png" alt="connexions" width="100" height="23" /></a></p>
</div></div></section>
</div></div></div>

我以我的风格尝试了以下方法.css：

.footer-widgets { display: flex; }
.footer-widgets .wrap (display: flex; } 

似乎都不起作用。 我需要为我理解的这 3 个小部件的父div 输入"显示：flex"。有什么想法吗？

我正在使用创世框架。

Answer 1

要自动调整的项目（弹性项目）需要包含在父弹性框中。

因此，您需要执行类似操作并将其应用于代码：

.flexbox {
  display: flex;
}
.flex-item {
  flex: 1; /* you need to use the "flex" property on the items you want in the flexbox, not the "display" property */
}

很难看到你想要根据你的代码调整什么。所有小部件都需要与 .flexbox 容器具有相同的子级到父级关系。因此，如果您为每个小部件提供一类 .footer-widget，那么您可以使用 .flexbox> .footer-widget 来定位每个 flex-item。

希望对您有所帮助！