Задать вопрос
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 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий разработчиĸ (FullStack) для разработки международного стартапа
ClickStar • Москва
от 350 000 до 500 000 ₽
Тестировщик с навыками разработчика SDET
Микро-ИТ
от 120 000 ₽
DBA & Blockchain Developer
Blockchair • Москва
от 3 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настроить интеграцию между Voximplant Kit и Dialogflow CX
06 нояб. 2024, в 03:35
5000 руб./за проект
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ещё заказы