如何将 flexbox 与锚定列一起使用

Posted 2023-03-06

【中文标题】如何将 flexbox 与锚定列一起使用

【英文标题】：How to use flexbox with anchored columns

【发布时间】：2016-04-10 09:44:07

【问题描述】：

我使用display:flex 是为了让孩子的列具有相同的高度。

当col-... 是display:flex 父级的直接子级时，一切正常：

<div class="container flex">

    <div class="col-sm-4 flex-col">
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>



    <div class="col-sm-6 flex-col">
      jfkdjkfsdjk
    </div>
</div>

.flex 
  display:flex;


.flex-col 
  border:1px solid black;

但是我希望 flex-col 被锚定。当我尝试将<a> 添加为<div class="col-sm-4 flex-col"> 的父级时，它会像这样分解：

http://www.bootply.com/C8SmhEmvGS

我已经尝试将display:block 设置为<a>，但没有帮助。

【参考方案1】：

将col-sm-4 flex-col 类添加到a 而不是div。

<div class="container flex">
  <a href="#" class="col-sm-4 flex-col">
    <div >
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>
  </a>

  <a href="#" class="col-sm-6 flex-col">
    <div >
      jfkdjkfsdjk
    </div>
  </a>
 </div>

Working bootply