为什么我的 flex 在我的 CSS 中不起作用？我尝试使用网格，但它仍然无法正常工作

Question

const PictureBox = () => {
    **this is an array of pictures**
    const allPictures = [
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 }
    ];
   
    **setting the state**
    const [x, setX] = useState(0)

    **functions that slide left and right based on the state**
    const goLeft = () => {
        x === 200 * (allPictures.length - 1) ? setX(0) : setX(x + 200)
        x === 200 * (allPictures.length - 1) ? setX(0) : setX(x + 200)
    }
    const goRight = () => {
        x === 0 ? setX(200 * (allPictures.length - 1)) : setX(x - 200)
        x === 0 ? setX(200 * (allPictures.length - 1)) : setX(x - 200)
    }

    return (
        <div className="slider"  >
            <div>
                 {allPictures.map((img, index) => {
                return (
                   
                    <div className="slide" style={{ transform:`translateX(${x}%)`}} key={index}>
                        <img src={img.before}  alt="hello" height='100%' width='50%' />
                        <img src={img.after}  alt="hello" height='100%' width='50%' />
                    </div>
                )
            })}
            </div>
           
            <button id='goleft' onClick={goLeft}>left</button>
            <button id='goright' onClick={goRight} >right</button>
        </div>
    )
}


export default PictureBox;

样式：

.slider {
    height: 450px;
    min-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    border-radius: 12px; 
    /* overflow: hidden; */
}

.slide {
    min-width: 100%;
    height: 100%; 
    transition: 0.5s;
    box-sizing: border-box; 
    border: 1px double skyblue;
    background: rgb(2, 67, 95);
}

Answer 1

.slider{
     height: 450px;
    min-width: 100%;
     box-sizing: border-box;
    margin: 0;
    padding:0;
    position: relative;
    display:flex;
    flex: 1;
    border-radius: 12px;
    /* overflow: hidden; */
}


.slide{
    display: inline-flex;
    flex: 1;
    min-width: 100%;
    height: 100%;
    transition: 0.5s;
    box-sizing: border-box;
    border: 1px double skyblue;
    background: rgb(2, 67, 95);
}

Answer 2

这里有一些值得探索的东西

1. flex:1 css 应该在孩子而不是父母身上，所以写在 .slide 上
2. 图像因添加问题而臭名昭著，您可以检查图像是否存在不尊重 flex 的问题img{max-width:100%;max-height:100%}