Question

我试图借助课程来为我正在做的项目制作主页布局，他们使用SCSS来设计自己的Reactjs。但是，即使使用了完全相同的样式，布局在整个过程中也不相同。所以，请帮帮我。预先感谢。

预期：

结果：

这是样式：

    .homepage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 80px;
    }
    
    .directory-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .menu-item {
        min-width: 30%;
        height: 240px;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid black;
        margin: 0 7.5px 15px;
    
        &:first-child {
        margin-right: 7.5px;
        }
    
        &:last-child {
        margin-left: 7.5px;
        }
    
        .content {
        height: 90px;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid black;
    
        .title {
            font-weight: bold;
            margin-bottom: 6px;
            font-size: 22px;
            color: #4a4a4a;
        }
    
        .subtitle {
            font-weight: lighter;
            font-size: 16px;
        }
        }
    }

这是代码：

<div className='homepage'> 
        <div className='directory-menu'> 
            <div className= 'menu-item'> 
                <div className='content'> 
                    <h1 className='title'>HATS</h1>
                    <span className='subtitle'>SHOP NOW</span>
                </div>
            </div>
        </div>
        .
        .
        .
        .
</div>

Answer 1

您所拥有的作品。这是一种动态布局，因此您的观看宽度会对其产生影响；调整浏览器大小，您将看到： https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss

使用SCSS在Reactjs中进行样式

1 个答案: