Question

R，P和S最终以一列彼此堆叠而不是并排放置。

我一直在经历freeCodeCamp和theOdinProject，这个问题对我来说已经出现了好几次，我通常最终只是给每个div分配一个ID，然后使用CSS以“ display：flex。”作为目标。

我认为我最终应该弄清为什么它不起作用，因此，如果有人可以向我解释一下，我将不胜感激！

这是我的HTML：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.keys {
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

<html>

<head>
    <link rel='stylesheet.css' type=text/css href='stylesheet.css'>
</head>

<body>
    <div class='keys'>
        <div data-key='82' class='key'>
            <kbd>R</kbd>
        </div>
        <div data-key='80' class='key'>
            <kbd>P</kbd>
        </div>
        <div data-key='83' class='key'>
            <kbd>S</kbd>
        </div>
    </div>
</body>

</html>

Answer 1

您不需要“flex: 1”。

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

^ 应该这样做。

如果您想将项目隔开，请尝试justify-content: space-evenly

父级显示：flex不适用于子级div？

1 个答案: