Контейнер с 3 div, используя Flex-box / Grid - PullRequest
Новая
       56

Контейнер с 3 div, используя Flex-box / Grid

0 голосов
/ 21 октября 2019

В основном я хочу 3 деления. Один прямоугольник выше и 2 маленьких квадрата выстроены рядом друг с другом, ниже этого.

Кто может мне помочь с этим? В приведенном ниже коде я могу создать 3 квадрата. Но есть 2 вверху, 1 внизу.

Но я хочу один прямоугольник, который находится над двумя нижними квадратами. Если это имеет смысл.

[------------------]

[---]] ---] 

 <section class="story story--spaceous">
  <div class="hero__compact-inner">
          <div class="grid">
            <div class="grid__row">
              <div class="grid__col">
                <h2 class="hero__subtitle">
                  Laag 6: Endpoint Security
                </h2>
                <p class="story__intro">
                  Antivirussystemen zorgen voor de optimale veiligheid binnen jouw organisatie. Het regelmatig updaten hiervan verkleint de risico's en kalamiteiten.
                  </p>
                  <div class="flex-container-3-status">
                    <div class="status-dashboard">Status dashboard rechthoek</div>
                    <div class="chart--donut">Donut Diagram Algemene Score</div>
                    <div class="action-list box-50">Actielijst</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</section>

CSS: 

.flex-container-3-status{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-container-3-status> div{
  flex: 0 40%;
  height: 300px;
  width: 300px;
  margin-top: 45px;
  border: #fff solid;
  box-sizing: border-box
}

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

У вас есть 4 div с в гибком контейнере. Определите свойство flex-basis для первого div как: 

.flex-container-4 > div:first-child {
  flex-basis: 100%;
}

. Таким образом, первый div охватит 100% ширины, а остальные div будут выровнены вследующая строка.

Вам также может потребоваться настроить объявление flex: 0 40%; для вашего .flex-container-4 > div, соответственно. flex: 0 50%;, если у вас осталось еще 2 div, или flex: 0 33.33%;, если осталось 3 div (как подсказывает ваш код).

0 голосов
/ 21 октября 2019

Я просто добавляю два класса box-full и box-50 для установки различных стилей для каждого, как показано ниже ... 

.box-full{
  flex: 1 100%;

}
.box-50{
  flex:1 50%;
}


.flex-container-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-container-4 > div {
  height: 300px;
  width: 300px;
  margin-top: 45px;
  border: #fff solid;
  box-sizing: border-box
}
.box-full{
  flex: 1 100%;
  background:red;
}
.box-50{
  flex:1 50%;
  background:yellow;
}
<section class="story story--spaceous">
        <div class="hero__compact-inner">
                <div class="grid">
                  <div class="grid__row">
                    <div class="grid__col">
                      <h2 class="hero__subtitle">
                        Laag 1: Bewustzijn
                      </h2>
                      <p class="story__intro">
                            Ruim de helft van security-calamiteiten wordt veroorzaakt door gebruikers. En slechts 41% van gebruikers kent het beleid ten aanzien van digitale veiligheid. Alleen al door bewustzijn van medewerkers te vergroten, weet je binnen jouw organisatie risico's sterk te beperken.
                        </p>
                        <div class="flex-container-4">
                          <div class="chart--donut box-full">Donut Diagram Algemene Score</div>
                          <div class="chart--donut box-50">Circel Diagram Recente Maatregelen</div>
                          <div class="chart--radar box-50">Radar Chart Verantwoordelijkheid</div>
                          <div class="action-list">To do list ul</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

это то, что вы хотите?

...