如何在弹性盒内设置外部元素答案

【问题标题】：How to set an outside element inside a flex-box如何在弹性盒内设置外部元素
【发布时间】：2021-05-15 19:24:38
【问题描述】：

我的代码是

<div className="app-container">
  <div className="border-content">
    <OptionsPanel />
    <TrendingList />
  </div>
  <div className="tweets-list-container">
    <TweetList results={tweets} />
  </div>
</div>

和flexbox当前显示在屏幕上的样子：

OPTIONS-PANEL | TRENDING-LIST | TWEETS-LIST

但我想要的是

OPTIONS-PANEL | TWEETS-LIST | TRENDING-LIST (like the twitter page)

我可以用 CSS 解决这个问题吗？或者我应该重构我的 JSX 代码？我这样做是因为我在布局移动优先并且看起来不错。

【问题讨论】：

标签： css reactjs user-interface layout flexbox

【解决方案1】：

如果在不同断点处的顺序不同，我的建议是让这三个组件在 flex 容器中成为同级组件，然后使用 flex-order 或 flex-grow 以便根据需要重新排序或堆叠它们.

https://developer.mozilla.org/en-US/docs/Web/CSS/order

【讨论】：

我会这样做的。谢谢！
@goplay 当然！感觉真的很幼稚，但老实说，这个教程是学习使用 flexbox 可以做的所有神奇事情的最佳教程：flexboxfroggy.com。