Flex-Box 或 Grid：如何跨多行对齐列？答案

【问题标题】：Flex-Box Or Grid: How to align columns across multiple rows?Flex-Box 或 Grid：如何跨多行对齐列？
【发布时间】：2019-12-25 16:53:25
【问题描述】：

我用 react 创建了一个例子：

Code Sandbox

如您所见：

由于每列的动态宽度，列未对齐。如果我希望所有列在所有行中保持对齐，即使它们由于窗口大小而需要缩小在一起，我需要做什么？

编辑

css-grid 也有同样的问题：

Code Sandbox 2

【问题讨论】：

基本上你不能。你需要使用 css-grid
@Mulgard 检查我的回答。如果它对你有用。使用flex-box。
当窗口大小缩小时，css-grid 也会出现同样的问题：codesandbox.io/s/react-typescript-playground-0398k
去掉grid-column-gap，因为fr 中的grid-template-columns也考虑了空格。
如果没有间隙，当您将其缩小太多时，列会重叠。

标签： html css reactjs flexbox

【解决方案1】：

我修改你的INDEX.TSX

class OrderRow extends React.Component<OrderRowProps> {
    public render() {
        const { index, order } = this.props;

        return (
            <div className="OrderRow">
                <div className="OrderRowIndex">{index}</div>
                <div className="columnGroup">
                    <OrderColumn values={order.number} />
                    <OrderColumn values={order.size} />
                    <OrderColumn values={order.amount} />
                    <OrderColumn values={order.price} />
                    <OrderColumn values={order.page} />
                </div>
            </div>
        );
    }
}

我也更改了许多 CSS。

*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 15px;
}
.Chunk {
    flex-basis: 30px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
}

.OrderColumn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    min-width: 300px;
    max-width: 500px;
}

.columnGroup{
    flex-basis: calc(100% - 30px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.OrderColumn:first-child{
    justify-content: flex-start;
}

.OrderRow {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.OrderRow > div {
    /* flex: 1 1 0px; */
    padding-left: 5px;
    padding-right: 5px;
}

.OrderRowIndex {
    flex-basis: 30px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 30px;
    height: 30px;
    /* margin-left: 5px;
    margin-right: 5px; */
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 30px;
}

.Order {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
}

这是您的CodeSanBox。现在是这个样子。

【讨论】：

感谢您所做的工作。但溢出对我来说是没有选择的。
@Mulgard 你能解释一下你想要的桌面和移动浏览器吗？如果手机屏幕大小375px 你想如何放置 4 个column 如果一个column 项目width 多于375px。
我需要所有列总是在一行中。所以没有包装。他们应该使用所有可用的空间并一起缩小空间。它们应该在列之间具有最小边距，并且只有在没有剩余空间的情况下才应该水平溢出。最重要的是所有列都应该在所有行中对齐。

【解决方案2】：

以下是我可以接受的解决方案：

Code Pen

我使用gridTemplateColumns 是最小像素大小的minmax 和fr 表示法的网格。我仍然对最小像素宽度感到恼火，因为它不是动态的。如果最小宽度始终适合其内容，我会更喜欢。因此，如果一列中有 2 个单元格，则最少应为 60，如果有 3 个，则应为 90，依此类推。所以每个单元格 30 像素。

【讨论】：