如何将所有 css-grid（或 flex）元素设置为相同大小？

Question

我正在尝试为我的 Web 应用程序（学生预算）创建一个新的富文本编辑器，在尝试将所有按钮设置为相同大小时，除 grid/flex 布局外，其他一切都工作正常。

Here 是编辑器当前的样子。注意到最后一个图标比其他图标大得多吗？

除了这个问题之外，行中的按钮数量将是未知的，因为我正在构建的 API 允许定义此编辑器将具有的属性

从网络上的多个位置进行搜索后，我找到的所有结果都为我提供了与当前 css 我已有的结果相同的结果。 This is the first external source I've tried. Trying the flexbox 将产生相似的结果

如果下面的代码中缺少某些内容或者您想直接尝试清理后的标记，请访问 jsfiddle

HTML 来自 javascript 的输出，css 标记将修改

<ttace data-empty="Type something to create a post" class="TTACEEditor">
  <div class="ttace controls">
    <div>
        <div>
            <button title="Bold"><span class="ttace icon bold"></span></button>
            <button title="Italic"><span class="ttace icon italic"></span></button>
            <button title="Strike through"><span class="ttace icon strike-through"></span></button>
            <button title="Underline"><span class="ttace icon underline"></span></button>
            <button title="Insert horizontal rule"><span class="ttace icon hr"></span></button></div>
        <div>
            <button title="Align left"><span class="ttace icon justify-left"></span></button>
            <button title="Align center"><span class="ttace icon justify-center"></span></button>
            <button title="Align right"><span class="ttace icon justify-right"></span></button>
            <button title="Align full"><span class="ttace icon justify-full"></span></button></div>
        <div>
            <button title="Ordered list"><span class="ttace icon ordered-list"></span></button>
            <button title="Unordered list"><span class="ttace icon unordered-list"></span></button>
            <button title="Outdent"><span class="ttace icon indent-left"></span></button>
            <button title="Indent"><span class="ttace icon indent-right"></span></button></div>
        <div>
            <button title="Clear formatting"><span class="ttace icon clear-formatting"></span></button>
        </div>
    </div>
  </div>
  <div class="ttace textarea" contenteditable="true" data-empty="Type something to create a post"></div>
</ttace>

这是使用 css-grid 作为布局模板的代码

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: inline-grid;
    grid-auto-flow: column;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

这是使用 flex，但输出与上述标记的问题非常相似

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-flex;
    flex-grow: 1;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    color: black;
    margin: 0 auto;
    display: inline-block;
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

Answer 1

首先，由于目前没有浏览器支持提议的 css subgrid specification，我建议不要尝试在嵌套网格中平均分配项目。

其次，将图标分组（创建嵌套 html 结构）是否会导致 "grid containing multiple grids" 成为一项硬性要求？如果没有，我会强烈推荐一个更扁平的结构，因为这样布局可以访问所有按钮并平均调整它们的大小。

最后，据我了解，您的按钮将只有一排，因此使用 grid 布局不太合适，因为它主要针对 2d 布局，在您的情况下是一个很好的 ol flex 也一样（并且会对 wider range of browsers 提供更好的支持）。

考虑到所有这些，我已经修改了您的代码，可以找到更改内容in this fiddle

如何将所有 css-grid（或 flex）元素设置为相同大小？

How to set all css-grid (or flex) elements same size?

css

grid-layout

flexbox

css-grid