masha_bunny
@masha_bunny

Как перестроить блок?

Десктоп
5ed2e31cc2103502051401.jpeg

Мобильная версия
5ed2e4315bb38744171833.jpeg
  • Вопрос задан
  • 527 просмотров
Решения вопроса 4
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
С помощью Flexbox примерно вот так:



Правда вышло немного объёмно. Но думаю при желании можно сократить код, например с помощью CSS-переменных. Или... использовать CSS Grid.

Для того чтобы элементы складывались в колонну на мобильных устройствах, точнее при указанной ширине в медиа-запросе, нужно использовать свойство: flex-direction: column;. Это заставит элементы перестраиваться в колонну. Или можно использовать свойство: flex-wrap: wrap и также при указанной ширине в медиа-запросе, поменять условия, только в данном случае нужно будет поменять ширину дочерних блоков. Так как ширина в базовой версии поделена на 2, будет достаточно указать 100% ширины для дочерних блоков, и они встанут в одну колонну. В примере оба варианта, для более надёжной верстки, хотя можно убрать что-то одно.
Ответ написан
@Olegarh1a
https://jsfiddle.net/Olegarh1a/qx75cpb8/

у меня получилось на flex сделать только так. хотелось бы узнать ваше мнение ?
Ответ написан
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор и ищу работу.
@Mummers
5ed34c4ae7dee208945873.png5ed34c52305db299374781.png
<style>

.color_red{background-color:red;}
.color_green{background-color:green;}
.color_blue{background-color:blue;}




section{margin:300px;width:300px; height:300px;}

.grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);}
.grid>div{width:100%;min-height:5vh}

.color_red{grid-column:1/2; grid-row:1/2;}/*Обычное положение*/
.color_green{grid-column:1/2; grid-row:2/3;}
.color_blue{grid-column:2/5; grid-row:1/3;}

@media only screen and (max-width : 768px){/*Когда телефон блоки меняют положение*/
.color_red{grid-column:1/2; grid-row:1/2;}
.color_green{grid-column:2/3; grid-row:1/2;}
.color_blue{grid-column:1/3; grid-row:2/3;}
}
</style>
<section>
    <div class="grid">
        <div class="color_red"></div>
        <div class="color_green"></div>
        <div class="color_blue"></div>
    </div>
</section>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HistoryART
@HistoryART
Надзиратель
.myblock {

   display: flex;
   justify-content: space-around;
   align-items: flex-start;
   flex-wrap: wrap;

}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
GlassesUSA.com Тольятти
от 1 200 до 1 500 $
iSpring Йошкар-Ола
от 80 000 до 130 000 ₽
10 июл. 2020, в 19:54
4000 руб./за проект
10 июл. 2020, в 18:55
4000 руб./за проект