Измените css с количеством элементов в коллекции Meteor.

Поэтому я создаю приложение, которое позволит пользователю хранить уравнения и иметь его на домашней странице, где пользователь сможет иметь кнопку с названием «уравнение». Поэтому моя проблема заключается в том, что я хотел бы отображать эти кнопки по-разному в зависимости от того, сколько их есть. Я хочу иметь одну строку на главной странице и иметь кнопки в стиле так

Если только одна кнопка:

………………………………|кнопка.|……………………………..

Если две кнопки:

…………………|кнопка.|………………..|кнопка.|………………..

Если три кнопки:

………….|кнопка.|…………|кнопка.|…………|кнопка.|………

Я посмотрел в интернете, и я не уверен, с чего начать, чтобы добавить эту функциональность. Итак, мой вопрос в том, где я могу начать добавлять эту функциональность? Спасибо!.

1 ответ

  1. Если я вас правильно понял, у вас в HTML-коде есть что-то подобное:

        <div class="row">
            <button>Equation</button>
            <button>Equation</button>
        </div>
    

    Затем в ваш CSS-код вы можете добавить это, и он будет центрировать все элементы в вашей строке, изменять ширину кнопки, как вам нужно:

    .row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    button {
        width: 200px;
    }
    

    Объяснение: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties