0

Прошу помочь разобраться с логикой поведения flex элементов.

Задача На каждой строке по 2 элемента, всего 2 стоки. Между элементами должен быть margin, в нём, собственно, и проблема.

CSS

.features {
            background-color: #fff;
            padding: 10px;
            transition: box-shadow 1s;
            flex-grow: 0;
            margin-top: .8rem;

            .features__header {
                display: flex;

                .features__icons {
                    flex: 1 0 auto;
                }

                .features__title {
                    flex: 7 0 auto;
                    align-self: center;
                }
            }

            .features__desc {
                margin-top: .5rem;
            }
        }

HTML

<div class="d-flex flex-column flex-md-row flex-wrap">
                <div class="features">
                    <div class="features__header">
                        <div class="features__icons">
                            <i class="fas fa-crosshairs fa-3x"></i>
                        </div>
                        <div class="features__title">
                            <h5>Verified and Secured</h5>
                        </div>
                    </div>
                    <div class="features__desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eaque at minima, vitae accusantium consequatur exercitationem labore quod, iusto iure ipsum, libero quisquam vel doloremque odio! Incidunt similique impedit fugiat?
                    </div>
                </div>
                <div class="features">
                    <div class="features__header">
                        <div class="features__icons">
                            <i class="fas fa-crosshairs fa-3x"></i>
                        </div>
                        <div class="features__title">
                            <h5>Verified and Secured</h5>
                        </div>
                    </div>
                    <div class="features__desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eaque at minima, vitae accusantium consequatur exercitationem labore quod, iusto iure ipsum, libero quisquam vel doloremque odio! Incidunt similique impedit fugiat?
                    </div>
                </div>
                <div class="features">
                    <div class="features__header">
                        <div class="features__icons">
                            <i class="fas fa-crosshairs fa-3x"></i>
                        </div>
                        <div class="features__title">
                            <h5>Verified and Secured</h5>
                        </div>
                    </div>
                    <div class="features__desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eaque at minima, vitae accusantium consequatur exercitationem labore quod, iusto iure ipsum, libero quisquam vel doloremque odio! Incidunt similique impedit fugiat?
                    </div>
                </div>
                <div class="features">
                    <div class="features__header">
                        <div class="features__icons">
                            <i class="fas fa-crosshairs fa-3x"></i>
                        </div>
                        <div class="features__title">
                            <h5>Verified and Secured</h5>
                        </div>
                    </div>
                    <div class="features__desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eaque at minima, vitae accusantium consequatur exercitationem labore quod, iusto iure ipsum, libero quisquam vel doloremque odio! Incidunt similique impedit fugiat?
                    </div>
                </div>
            </div>

При добавлении к .features свойства margin, блоки перестраиваются в 1 колонку. Не могу сообразить, как добавить отступ между блоками с классом .features сохранив их расположение?

Скрин без margin Скрин с margin: .8rem;

1
  • Если я правильно понял, то вы хотите использовать flexbox для двумерного расположения элементов. Как мне кажется, для таких целей лучше использовать css grid, flexbox хорошо при одномерном расположении(только ряды или только колонки)
    – Andrew
    17 июн 2019 в 10:20

2 ответа 2

0

1) Можно например у дочерних добавлять отступы, допустим padding-left: 15px; padding-right: 15px;, а у родительского блока тогда margin-left: -15px; margin-right: -15px;, но нужно будет обертку у элементов сделать.(метод аля из bootstrap пришел в голову сразу). 2) использовать ширину рассчитанную с помощью calc(50% - отступ px) 3) Или использовать grid как вам предложили ранее.

p.s. добил немного ответ

0

Попробуйте добавить в общих стилях следующие строки

*,
*:before,
*:after {
    box-sizing: border-box;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.