Как установить все элементы CSS-сетки (или Flex) одинакового размера? - PullRequest
Новая
       22

Как установить все элементы CSS-сетки (или Flex) одинакового размера?

1 голос
/ 11 мая 2019

Я пытаюсь создать новый форматированный текстовый редактор для своего веб-приложения (студенческий бюджет), и все остальное работает отлично, за исключением разметки сетки / гибкости при попытке установить все кнопки одинакового размера.

Здесь - это то, как редактор выглядит в данный момент. Обратите внимание, что последний значок намного больше остальных?

В дополнение к этой проблеме, число кнопок в строке будет неизвестно, так как API, который я создаю, позволяет определить, какие свойства будет иметь этот редактор

После поиска в нескольких местах в Интернете все результаты, которые я нашел, дали мне те же результаты, что и текущий css, который у меня уже есть. Это первый внешний источник, который я попробовал . Попытка 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;
}

1 Ответ

0 голосов
/ 12 мая 2019

Прежде всего, поскольку в настоящее время ни один браузер не поддерживает предлагаемую спецификацию css-подсети , я бы рекомендовал не пытаться иметь равное распределение элементов во вложенных сетках.

Во-вторых, является ли группирование значков по разделам (создание вложенной структуры html), что приводит к "сетке, содержащей несколько сеток", жестким требованием? Если нет, я бы настоятельно рекомендовал более плоскую структуру, потому что таким образом макет может иметь доступ ко всем кнопкам и иметь одинаковый размер.

Наконец, насколько я понимаю, ваши кнопки будут состоять только из одной строки, поэтому использование макета grid не очень подходит, так как оно в основном предназначено для 2d макетов, и в вашем случае хороший ol flex будет сделать то же самое (и будет иметь лучшую поддержку более широкий диапазон браузеров ).

Имея все это в виду, я изменил ваш код, изменения можно найти в этой скрипке

...