Material UI 在小屏幕上停止 Flexbox答案

【问题标题】：Material UI stop Flexbox on small screenMaterial UI 在小屏幕上停止 Flexbox
【发布时间】：2020-11-23 21:41:09
【问题描述】：

是否可以使用 Material UI 在小屏幕上停止 Flexbox？我需要 Bootstrap 中的 d-md-flex 类之类的东西，但使用的是 Material UI。

引导程序（按预期工作）

<div class="d-md-flex align-items-md-center">
    <div>Content #1</div>
    <div>Content #2</div>
</div>

反应：

<Box container display="flex">
    <Box item>Content #1</Box>
    <Box item>Content #2</Box>
</Box>

在大屏幕上，元素应该并排放置，在小屏幕上一个在另一个之上。

非常感谢任何输入！

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

如果我理解正确，您正在尝试做什么...您可以通过媒体查询来实现它，例如：

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';

const someComponent = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Container maxWidth="md">
      <Box container display={isMobile ? 'block' : 'flex'}>
        <Box item>Content #1</Box>
        <Box item>Content #2</Box>
      </Box>
    </Container>
  );
};

【讨论】：

超级！我正是这个意思。感谢您的帮助。

【解决方案2】：

感谢您的回答。不幸的是，使用 Grid 不可能让列完全靠在一起（由于列的大小）。我正在寻找相同的行为，但使用保持子元素靠近的 Box 元素。感谢您的意见。

【讨论】：