如何使用CSS柔性盒架构设计文本组件？

Question

我是新的CSS和前端开发的总体.

昨天，我了解到，使用CSS框，我们可以创建流体布局，这些布局非常适合不同大小的屏幕。

我目前正在与React一起使用https://roylee0704.github.io/react-flexbox-grid/。到目前为止，我能够创建3列布局框。但是，我发现列中的文本没有正确对齐。

因此，我添加了一些填充，以使它在浏览器上看起来很好：

​

​

但在较小的屏幕上，这看上去不太对：

​

​

我这部分的代码看起来就像

const MenuItemStyle = {
    paddingTop: '3%'
};

const MenuPriceStyle = {
    paddingTop: '6%'
};

const SpicyMenuItem = (props) => (
    // add price on right side
    <Grid fluid>
        <Row center="lg">
            <Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col>
            <Col xs={6} sm={6} lg={4}>
                <div style={MenuItemStyle}>{props.name}</div>
            </Col>
            <Col xs={3} sm={3} lg={2}>
                <div style={MenuPriceStyle}>{props.price}</div>
            </Col>
        </Row>
    </Grid>
);

问题

• 柔性箱只用于布局吗？
• 柔性盒能帮助对齐布局/列内的文本、图像、图标吗？
• 是否建议使用media-queries并编写单独的规则对齐不同屏幕大小的文本、图像、图标？

除了使用media-queries之外，我还是否还需要编写flexbox，这让我感到困惑。

Answer 1

问题-柔性盒是否只用于布局？不确定您在这里的意思，但它可以用来创建响应的网格布局，如果您愿意。然而，CSS-Grid将是另一种，可能更直接的方法。

• 柔性盒能帮助对齐布局/列内的文本、图像、图标吗？

绝对一点儿没错。有许多指南，通过您在调整柔箱内容的可怕的灵活性。我甚至不会试着在这里讨论这一切，因为这里有太多的内容，而且已经讨论了很多。

请查看以下链接：

https://css-tricks.com/almanac/properties/a/align-content/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

• 是否建议使用媒体查询和编写单独的规则对齐不同屏幕大小的文本、图像、图标？对于除了使用flexbox之外，我是否还需要编写媒体查询，我感到很困惑。

您将不再需要媒体查询--只有当您希望将移动上的行为更改为默认的flexbox行为时，它们才是必要的。从没有媒体查询开始，然后看看你是否喜欢手机上的外观，你应该需要的只是一些小的调整。