html - Flexboxes : stacked, 居中、环绕、颜色匹配的边和动态、同步的宽度(见示例)

Question

基本上，我想要类似于以下代码段的内容。请注意将元素添加到一个 flex 行如何增加两者的宽度。

function initItems() {
    const numArr = Array.from(Array(3).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 StackedCenteredFlexItems() {
    return (
 <table>
  <tr>
    <td className="side first">.</td>
    <td className="center first"><FlexItems/></td>
    <td className="side first">.</td>
  </tr>
  <tr>
    <td className="side second">.</td>
    <td className="center second"><FlexItems/></td>
    <td className="side second">.</td>
  </tr>
</table>
  )
}

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

.flex-row {
  display: flex;
  /* flex-wrap: wrap; */
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td.center {
  width: 1px;
  white-space: nowrap;
}

td.side {
  padding: 0;
  font-size: 1px;
  color: transparent;
}

.first {
   background: lightblue;
}

.second {
  background: lightgreen;
}

.item {
  margin: 5px;
}

<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 行位于应用此表的中心单元格中:

td.center {
  width: 1px;
  white-space: nowrap;
}

在该示例中，flex-wrap 设置为 nowrap，但是，因为启用 wrap 后，flex 行中的所有元素将相互堆叠。但我需要根据窗口大小包装元素，如下所示:

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

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


ReactDOM.render(
  <div>
    <FlexItems className="first" />
    <FlexItems className="second" />
  </div>,
  document.getElementById("react")
);

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

.first {
   background: lightblue;
}

.second {
  background: lightgreen;
}

.item {
  margin: 5px;
}

<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 行时，两者的宽度都会增加
• 在每个 flex 行的左侧和右侧，背景与 flex 行的颜色相匹配

第二个例子还有另外一件事:

• Flex wrap 响应窗口的边缘

我怎样才能得到所有这些？

Answer 1

您只需要删除 width来自 td 和 justify-content: center到 flex-row类；

最终解决方案:https://jsfiddle.net/s1gu8L4t/