Flexboxes：堆叠、居中、环绕，具有颜色匹配的边和动态、同步的宽度（参见示例）

Posted 2023-02-22

【中文标题】Flexboxes：堆叠、居中、环绕，具有颜色匹配的边和动态、同步的宽度（参见示例）

【英文标题】：Flexboxes: stacked, centered, wrapping, with color-matching sides and dynamic, synchronized width (see example)

【发布时间】：2021-11-08 03:02:47

【问题描述】：

基本上，我想要一些类似于以下 sn-p 的东西。请注意向一个 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>

这个解决方案很接近，有效的成分是弹性行在应用了这个的表格的中心单元格中：

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 wrap 响应窗口边缘

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

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

同样将 flexbox 应用于表格并不理想。默认情况下，它们具有不同的样式，可能会发生冲突。

@Paulie_D 我很高兴采用不涉及表格的解决方案。

@Paulie_D 刚刚用 stack sn-ps 替换了链接。

【参考方案1】：

您只需将 width 从 td 和 justify-content: center 删除到 flex-row 类；

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

【讨论】：

很接近，但在该示例中，flex 行的宽度不再同步——向其中添加一项不会增加另一项的宽度。

我不明白？ increase the width of the other 到底是什么？

在一个项目中添加一个项目应该会增加两者的宽度。单击此示例中的添加项目按钮之一以了解我的意思：jsfiddle.net/68z5v1aq

感觉有人，只是想对我的回答给出负面反馈，这是人身攻击吗？

对不起，我并不是故意要攻击你。我真的需要这方面的帮助！在您的示例中，单击“添加项目”按钮之一会增加获取新项目的 flex-row 的宽度。但是当添加新项目时，我需要两个 flex 行都增加宽度。要明白我的意思，请确保您的窗口足够宽，可以让所有项目都放在一行中，然后单击“添加项目”。