css 怎么从图一变成图二的样子

怎么从图一变成图二的样子

各位帮帮忙，突然不知道怎么弄了
大概代码：

<view v-for="(item,index) in list" :v-key="index">
        <image :src="item.img" />
        <text>{{item.name}}</text>
</view>

固定外面div的高度，内容超过div的高度时，自动向右边补齐,看下面图
直接用float的话就是全部文字都是一条直线，不是自己想要的样子，所以求各位给个解决方法,谢谢
=============================================================================

图一

img

=============================================================================

图二

img

=============================================================================

可以用flex伸缩盒来做
代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.box {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  width: 700px;
  height: 190px;
  border: 3px solid #000;
}
.box > div {
  width: 200px;
  height: 50px;
  border: 1px solid #f00;
  margin: 5px;
}

</style>
</head>
<body>

<div class="box">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
</div>
</body>
</html>

img

建议看一下bootstrap 响应式栅栏布局。