Как выравнять 5 div по центру на flexbox?

Одиночка Айс, А как с inline-block выровнять по бокам? нельзя же))

Как выравнять 5 div по центру на flexbox?

Егор Живагин, Помогло но, это как костыль кажется. ) неужели флекс бокс не рассчитан на такие моменты)

Как выравнять 5 div по центру на flexbox?

пробовал, так фикс ширина не работает даже и padding когда пишешь между ними они сужаются

Бэм и Препроцессоры?

это иконки для метода оплаты товара )

Бэм и Препроцессоры?

Сергей, Понял Вас)
В общем такой вариант читабельнее и логичнее верно)?
А что конкретно тут выполняет $this?

.checkout {
    $this: &;

    &__payment { 

    }
    
    //==
    //== Payment by bank
    //== ========================
    
    &__payment_bank {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
    
    //==
    //== Payment by paypal
    //== ========================
    
    &__payment_paypal {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
}

Бэм и Препроцессоры?

Сергей, Насчет вложенности согласен.
Мне нравится Ваш 3 вариант но какие минусы у этого варианта?

//
// Component: checkout
// --------------------------------------------------

.checkout {
    text-align: center;
    max-width: 800px;

    &__payment {
        text-align: center;
        flex: 0 0 45%;
        max-width: 45%;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: .6rem 0;
        line-height: 1;
        margin-top: 1rem;
        @include transition();

        @include media-breakpoint-up(sm) {
            max-width: none;
            flex: 0 0 120px;
        }


        // bank
        &_bank {
            border-color: #4487c6;

            &:hover {
                background: #4487c6;
            }

            .checkout__payment-img {
                background: url('../img/general/bank_creditCard.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            &:hover .checkout__payment-img {
                background: url('../img/general/bank_creditCard_white.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            span {
                color: #4487c6;
            }
        }

        // paypal
        &_paypal {
            border-color: #09348f;

            &:hover {
                background: #09348f;
            }

            .checkout__payment-img {
                background: url('../img/general/bank_paypal.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            &:hover .checkout__payment-img {
                background: url('../img/general/bank_paypal_white.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            span {
                color: #09348f;
            }
        }

    }
}

Как вы верстаете на bootstrap 4?

Ярослав Иванов, Да, мне важно не как мне удобней а как принято сейчас. Я стараюсь как можно больше верстать 'правильно', под 'правильно' я имею ввиду сегодняшний стандарт, чтобы было удобно для разработчиков/верстальщиков кто откроет проект после меня.

Вопрос о флексбоксах?

Сергей, а если скрываемый элемент и есть потомок? То есть какое значение дисплей у потомка ?

Вопрос о флексбоксах?

С Mobile First это просто пример был) таких случаев много бывает) Просто я так и не понял флекс элемент нужно выводить как display: block или flex

Не понятный баг с инпутами?

Ankhena, Огромное спасибо!

Как реализовать это в less?

Благодарю)

Бэм - newsTitle или news-title?

Алекс Глебов, да, но в БЭМ можно и так и так) по этому спрашиваю кому как удобнее и почему

Вопрос о препроцессоре less + БЭМ?

Спасибо за развернутый ответ!) Да я знаю как less работает) по этому и хочу его использовать в проектах.
Насчет лендингов вы правы, лучше без лесса там обходиться и лишней запарки.
Адаптировать страницы без бутстрапа сложно будет потому что сетка очень удобна и практична)
А насчет того что в бутстрапе куча лишних стилей я их просто делаю так)

// Reset and dependencies
//@import "normalize.less";
@import "print.less";
//@import "glyphicons.less";

Вопрос о препроцессоре less + БЭМ?

Сергей, Спасибо =)

Как передавать проект на back end?

Алексей, вот-вот ) По этому и ищу решение )

Как передавать проект на back end?

Сергей Горячев, вернее не "удобно" а читабельно!)

Как передавать проект на back end?

iBird Rose, не могу перестать так называть так как я перфекционист

Как передавать проект на back end?

Сергей Горячев, Хорошая идея =) Но а как быть с .navbar - navbarate? или navbor))))

Влияют ли на СЕО семантические теги HTML 5?

Нет) они придуманы для более глубоких нужд. Это СЕО-шники под себя их подмели

Как передавать проект на back end?

iBird Rose, Мешает именно Бэм) Называться такие элементы как .btn, .pagination, .breadcrumbsочень удобно