Макет Flex - пусть элементы в контейнере находятся в одной строке

У меня вопрос по гибкости, я не могу разместить поддиаграмму в той же строке.

Моя текущая страница: Основной график Подграфик 1
Подграфик 2
Подграфик 3
Под диаграмма 4
Под диаграмма 5
Подграфик 6
Подграфик 7
Подграфик 8

И вот чего я хочу: Основной график Подграфик 1 Подграфик 2
Под диаграмма 3 Под диаграмма 4
Под диаграмма 5 Под диаграмма 6
Подграфик 7 Подграфик 8

вот мой кодовый ключ

HTML

.dashboard {
  display: flex;
  flex-wrap: wrap;
}


.main-chart {
  height: 600px;
  margin: 10px;
  padding: 20px;
  flex: 1 100%;
  border-radius: 10px;
  background: #BDCCFF;
}

.row {
  flex: 1 100%;
}

.sub-chart {
  flex-basis: 50%;
  height: 400px;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  background: pink;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>My Flex 1</title>
    <link rel = "stylesheet" href = "my-flex-1.css">
</head>

<body>
<div class = "dashboard">
    <div class = "main-chart">Main chart</div>

    <div class = "row">
        <div class = "sub-chart even">Sub Chart 1</div>
        <div class = "sub-chart odd">Sub Chart 2</div>
    </div>

    <div class = "row">
        <div class = "sub-chart even">Sub Chart 3</div>
        <div class = "sub-chart odd">Sub Chart 4</div>
    </div>

    <div class = "row">
        <div class = "sub-chart even">Sub Chart 5</div>
        <div class = "sub-chart odd">Sub Chart 6</div>
    </div>

    <div class = "row">
        <div class = "sub-chart even">Sub Chart 7</div>
        <div class = "sub-chart odd">Sub Chart 8</div>
    </div>
</div>
</body>
</html>

Измените .row { flex: 1 100%; } на .row { flex: 1 50%; }

— 05.04.2021 13:31

html css flexbox

05.04.2021 13:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто нужно изменить flex: 1 50%; в классе строки

.row {
    flex: 1 50%;
}

05.04.2021 13:31

Ответ принят как подходящий

Это работает. Его следует разделить на количество желаемых дополнительных диаграмм. например, если вы хотите 3, вы устанавливаете его на гибкость: 1 33,33%