Question

我一直试图获得一个布局，其中我有一个6列，右边有一列6，有两个垂直框。我可以实现这个没有问题，但我很难达到高度两个封闭的div使用flexbox垂直拉伸。

我正在使用此示例http://www.bootply.com/7UhIWMK808并进行调整。这是我一直在使用的。有什么想法吗？

（我在第二列上尝试了各种flex-grow＆amp; flex-col - 但似乎没有解决它的问题）

<div class="container"><h3></h3></div>
<div class="container">
  <div class="row row-flex row-flex-wrap">
  <div class="col-md-6">
  <div class="flex-col">
       <div class="flex-grow" style="background: grey;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
        Sed ut perspiciatis unde omn eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
        Sed ut perspiciatis unde omn

       </div>
   </div>
</div>

<div class="col-md-6">
    <div class="row">
      <div class="col-md-12"> 
        <div class="">
           <div class="" style="background: grey;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem ape

           </div>
        </div>
      </div>

       <div class="col-md-12"> 
        <div class="">
           <div class="" style="background: grey;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem ap

           </div>
        </div>
      </div>
  </div>





</div>

</div><!--/row-->
</div><!--/container-->
<hr>

Answer 1

这里解决了问题

<style>
  .flex-container {
display: flex;
align-items: stretch;
  }

  .flex-column {
    display: flex;
align-items: stretch;
flex-direction: column;

flex: 1;
  }

   .child {
flex: 1;
  }
 </style>

<div class="flex-container">
  <div class="flex-column">
<div class="child">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
  </div>
  <div class="flex-column">
<div class="child">
  lorem
</div>
<div class="child">
  lorem
</div>
   </div>
</div>

具有flexbox高度的bootstrap

1 个答案: