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

Question

我的密码是

<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 代码？我这样做是因为我在布局移动优先并且它看起来不错。

Answer 1

如果顺序在不同的断点处会有所不同，我的建议是让这三个组件在一个 flex 容器中成为兄弟姐妹，然后使用 flex-order 或 flex-grow 将它们重新排序或堆叠为你愿意。

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

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

How to set an outside element inside a flex-box

css

layout

user-interface

flexbox

reactjs