css--踩坑

news2024/11/17 9:29:07

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; 
}