css Вариантрасположениястолбцоввродителеприпомощиflex-wrap

Posted 2021-05-13

/* http://shpargalkablog.ru/2016/06/flex-margin.html */

<style>
.raz {
  overflow: hidden;  /* без него при direction: rtl; появляется горизонтальная полоса прокрутки, которую также можно убрать, если margin-left заменить на margin-inline-start */
}
.raz > div {
  display: flex;
  flex-flow: wrap;
  margin: -1em 0 0 -1em;
}
.raz > div > div {
  flex: 1 1 7em;
  margin: 1em 0 0 1em;
  border: 1em solid green;
  padding: 1em;
  background: rgb(255, 255, 0);
}
</style>

<div class="raz">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

/* Вариант в twig */
/*-> Клиентские роли <-*/
.favorites-offer-options-wrapper {
    overflow: hidden;
    margin-bottom: 10px;
}

.favorites-offer-options-table-wrap {
    display: flex;
    flex-flow: wrap;
    margin: -1em 0 0 -1em;
}

.favorites-offer-options-unit {
    max-width: 260px;
    min-width: 260px;
    flex: 1 1 7em;
    margin: 1em 0 0 1em;
    padding: 1em;
    border: 1px solid #d8e1ea;
    background-color: #fff;
}

.favorites-offer-options-unit > div {
    text-align: left;
    overflow: auto;
}
/*-> <-*/
{% if type is defined and type == 'html' %}
    <div class="favorites-offer-options-wrapper">
        <div class="favorites-offer-options-table-wrap">
            {% for option in air_offer_options %}
                {% if option.value is not empty %}
                    <div class="favorites-offer-options-unit">
                        <div class="favorites-offer-options-title">{{ option.title }}</div>
                        <div>{{ option.value }}</div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endif %}