Flexbox的格列 - 高度相等的子元素

我使用Flexbox的电网建设列布局，我想每一列的所有子元素将在所有高度相等。Flexbox的格列 - 高度相等的子元素

当前HTML：

<div class="row middle-xs center-xs"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <h2>Lorem ipsum dolor sit amet</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
    <div class="box"></div> 
    <h3>Lorem ipsum</h3> 
    <ul> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
    </ul> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures"> 
    <div class="box"></div> 
    <h3>Lorem ipsum</h3> 
    <ul> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
    </ul> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
    <div class="box"></div> 
    <h3>Lorem ipsum</h3> 
    <ul> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
    </ul> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
    <div class="box"></div> 
    <h3>Lorem ipsum</h3> 
    <ul> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor</li> 
    </ul> 
    </div> 
</div>

我也做了jsFiddle这个

正如你可以在小提琴看到，我想将所有蓝色框相同的高度，甚至UL列表是相同的高度，所有人都有相同的起点。

我已经使用Flex增长，但没有成功尝试。任何想法如何使这项工作？

来源

2017-10-04 Jony Murinko

我无法加载您的jsFiddle！ – Andyjm

@Andyjm - 这似乎人的jsfiddle是给503服务错误 –

没有机制用于平衡Flexbox的高度不共享父元素。这完全是一种二维布局方法。 –

首先，你需要将你的标题与其他列隔开。

我必须添加一个DIV .row-eq-height与柔性盒为。

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
} 
 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display:   flex; 
 
} 
 
.row-eq-height [class*="col-"] { 
 
    border: 1px solid #ddd; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet"/> 
 

 
<div class="row middle-xs center-xs"> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
    <h2>Lorem ipsum dolor sit amet</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    
 
    <div class=" row-eq-height"> 
 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <div class="box"></div> 
 
    <h3>Lorem ipsum</h3> 
 
    <ul> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures"> 
 
    <div class="box"></div> 
 
    <h3>Lorem ipsum</h3> 
 
    <ul> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <div class="box"></div> 
 
    <h3>Lorem ipsum</h3> 
 
    <ul> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <div class="box"></div> 
 
    <h3>Lorem ipsum</h3> 
 
    <ul> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
     <li>Lorem ipsum dolor</li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</div>

工作小提琴Demo

来源

2017-10-04 13:22:49

这打破了对移动下方的列下的响应性 –

这里解决https://jsfiddle.net/wgt6y13u/6/

只用一个容器包装“盒子”的方格行，并添加盒包装类每箱元件。这些新类只是使用基本的弹性盒对齐

.boxes { 
    display: flex; 
} 
.box-wrap { 
    align-self: flex-start 
}

来源

2017-10-04 13:24:28 Andyjm

这打破了flexboxgrid tho的列布局响应能力 –

Flexbox的格列 - 高度相等的子元素

回答

相关问题