寬度相等的柔性包裝

Question

我在CSS中使用flex-wrap。我想要一個接受這些條件的佈局：

• 使用flex-wrap。
• 使用所有框/子元素的相同寬度。
• 使用最大的子元素的寬度。沒有固定的寬度。
• 不需要填充容器的寬度。
• 在jsfiddle中，它可能是每行1或2個項目。

是否有可能與一些聰明的CSS Flex解​​決方案還是我需要使用JavaScript？

https://jsfiddle.net/swysdq22/

.wrap { 
 
    width: 300px; 
 
    background: #fff; 
 
} 
 
.narrow { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.narrow > * { 
 
    background: #ccc; 
 
    border: 2px solid #fff; 
 
    padding: 10px; 
 
    color: #fff; 
 
}

<div class="wrap"> 
 
    <div class="narrow"> 
 
    <div class="item1"> 
 
     Longest sentence. 
 
    </div> 
 
    <div class="item2"> 
 
     Short text. 
 
    </div> 
 
    <div class="item3"> 
 
     Another text. 
 
    </div> 
 
    <div class="item1"> 
 
     Longest sentence. 
 
    </div> 
 
    <div class="item2"> 
 
     Short text. 
 
    </div> 
 
    <div class="item3"> 
 
     Another text. 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您可以使用map()和get()返回寬度的數組，然後用Math.max您可以在數組中找到最大值，並把它作爲寬度上的每個item

var w = $('.narrow > div').map(function() { 
 
    return $(this).width(); 
 
}).get(); 
 

 
var max = Math.max.apply(null, w); 
 
$('.narrow > div').width(max);

.wrap { 
 
    width: 300px; 
 
    background: #fff; 
 
} 
 
.narrow { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.narrow >* { 
 
    background: #ccc; 
 
    border: 2px solid #fff; 
 
    padding: 10px; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="narrow"> 
 
    <div class="item1"> 
 
     Longest sentence. 
 
    </div> 
 
    <div class="item2"> 
 
     Short text. 
 
    </div> 
 
    <div class="item3"> 
 
     Another text. 
 
    </div> 
 
    <div class="item1"> 
 
     Longest sentence. 
 
    </div> 
 
    <div class="item2"> 
 
     Short text. 
 
    </div> 
 
    <div class="item3"> 
 
     Another text. 
 
    </div> 
 
    </div> 
 
</div>