如何实现居中堆叠、宽度同步、侧边配色且支持换行的Flex布局？

解决方案 #

你可以通过CSS Grid的列宽自动同步特性实现所有需求，核心思路是把两行结构放在同一个Grid容器中，将每行拆分为「左背景填充区 + 内容区 + 右背景填充区」三列，Grid会自动让所有行的同序列列宽保持一致，自然实现两行宽度同步，同时没有white-space: nowrap的限制，Flex子项可以正常换行。

完整可运行代码如下：

JS代码

function initItems() {
  const numArr = Array.from(Array(20).keys());
  const items = numArr.map(() => "item");
  return items;
}

function FlexItems() {
  const [items, setItems] = React.useState(initItems);
  const addItem = () => setItems([...items, "item"]);
  
  return (
    <div className="flex-row">
      <button onClick={addItem}>Add Item</button>
      {items.map((item, idx)=><div className="item" key={idx}>{item}</div>)}
    </div>
  );
}

function StackedFlexContainer() {
  return (
    <div className="grid-container">
      {/* 第一行 */}
      <div className="side first"></div>
      <div className="content first"><FlexItems/></div>
      <div className="side first"></div>
      {/* 第二行 */}
      <div className="side second"></div>
      <div className="content second"><FlexItems/></div>
      <div className="side second"></div>
    </div>
  )
}

ReactDOM.render(
  <StackedFlexContainer />,
  document.getElementById("react")
);

CSS代码

.grid-container {
  display: grid;
  /* 三列布局：左右填充区自适应占满剩余空间，中间内容区宽度由内容决定，最大不超过100%视口宽度 */
  grid-template-columns: 1fr minmax(auto, fit-content(100%)) 1fr;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.first {
  background: lightblue;
}

.second {
  background: lightgreen;
}

.item {
  margin: 5px;
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

该方案完全覆盖所有需求：

• Flex行整体在窗口中居中
• 向任意一行新增子项时，两行宽度同步增加
• 每行左右两侧背景色与行本身背景色匹配，铺满剩余视口空间
• Flex子项可随窗口宽度变化自动换行

内容的提问来源于stack exchange，提问作者Byron Broughten