css 相同的高度列 - Flexbox

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 相同的高度列 - Flexbox相关的知识，希望对你有一定的参考价值。

<div class="container">
  <div class="row equal">
    <div class="col-xs-12 col-sm-4" style="background-color: red">
      some content is here
    </div>
    <div class="col-xs-12 col-sm-4" style="background-color: yellow">
      <img src="//placehold.it/200x100" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4" style="background-color: blue">
      some more content
    </div>
  </div>
</div>

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

以上是关于css 相同的高度列 - Flexbox的主要内容，如果未能解决你的问题，请参考以下文章

使用 flexbox 具有相同高度元素的多线网格