如何让两个<div>水平弹性布局且宽度相等？CSS布局问题求助

问题根源 #

你的布局失效核心原因是CSS类名大小写不匹配：React组件中容器的类名是小写的reasons，但CSS里写的是大写开头的.Reasons，导致display: flex样式根本没作用到容器上，子元素默认以块级元素垂直排列。

另外，flex-direction属性只对flex容器生效，你给left-r和right-r设置了这个属性，但没给它们加上display: flex，所以这个属性也不会生效（如果不需要子元素垂直排列可以直接删掉）。

修复后的代码 #

React组件（无需修改） #

const Reasons = ()=>{
    return (
        <div className="reasons" id='reasons'>
            <div className="left-r">
                <img src={image1} alt="" />
                <img src={image2} alt="" />
                <img src={image3} alt="" />
                <img src={image4} alt="" />
            </div>
            <div className="right-r">
                Right Side
            </div>
        </div>
    )
}

修正后的CSS #

/* 修正类名大小写，确保和React组件的className一致 */
.reasons{
    padding: 0 2rem;
    display: flex;
}

.left-r{
    flex: 1 1;
    /* 如果需要left-r内的图片垂直排列，加上下面两行 */
    display: flex;
    flex-direction: column;
}
.right-r{
    flex: 1 1;
    background-color: var(--orange);
    /* 如果需要right-r内的内容垂直排列，同样加上display:flex和flex-direction */
}

效果说明 #

修正后，.reasons作为flex容器，子元素left-r和right-r通过flex:1 1会自动平分容器宽度，实现水平排列。如果需要子容器内的元素垂直布局，给对应子容器加上display:flex和flex-direction:column即可。

内容的提问来源于stack exchange，提问作者Wei Zhang