CSS: возможно ли добиться следующего макета? - PullRequest
Новая
       19

CSS: возможно ли добиться следующего макета?

2 голосов
/ 17 марта 2019

Возможно ли добиться следующего адаптивного макета дизайна, показанного на изображении ниже, с помощью CSS3 Flexbox? Я могу добиться макета рабочего стола, используя код ниже. Однако я не могу придумать, как сделать div #div3 и #div4 заполнением ниже #div1 и #div2

enter image description here

РЕДАКТИРОВАТЬ: Мне жаль, что я забыл упомянуть, что он не ограничен только CSS Flexbox, и кажется, что сеточное решение будет более гибким, поэтому я просто отмечу его как принятый ответ. Спасибо за помощь, ребята!

Мой код 

#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
}

#div2 {
  background-color: green;
  width: 100px;
  height: 100px;
}

#div3 {
  background-color: orange;
  width: 100px;
  height: 100px;
}

#div4 {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.container,
#flex-container {
  display: flex;
}

#flex-container {
  flex-direction: column;
}
<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="test.css">
</head>


<body>

  <div class="container">
    <div id='div1'></div>

    <div id="flex-container">
      <div id='div2'></div>
      <div id='div3'></div>
      <div id='div4'></div>
    </div>
  </div>

</body>

</html>

Ответы [ 2 ]

3 голосов
/ 17 марта 2019

Использование сетки в этом случае сделает это намного проще.

Каждый div здесь имеет grid-area, установленный на какое-то значение, которое используется, чтобы указать, как он должен вести себя в сетке в соответствии с правилами компоновки.определено в .container grid-template-areas каждая там строка определяет одну строку в сетке.grid-template-rows и grid-template-columns используются для определения количества строк и столбцов 

 * {
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      margin: 0;
    }

    #div1 {
      background-color: red;
      width: 100%;
      height: 100%;
      grid-area: div1;
    }

    #div2 {
      background-color: green;
      width: 100%;
      height: 100%;
      grid-area: div2;
    }

    #div3 {
      background-color: orange;
      width: 100%;
      height: 100%;
      grid-area: div3;
    }

    #div4 {
      background-color: blue;
      width: 100%;
      height: 100%;
      grid-area: div4;
    }

    .container {
      display: grid;
      height: 100%;
      grid-gap: 10px;
      padding: 10px;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "div1 div2" "div3 div3" "div4 div4";
    }

    @media (max-width: 768px) {
      .container {
        grid-template-areas: "div1 div2" "div1 div3" "div1 div4";
      }
    }
<div class="container">
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <div id='div4'></div>
</div>
2 голосов
/ 17 марта 2019

Да. Во-первых, вы можете поместить все div внутри одного контейнера: 

<div id="flex-container">
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <div id='div4'></div>
</div>

Затем в контейнере вы устанавливаете flex-direction: column и flex-wrap: wrap. Вы ставите width 50%, если хотите половину экрана и 100% полный экран. Настройка flex-wrap организует элементы так, как и должно быть.

В мобильном @media вы меняете flex-direction на row и width каждого div в соответствии с желаемой раскладкой.

Было бы так: 

#div1 {
  background-color: red;
  height: 100%;
  width: 50%;
}

#div2 {
  background-color: green;
  height: 100px; // or 33.333%
  width: 50%;
}

#div3 {
  background-color: orange;
  width: 50%;
  height: 100px; // or 33.333%
}

#div4 {
  background-color: blue;
  width: 50%;
  height: 100px; // or 33.333%
}

#flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}

@media (max-width: 480px) { // screen width you prefer
  #flex-container {
    display: flex;
    flex-direction: row;
  }
  #div1 {
    width: 50%;
    height: 100px;
  }
  #div2 {
    width: 50%;
  }
  #div3 {
    width: 100%;
  }
  #div4 {
    width: 100%;
  }
}

Надеюсь, это поможет. Вы можете даже упростить CSS, используя классы для повторяющихся свойств.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...