基本上,我想要类似于以下代码段的内容。请注意将元素添加到一个 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 响应窗口的边缘
我怎样才能得到所有这些?
最佳答案
您只需要删除 width
来自 td 和 justify-content: center
到 flex-row
类;
关于html - Flexboxes : stacked, 居中、环绕、颜色匹配的边和动态、同步的宽度(见示例),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69152188/