时间戳

首页 > 解决方案 > 使用 Flexbox 和 Tachyons 的响应式布局

reactjs - 使用 Flexbox 和 Tachyons 的响应式布局

问题描述

我想创建一个这样的布局：

在此处输入图像描述

我想使用 React 和Flex。

为此，我正在使用Tachyons，它的媒体查询是：

布局必须是响应式的。基本上，布局由两列（在桌面上）或两行（在移动/平板电脑上）组成。第一次有单列/行（灰色的），当用户单击它时，会出现第二列/行。

这就是我尝试的。

如您所见，在桌面上效果很好，我有两列。在手机/平板电脑上它不起作用：

在此处输入图像描述

那么，如何改变布局onClick事件呢？

function App() {
  return (
    <div
      className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column"
     >
      <div className="flex justify-center items-center bg-purple w-100 w-50-l h-100-l order-1"/>
      <div className="bg-orange flex flex-column justify-center w-100 w-50-l h-100-l order-2 pb4"/>
      </div> 
  )
}

const app = <App />;
const root = document.getElementById("react-root");
ReactDOM.render(app, root);
body, html {
    height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react-root" className="h-100" style="height:100%"></div>

标签： reactjscssflexboxtachyons-css

解决方案

而不是使用w-100andw-50-l您可以flex-grow-1在两个内部 div 上使用。与您对宽度所做的类似，您可以使用order在移动设备和桌面设备中设置顺序 - 请参见简化演示：

body,html { height: 100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100" style="height:100%">
  <div class="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
    <div class="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1"></div>
    <div class="bg-orange flex flex-column justify-center h-100-l order-2-l order-1 flex-grow-1 pb4-l"></div>
  </div>
</div>

现在对于反应部分 - 您可以通过单击另一部分在红色部分flex-grow-1之间切换- 请参见下面的演示：flex-grow-0

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {toggle: false};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({toggle: !state.toggle}));
  }
  render() {
    return (
      <div className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
          <div className="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1" onClick={this.handleClick}></div>
          <div className={`bg-orange flex flex-column justify-center h-100-l order-2-l order-1 pb4-l ${this.state.toggle ? 'flex-grow-1' : 'flex-grow-0'}`}></div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById("react-root"));
html,body{height:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100"></div>

推荐阅读