flex横向布局固定宽度
时间: 2023-08-18 16:11:06 浏览: 61
在flex布局中,如果要实现横向滚动菜单栏并固定子元素的宽度,可以按照以下步骤进行设置:
1. 在父元素上设置flex布局,并使用`align-items: center`来使子元素在垂直方向上居中对齐。
2. 使用`overflow-x: auto`来实现横向滚动效果。
3. 在子元素上使用`flex-shrink: 0`来禁止子元素缩小。
4. 设置子元素的固定宽度和高度,可以使用`width`和`height`属性进行设置。
5. 可以根据需要设置子元素的间距、文本对齐方式、边框等样式。
以下是一个示例的CSS代码:
```css
.title-list {
display: flex;
align-items: center;
overflow-x: auto;
height: 110px;
}
.item {
flex-shrink: 0;
width: 160px;
height: 50px;
margin: 30px 20px;
text-align: center;
border-radius: 25px;
}
.item-title-active {
background: rgba(0, 144, 171, 1);
}
.item-title-disabled {
background: rgba(255, 255, 255, 0.1);
}
```
在HTML中,可以使用`v-for`指令来循环生成子元素,并根据条件动态添加类名来实现选中效果。以下是一个示例的HTML代码:
```html
<div class="title-list">
<div :class="selItem == item ? 'item-title item-title-active' : 'item-title item-title-disabled'" v-for="item in dataList" :key="item" @click="selectItem(item)">
<div class="text">视频名称</div>
</div>
</div>
```
通过以上设置,可以实现一个具有固定宽度的横向滚动菜单栏。