当前位置：首页 > news >正文

css--踩坑

news 2025/6/27 20:35:09

1. 子元素的宽高不生效问题

设置flex布局后，子元素的宽高不生效问题。如果希望子元素的宽高生效，解决方法，给子元素添加如下属性： flex-shrink: 0;

    flex-shrink: 0;

2. 横向滚动（子元素宽度不固定）

在这里插入图片描述

/* tab栏 */
.swiper-tab {
/* 1.最外面的元素设置固定宽度；以及滚动 */width: 100%;overflow-x: auto;height: 116rpx;text-align: center;display: flex;align-items: center;justify-content: space-between;background: #fff;padding: 0px 20rpx;box-sizing: border-box; 
}.menuTab {
/* 2.第二层的元素设置一个超过100%的宽度； */width: 140%; 
/* 设置flex布局后，子元素的宽高不生效问题。 如果希望子元素的宽高生效，解决方法，给子元素添加如下属性： flex-shrink: 0; */flex-shrink: 0;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-around; height: 100%;
}
/* 3.子元素不设置宽度，就是自适应的宽度； */
.selected-menu {  padding: 0 32rpx; height: 100%;font-size: 32rpx;font-family: PingFang SC;font-weight: bold; color: #151521;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative; 
}.unselect-menu { padding: 0 32rpx; height: 100%;font-size: 32rpx;font-family: PingFang SC; color: rgba(21, 21, 33, .5);display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative; 
}