柔性包裹，宽度相等

Question

我在CSS中使用cursor.execute("select first_name from class_room where roll_no = %s", (roll_no,)) 。我想要一个接受这些条件的布局：

• 使用roll_no。
• 使用所有框/子元素的相同宽度。
• 使用最大子元素的宽度。没有固定的宽度。
• 不需要填充容器的宽度。
• 在jsfiddle中，每行可能是1或2个项目。

是否可以使用一些聪明的css flex解决方案或我是否需要使用javascript？

https://jsfiddle.net/swysdq22/

flex-wrap

flex-wrap

Answer 1

您可以使用map()和get()返回宽度数组，然后使用Math.max，您可以在该数组中找到最大值，并将其作为宽度应用于每个item

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;