Задать вопрос
ddv88
@ddv88
Binance Futures
bootstrap

Bootstrap 4 Flexbox?

Помогите сверстать "страницу" как на изображении. Условие - использоваться только классы BS4 и флексбоксы. Часа два уже бьюсь. Задача вроде примитивная, но тк я не фронтэндщик, ничего толком не получается. Не выходит одновременно выровнять и по колонке и по строке (between и end) и чтобы еще все по центру страницы и чтобы все респонсивно складывалось нормально.

https://jsfiddle.net/rbdmwjzy/

5a2aceb7d5123827913412.jpeg
  • Вопрос задан
  • 293 просмотра
2 комментария
Подписаться 2 Простой 2 комментария
Решения вопроса 1
madu
@madu 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<style>
  body {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    justify-content: space-around;
  }
  .img {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
    height: 80vh;
  }
  .text {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
  }
  img {
    display: block;
    max-height: 50%;
    max-width: 50%;
  }
</style>

<body>
  <div class="img">
    <img src="http://boombo.ru/uploads/posts/2011-08/1312186058_chasti-tela-18.jpg" alt="">
  </div>
  <div class="text">
    <div class="text0">
      TEXT
    </div>
    <div class="text1">
      TEXT
    </div>
  </div>
</body>
</html>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Разработчик PHP
SAINTBUG
от 240 000 до 320 000 ₽
Android разработчик
Сметтер • Санкт-Петербург
от 140 000 ₽
Golang developer
Wanted. • Москва
До 400 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн главной страницы в figma
25 нояб. 2024, в 15:52
3000 руб./за проект
Chatgpt Google sheets
25 нояб. 2024, в 15:43
1500 руб./за проект
Написание статей в нужном стиле ( интерьер, дизайн спальни etc )
25 нояб. 2024, в 15:01
1000 руб./за проект
Ещё заказы