<template>
  <div id="container" class="vh-100 d-flex flex-column">
    
    <h1>web-vue-playground index</h1>

    <b-list-group class="link-group px-2">
      <!-- prettier-ignore -->
      <b-list-group-item v-for="link in links"
        :key="link.href"
        :href="link.href"
        class="link-group-item float-left mx-2"
      >
        {{ link.text }}
      </b-list-group-item>
    </b-list-group>

  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        // { text: "", href: "" },
        { text: "speak", href: "/speak" },
        { text: "speak", href: "/speak" },
        { text: "speak", href: "/speak" },
        { text: "speak", href: "/speak" },
        { text: "speak", href: "/speak" },
        { text: "speak", href: "/speak" },
      ],
    };
  },
};
</script>

<style>
h1 {
  margin: 30px 0;

  text-align: center;
  line-height: 1;
}

.link-group {
  /* flex 容器 */
  display: flex;
  flex-wrap: wrap; /* 折行(鉴于改了方向，应该说折列) */
  align-content: flex-start; /* 向交叉轴起始段对其 */

  overflow-x: scroll; /* 水平滚动条常驻 */

  /* flex 元素 */
  flex-basis: 100%;
}

.link-group-item {
  width: 300px;
  border: none; /* 清掉原来带的边框 */
  background-color: #efefef;
}
</style>