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

Question

我想创建这样的布局:

我想使用 React 和 Flex .

为此，我使用了 Tachyons媒体查询是:

• ns = 不小 -> @media screen and (min-width: 30em) = [0, 30em]
• m = medium -> @media screen and (min-width: 30em) and (max-width: 60em) = [ 30em, 60em]
• l = large -> @media screen and (min-width: 60em) = [60em, ∞]

布局必须是响应式的。基本上，布局由两列(在桌面上)或两行(在手机/平板电脑上)组成。 第一次只有一个列/行(灰色的)，当用户点击它时，会出现第二个列/行。

This is我的尝试。

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

那么，如何改变布局的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>

Answer 1

您可以在两个内部 div 上使用 flex-grow-1，而不是使用 w-100 和 w-50-l。与您对宽度所做的类似，您可以使用 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>

---

现在是 react 部分 - 您可以在 红色部分 的 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>