宽度相等的柔性包装

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>