Stacked Centered Flex Items

Keep the flex items centered and make them wrap in response to window width.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

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

td.center {
  white-space: nowrap;
}

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

.first {
   background: lightblue;
}

.second {
  background: lightgreen;
}

.item {
  margin: 5px;
}

Babel + JSX

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('container')
);