Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > IT форум > Помощь студентам
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.01.2022, 19:57   #1
MRD555
 
Регистрация: 05.09.2021
Сообщений: 9
По умолчанию Flex элементы / Картинки

Доброго дня, случилась такая проблема, при добавлении display flex в класс grid-item у меня естественно флексит внутренние элементы в нём,
но так и не понял можно ли исключить сетку внутри grid-item или дело может быть в другом?
Недавно начал учить сетки, не бейте за косяки
Код:
 <div class="content">
     <div class="grid-items">
                 <a href="" class="special-grid-item">
                     <div class="grid-item">
                         <div class="image object-fit-container cover">
                             <img src="./img/pic.jpg" alt="">
                         </div>
                         <div class="label">
                             <div class="client">Text</div>
                             <div class="project">quuntur laboriosam deserunt beatae?</div>
                         </div>
                         <div class="cta-btn">TAKE A LOOK</div>
                     </div>
                 </a>

                 <a href="" class="">
                     <div class="grid-item">
                         <div class="image object-fit-container">
                             <img src="./img/pic.jpg" alt="">
                         </div>
                         <div class="label">
                             <div class="client">Text</div>
                             <div class="project"> expedita excepturi sit consequuntur laboriosam deserunt 
                            beatae?</div>
                         </div>
                     </div>
                    </a>

                    <a href="" class="">
                     <div class="grid-item">
                         <div class="image object-fit-container">
                             <img src="./img/pic.jpg" alt="">
                         </div>
                         <div class="label">
                             <div class="client">Text</div>
                             <div class="project"> expedita excepturi sit consequuntur laboriosam deserunt 
                            beatae?</div>
                         </div>
                     </div>
                    </a>

                    <a href="" class="">
                     <div class="grid-item">
                         <div class="image object-fit-container">
                             <img src="./img/pic.jpg" alt="">
                         </div>
                         <div class="label">
                             <div class="client">Text</div>
                             <div class="project"> expedita excepturi sit consequuntur laboriosam deserunt 
                          beatae?</div>
                         </div>
                     </div>
                    </a>

                    <a href="" class="">
                     <div class="grid-item banner-btn">
                         <div class="bannercontent">
                             See more our work
                         </div>
                     </div>
                    </a>
                 </div>
                </div>
Код:
.wrapper {
    max-width: 1440px;
}

.content {
    margin: 100px auto;
    max-width: 720px;
    padding: 0;

}

.object-fit-container {
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.grid-item .image {
    width: 100%;
    height: 100%;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.special-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    grid-column-end: span 2;
    grid-row-end: span 2;
}
.special-grid-item .grid-item {
    height: 600px;
}

.grid-items {
    display: grid;
    padding: 0;
    grid-gap: 5px;
    margin: 0 auto 18px;
     grid-template-columns: 25% 25% 25% 25%;
}

.grid-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    align-items:flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    overflow: hidden;
    height: 300px;
    background-color: #000;
}
Изображения
Тип файла: jpg Скриншот 11-01-2022 18.30.51.jpg (100.8 Кб, 2 просмотров)
MRD555 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Flex 3 (графика) Сара Помощь студентам 3 23.11.2011 20:13
Flex - tutorial crazy horse Общие вопросы Web 27 28.03.2011 01:06
Программное обеспечение на Flex. nikita.b Обсуждение статей 1 20.05.2010 15:45