Vue中的flex類似于CSS的flexbox，是一種用于設計彈性布局的技術。Vue的flex說白了就是一種可以根據容器的大小自適應調整元素布局位置的功能。這種布局方式非常適合于響應式的web應用程序和移動應用程序，因為它可以根據不同設備屏幕的尺寸來調整布局。

<div class="flex-container">
<div class="flex-item" v-for="item in items" :key="item.id">
{{ item.title }}
</div>
</div>

在上面的示例中，我們創建了一個具有flex布局的容器div，然后使用v-for指令循環渲染每個子元素div。注意，我們將每一個子元素都指定為flex-item類，這是因為我們想要讓它們使用flex布局進行排列。

接下來，我們需要在父級容器中指定flex-direction屬性來指示布局方向。默認情況下，它是從左往右排列的，但是根據需要我們可以更改它：

.flex-container {
display: flex;
flex-direction: row; /* 水平排列 */
flex-wrap: wrap; /* 換行 */
justify-content: space-between; /* 水平居中對齊 */
align-items: baseline; /* 垂直基線對齊 */
}

以上是Flex Container 的屬性設置，下面我們看Flex Item，

.flex-item {
flex: 1; /* 寬度自適應 */
min-width: calc(33.33% - 16px); /* 最小寬度 */
margin-right: 16px; /* 設置右邊距 */
}

我們使用了flex的一個重要屬性：flex-grow，它指定了每個項目的大小以及如何在可用空間內分配它們的大小。本例中，我們將所有子元素的flex-grow值設置為1，這意味著它們將平均分配可用空間。