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

Question

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

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

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

在网络上的多个位置进行搜索后，我找到的所有结果都给我提供了与我现有的当前 css 相同的结果。 This is the first external source I've tried .尝试 the flexbox会产生类似的结果

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

css 标记将修改的 javascript 的 HTML 输出

<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 布局并不是很合适，因为它主要针对 2d 布局，在您的情况下是一个很好的ol flex 也一样(并且会更好地支持 wider range of browsers )。

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