Как применить гибкое поведение подряд через sass?

Question

Например, у меня есть этот HTML:

    <div class="header__container">
      <div class="header__info-row">
        <section class="social__col">
        </section>
        <section class="contact__col">
        </section>
      </div>
    </div>

С помощью sass я задаю строки и столбцы следующим образом:

    .header__container {
      @include make-container();
    }

    .header__info-row {
      @include make-row();
    }

    .header__navigation-row {
      @include make-row();
    }

    .social__col {
      @include make-col-ready();

      @include media-breakpoint-up(xs) {
        @include make-col(6);
      }
    }

    .contact__col {
      @include make-col-ready();

      @include media-breakpoint-up(xs) {
        @include make-col(6);
      }
    }

Есть ли способ указать внутри sass flex-поведение, напримерd-flex, justify-content, align-content и т.д?

Answer 1

Насколько вы можете видеть в документации Bootstrap, помимо sass mixins, они также предоставляют классы для управления поведением css элементов сетки. Например

<div class="row justify-content-center">
<div class="row justify-content-end">
<div class="col align-self-start">

Так что я уверен, что если вы возитесь с этими классами, вы получите желаемое поведение.

Если вы хотите нестандартное решение, напишите свой собственный sass mixin и включите его после mixin Bootstrap, чтобы переопределить значения по умолчанию, которые они предоставляют.