技术力爆炸的主页(雾)

<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>
Sign in to participate in the conversation
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。